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.

<p>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.</p> <p>By default, Spread.Views shows individual header rows in each column header. When you set the <strong>separateColumn</strong> property to <strong>false</strong>, Spread.Views shows one header row entry instead of individual ones.</p> <p>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.</p>
<!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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', 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 */