Stock Index

This example shows how you can add a single row at the column header row, which is useful for display things like charts that are always on top of data.

This example shows how you can add a single row at the column header row, which is useful for display things like charts that are always on top of data. By default, Spread.Views shows individual header rows in each column header. When you set the separateColumn property to false, Spread.Views shows one header row entry instead of individual ones. In this demo, not having separate columns in the column headers allows the developer to display a chart that is always at the top of the data, even when scrolling. This can also be extended to other types of data at the top of the grid.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Rows/StockIndex/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="rows, header row, headerrow" /> <meta name="description" content="This example shows how you can add a single row at the column header row, which is useful for display things like charts that are always on top of data." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Stock Index | Features | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="grid" class="grid"></div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var stockChart; var cols = [ { id: 'date', caption: 'Date', dataField: 'date', }, { id: 'open', caption: 'Open', dataField: 'open', }, { id: 'close', caption: 'Close', dataField: 'close', }, { id: 'low', caption: 'Low', dataField: 'low', }, { id: 'high', caption: 'High', dataField: 'high', }, ]; var dataView = new GC.DataViews.DataView( document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout({ headerRow: { visible: true, height: 250, separateColumn: false, renderer: '<div id="stockWrapper" style="widht:100%;height:100%;"></div>', }, }) ); // focus data.view by default document.getElementById('grid').focus(); dataView.columnChanged.addHandler(function (e) { if (e.type === 'resized') { stockChart.resize(); } }); var data0 = splitData(data); var chartOptions = { title: { text: 'STOCK INDEX', left: 'center', }, tooltip: { trigger: 'axis', axisPointer: { type: 'line', }, }, grid: { left: '5%', right: '5%', bottom: '15%', }, xAxis: { type: 'category', data: data0.categoryData, scale: true, boundaryGap: false, axisLine: { onZero: false, }, splitLine: { show: false, }, splitNumber: 20, min: 'dataMin', max: 'dataMax', }, yAxis: { scale: true, splitArea: { show: true, }, }, dataZoom: [ { type: 'inside', start: 50, end: 100, }, { show: true, type: 'slider', y: '90%', start: 50, end: 100, }, ], series: [ { name: 'STOCK INDEX', type: 'candlestick', data: data0.values, }, ], }; stockChart = echarts.init(document.getElementById('stockWrapper')); stockChart.setOption(chartOptions);
var data = [ { date: '2018/1/24', open: 2320.26, close: 2320.26, low: 2287.3, high: 2362.94, }, { date: '2018/1/25', open: 2300, close: 2291.3, low: 2288.26, high: 2308.38, }, { date: '2018/1/28', open: 2295.35, close: 2346.5, low: 2295.35, high: 2346.92, }, { date: '2018/1/29', open: 2347.22, close: 2358.98, low: 2337.35, high: 2363.8, }, { date: '2018/1/30', open: 2360.75, close: 2382.48, low: 2347.89, high: 2383.76, }, { date: '2018/1/31', open: 2383.43, close: 2385.42, low: 2371.23, high: 2391.82, }, { date: '2018/2/1', open: 2377.41, close: 2419.02, low: 2369.57, high: 2421.15, }, { date: '2018/2/4', open: 2425.92, close: 2428.15, low: 2417.58, high: 2440.38, }, { date: '2018/2/5', open: 2411, close: 2433.13, low: 2403.3, high: 2437.42, }, { date: '2018/2/6', open: 2432.68, close: 2434.48, low: 2427.7, high: 2441.73, }, { date: '2018/2/7', open: 2430.69, close: 2418.53, low: 2394.22, high: 2433.89, }, { date: '2018/2/8', open: 2416.62, close: 2432.4, low: 2414.4, high: 2443.03, }, { date: '2018/2/18', open: 2441.91, close: 2421.56, low: 2415.43, high: 2444.8, }, { date: '2018/2/19', open: 2420.26, close: 2382.91, low: 2373.53, high: 2427.07, }, { date: '2018/2/20', open: 2383.49, close: 2397.18, low: 2370.61, high: 2397.94, }, { date: '2018/2/21', open: 2378.82, close: 2325.95, low: 2309.17, high: 2378.82, }, { date: '2018/2/22', open: 2322.94, close: 2314.16, low: 2308.76, high: 2330.88, }, { date: '2018/2/25', open: 2320.62, close: 2325.82, low: 2315.01, high: 2338.78, }, { date: '2018/2/26', open: 2313.74, close: 2293.34, low: 2289.89, high: 2340.71, }, { date: '2018/2/27', open: 2297.77, close: 2313.22, low: 2292.03, high: 2324.63, }, { date: '2018/2/28', open: 2322.32, close: 2365.59, low: 2308.92, high: 2366.16, }, { date: '2018/3/1', open: 2364.54, close: 2359.51, low: 2330.86, high: 2369.65, }, { date: '2018/3/4', open: 2332.08, close: 2273.4, low: 2259.25, high: 2333.54, }, { date: '2018/3/5', open: 2274.81, close: 2326.31, low: 2270.1, high: 2328.14, }, { date: '2018/3/6', open: 2333.61, close: 2347.18, low: 2321.6, high: 2351.44, }, { date: '2018/3/7', open: 2340.44, close: 2324.29, low: 2304.27, high: 2352.02, }, { date: '2018/3/8', open: 2326.42, close: 2318.61, low: 2314.59, high: 2333.67, }, { date: '2018/3/11', open: 2314.68, close: 2310.59, low: 2296.58, high: 2320.96, }, { date: '2018/3/12', open: 2309.16, close: 2286.6, low: 2264.83, high: 2333.29, }, { date: '2018/3/13', open: 2282.17, close: 2263.97, low: 2253.25, high: 2286.33, }, { date: '2018/3/14', open: 2255.77, close: 2270.28, low: 2253.31, high: 2276.22, }, { date: '2018/3/15', open: 2269.31, close: 2278.4, low: 2250, high: 2312.08, }, { date: '2018/3/18', open: 2267.29, close: 2240.02, low: 2239.21, high: 2276.05, }, { date: '2018/3/19', open: 2244.26, close: 2257.43, low: 2232.02, high: 2261.31, }, { date: '2018/3/20', open: 2257.74, close: 2317.37, low: 2257.42, high: 2317.86, }, { date: '2018/3/21', open: 2318.21, close: 2324.24, low: 2311.6, high: 2330.81, }, { date: '2018/3/22', open: 2321.4, close: 2328.28, low: 2314.97, high: 2332, }, { date: '2018/3/25', open: 2334.74, close: 2326.72, low: 2319.91, high: 2344.89, }, { date: '2018/3/26', open: 2318.58, close: 2297.67, low: 2281.12, high: 2319.99, }, { date: '2018/3/27', open: 2299.38, close: 2301.26, low: 2289, high: 2323.48, }, { date: '2018/3/28', open: 2273.55, close: 2236.3, low: 2232.91, high: 2273.55, }, { date: '2018/3/29', open: 2238.49, close: 2236.62, low: 2228.81, high: 2246.87, }, { date: '2018/4/1', open: 2229.46, close: 2234.4, low: 2227.31, high: 2243.95, }, { date: '2018/4/2', open: 2234.9, close: 2227.74, low: 2220.44, high: 2253.42, }, { date: '2018/4/3', open: 2232.69, close: 2225.29, low: 2217.25, high: 2241.34, }, { date: '2018/4/8', open: 2196.24, close: 2211.59, low: 2180.67, high: 2212.59, }, { date: '2018/4/9', open: 2215.47, close: 2225.77, low: 2215.47, high: 2234.73, }, { date: '2018/4/10', open: 2224.93, close: 2226.13, low: 2212.56, high: 2233.04, }, { date: '2018/4/11', open: 2236.98, close: 2219.55, low: 2217.26, high: 2242.48, }, { date: '2018/4/12', open: 2218.09, close: 2206.78, low: 2204.44, high: 2226.26, }, { date: '2018/4/15', open: 2199.91, close: 2181.94, low: 2177.39, high: 2204.99, }, { date: '2018/4/16', open: 2169.63, close: 2194.85, low: 2165.78, high: 2196.43, }, { date: '2018/4/17', open: 2195.03, close: 2193.8, low: 2178.47, high: 2197.51, }, { date: '2018/4/18', open: 2181.82, close: 2197.6, low: 2175.44, high: 2206.03, }, { date: '2018/4/19', open: 2201.12, close: 2244.64, low: 2200.58, high: 2250.11, }, { date: '2018/4/22', open: 2236.4, close: 2242.17, low: 2232.26, high: 2245.12, }, { date: '2018/4/23', open: 2242.62, close: 2184.54, low: 2182.81, high: 2242.62, }, { date: '2018/4/24', open: 2187.35, close: 2218.32, low: 2184.11, high: 2226.12, }, { date: '2018/4/25', open: 2213.19, close: 2199.31, low: 2191.85, high: 2224.63, }, { date: '2018/4/26', open: 2203.89, close: 2177.91, low: 2173.86, high: 2210.58, }, { date: '2018/5/2', open: 2170.78, close: 2174.12, low: 2161.14, high: 2179.65, }, { date: '2018/5/3', open: 2179.05, close: 2205.5, low: 2179.05, high: 2222.81, }, { date: '2018/5/6', open: 2212.5, close: 2231.17, low: 2212.5, high: 2236.07, }, { date: '2018/5/7', open: 2227.86, close: 2235.57, low: 2219.44, high: 2240.26, }, { date: '2018/5/8', open: 2242.39, close: 2246.3, low: 2235.42, high: 2255.21, }, { date: '2018/5/9', open: 2246.96, close: 2232.97, low: 2221.38, high: 2247.86, }, { date: '2018/5/10', open: 2228.82, close: 2246.83, low: 2225.81, high: 2247.67, }, { date: '2018/5/13', open: 2247.68, close: 2241.92, low: 2231.36, high: 2250.85, }, { date: '2018/5/14', open: 2238.9, close: 2217.01, low: 2205.87, high: 2239.93, }, { date: '2018/5/15', open: 2217.09, close: 2224.8, low: 2213.58, high: 2225.19, }, { date: '2018/5/16', open: 2221.34, close: 2251.81, low: 2210.77, high: 2252.87, }, { date: '2018/5/17', open: 2249.81, close: 2282.87, low: 2248.41, high: 2288.09, }, { date: '2018/5/20', open: 2286.33, close: 2299.99, low: 2281.9, high: 2309.39, }, { date: '2018/5/21', open: 2297.11, close: 2305.11, low: 2290.12, high: 2305.3, }, { date: '2018/5/22', open: 2303.75, close: 2302.4, low: 2292.43, high: 2314.18, }, { date: '2018/5/23', open: 2293.81, close: 2275.67, low: 2274.1, high: 2304.95, }, { date: '2018/5/24', open: 2281.45, close: 2288.53, low: 2270.25, high: 2292.59, }, { date: '2018/5/27', open: 2286.66, close: 2293.08, low: 2283.94, high: 2301.7, }, { date: '2018/5/28', open: 2293.4, close: 2321.32, low: 2281.47, high: 2322.1, }, { date: '2018/5/29', open: 2323.54, close: 2324.02, low: 2321.17, high: 2334.33, }, { date: '2018/5/30', open: 2316.25, close: 2317.75, low: 2310.49, high: 2325.72, }, { date: '2018/5/31', open: 2320.74, close: 2300.59, low: 2299.37, high: 2325.53, }, { date: '2018/6/3', open: 2300.21, close: 2299.25, low: 2294.11, high: 2313.43, }, { date: '2018/6/4', open: 2297.1, close: 2272.42, low: 2264.76, high: 2297.1, }, { date: '2018/6/5', open: 2270.71, close: 2270.93, low: 2260.87, high: 2276.86, }, { date: '2018/6/6', open: 2264.43, close: 2242.11, low: 2240.07, high: 2266.69, }, { date: '2018/6/7', open: 2242.26, close: 2210.9, low: 2205.07, high: 2250.63, }, { date: '2018/6/13', open: 2190.1, close: 2148.35, low: 2126.22, high: 2190.1, }, ]; var splitData = function splitData(data) { var categoryData = []; var values = []; for (var i = 0; i < data.length; i++) { var tempData = _.map(data[i], _.identity); categoryData.push(tempData.splice(0, 1)[0]); values.push(tempData); } return { categoryData: categoryData, values: values, }; };
.gc-header-row-cell { padding: 4px; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvU3RvY2tJbmRleC9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dzL1N0b2NrSW5kZXgvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxZQUFBO0FDQ0YiLCJmaWxlIjoiRmVhdHVyZXMvUm93cy9TdG9ja0luZGV4L3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdjLWhlYWRlci1yb3ctY2VsbCB7XG4gIHBhZGRpbmc6IDRweDtcbn1cbiIsIi5nYy1oZWFkZXItcm93LWNlbGwge1xuICBwYWRkaW5nOiA0cHg7XG59Il19 */