Sparkline

Sparklines allow you to display data trends in small graphs, with the most recent value at the right-most data point. This example demonstrates Sparklines and two ways to implement them.

Sparklines allow you to display data trends in small graphs, with the most recent value at the right-most data point. This example demonstrates Sparklines and two ways to implement them. Since DataViews is modular, you need to reference sparkline.js to get started. The Sales - Trend Line and Sales - Count columns are two representations of the same data, which is an array of six values. The first is a line and the second is a column. They are implemented by setting the column dataField to a Sparkline formula and defining that formula in your code. You can see lineSparklineFormula and columnSparklineFormula in the code below. Because drawing Sparkline need more calculation, when there are lots of data or the performance of the device is not good, you can set allowAsyncRender to true to draw sparkline asynchronously. When the built-in Sparklines (LINESPARKLINE, COLUMNSPARKLINE, WINLOSSSPARKLINE and PIESPARKLINE) don't meet your needs, you can use asyncRender to define your customized Sparklines. You can see we use this way in column winloss
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Columns/Sparkline/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="columns, presenter, rendering, chart" /> <meta name="description" content="Sparklines allow you to display data trends in small graphs, with the most recent value at the right-most data point. This example demonstrates Sparklines and two ways to implement them." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sparkline | 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" /> <!-- 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/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 standard = 3000; function encodeSparklineSettings(settings) { var json = JSON.stringify(settings).replace(/"/g, ''); return '"' + json + '"'; } var makeCols = function makeCols(WinlossSparkline) { function renderWinlosssparkline(data, container) { var newData = []; newData.push( data.may - standard, data.june - standard, data.july - standard, data.aug - standard, data.sept - standard, data.oct - standard ); var sparkline = new WinlossSparkline({ values: newData, setting: { axisColor: '#0C0A3E', markersColor: '#FED766', negativeColor: '#FED766', seriesColor: '#995D81', displayXAxis: true, showFirst: true, showHigh: true, showLast: true, showLow: true, showNegative: true, showMarkers: true, }, }); sparkline.paint(container); } var lineSparklineSetting = encodeSparklineSettings({ highMarkerColor: '#995D81', lowMarkerColor: '#FED766', markersColor: 'black', seriesColor: '#009FB7', showMarkers: true, showHigh: true, showLow: true, lineWeight: 2, minAxisType: 2, maxAxisType: 2, manualMax: 25000, manualMin: 0, }); var columnSparklineSettings = encodeSparklineSettings({ highMarkerColor: '#995D81', lowMarkerColor: '#FED766', markersColor: 'black', seriesColor: '#009FB7', showMarkers: true, showHigh: true, showLow: true, minAxisType: 2, maxAxisType: 2, manualMax: 25000, manualMin: 0, }); var lineSparklineFormula = '=LINESPARKLINE("may,june,july,aug,sept,oct", "", '.concat(lineSparklineSetting, ')'); var columnSparklineFormula = '=COLUMNSPARKLINE("may,june,july,aug,sept,oct", "", '.concat( columnSparklineSettings, ')' ); var smallDevice = screen.width <= 480; var colWidthLarge = smallDevice ? 125 : '2*'; return [ { id: 'salesPerson', caption: 'Sales Person', dataField: 'Salesperson', width: 150, }, { id: 'may', caption: 'May', dataField: 'May', dataType: 'number', format: '$#,##', }, { id: 'june', caption: 'June', dataField: 'June', dataType: 'number', format: '$#,##', }, { id: 'july', caption: 'July', dataField: 'July', dataType: 'number', format: '$#,##', }, { id: 'aug', caption: 'Aug.', dataField: 'Aug', dataType: 'number', format: '$#,##', }, { id: 'sept', caption: 'Sept.', dataField: 'Sept', dataType: 'number', format: '$#,##', }, { id: 'oct', caption: 'Oct.', dataField: 'Oct', dataType: 'number', format: '$#,##', }, { id: 'trend', caption: 'LineSparkline', width: colWidthLarge, dataField: lineSparklineFormula, }, { id: 'sales', caption: 'ColumnSparkline', width: colWidthLarge, dataField: columnSparklineFormula, visible: !smallDevice, }, { id: 'winloss', caption: 'WinlossSparkline', width: colWidthLarge, asyncRender: renderWinlosssparkline, visible: !smallDevice, }, ]; }; var cols = makeCols(GC.DataViews.WinlossSparkline); new GC.DataViews.DataView( document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout({ rowHeight: 32, allowAsyncRender: isTouchDevice(), }) ); function isTouchDevice() { return window.PointerEvent || window.MSPointerEvent || 'ontouchstart' in document.documentElement; } // focus data.view by default document.getElementById('grid').focus();
// sales details data var data = [ { Salesperson: 'Albertson, Kathy', May: '3947', June: '557', July: '3863', Aug: '1117', Sept: '8237', Oct: '8690', }, { Salesperson: 'Allenson, Carol', May: '4411', June: '1042', July: '9355', Aug: '1100', Sept: '10185', Oct: '18749', }, { Salesperson: 'Altman, Zoey', May: '2521', June: '3072', July: '6702', Aug: '2116', Sept: '13452', Oct: '8046', }, { Salesperson: 'Bittiman, William', May: '4752', June: '3755', July: '4415', Aug: '1089', Sept: '4404', Oct: '20114', }, { Salesperson: 'Brennan, Michael', May: '4964', June: '3152', July: '11601', Aug: '1122', Sept: '3170', Oct: '10733', }, { Salesperson: 'Carlson, David', May: '2327', June: '4056', July: '3726', Aug: '1135', Sept: '8817', Oct: '18524', }, { Salesperson: 'Collman, Harry', May: '3967', June: '4906', July: '9007', Aug: '2113', Sept: '13090', Oct: '13953', }, { Salesperson: 'Counts, Elizabeth', May: '4670', June: '521', July: '4505', Aug: '1024', Sept: '3528', Oct: '15275', }, { Salesperson: 'David, Chloe', May: '3379', June: '3428', July: '3973', Aug: '1716', Sept: '4839', Oct: '13085', }, { Salesperson: 'Davis, William', May: '5363', June: '1562', July: '2945', Aug: '1176', Sept: '9642', Oct: '13714', }, { Salesperson: 'Dumlao, Richard', May: '3275', June: '2779', July: '7549', Aug: '1101', Sept: '5850', Oct: '15065', }, { Salesperson: 'Farmer, Kim', May: '3860', June: '3470', July: '3862', Aug: '1040', Sept: '10024', Oct: '18389', }, { Salesperson: 'Ferguson, Elizabeth', May: '4685', June: '1913', July: '4596', Aug: '1126', Sept: '5503', Oct: '10686', }, { Salesperson: 'Flores, Tia', May: '4052', June: '2883', July: '2142', Aug: '2012', Sept: '13547', Oct: '21983', }, { Salesperson: 'Ford, Victor', May: '5541', June: '4931', July: '8283', Aug: '1054', Sept: '9543', Oct: '11967', }, { Salesperson: 'Hodges, Melissa', May: '5667', June: '4798', July: '8420', Aug: '1389', Sept: '10468', Oct: '12677', }, { Salesperson: 'Jameson, Robinson', May: '4269', June: '4459', July: '2248', Aug: '1058', Sept: '6267', Oct: '14982', }, { Salesperson: 'Kellerman, Frances', May: '3502', June: '4172', July: '11074', Aug: '1282', Sept: '2365', Oct: '9380', }, { Salesperson: 'Mark, Katharine', May: '5853', June: '2011', July: '3807', Aug: '1348', Sept: '11110', Oct: '18047', }, { Salesperson: 'Morrison, Thomas', May: '2586', June: '2398', July: '2453', Aug: '1020', Sept: '4612', Oct: '20525', }, { Salesperson: 'Moss, Pete', May: '5714', June: '4960', July: '11507', Aug: '1010', Sept: '6599', Oct: '11626', }, { Salesperson: 'Paul, Henry David', May: '5347', June: '4060', July: '7056', Aug: '1555', Sept: '5439', Oct: '15285', }, { Salesperson: 'Post, Melissa', May: '4222', June: '3317', July: '5849', Aug: '2081', Sept: '10521', Oct: '18979', }, { Salesperson: 'Robinson, Betty', May: '5929', June: '3127', July: '7971', Aug: '1114', Sept: '2686', Oct: '24099', }, { Salesperson: 'Shadow, Elizabeth', May: '4270', June: '4263', July: '4999', Aug: '1052', Sept: '2399', Oct: '8924', }, { Salesperson: 'Smith, Harold', May: '5421', June: '4728', July: '7158', Aug: '1116', Sept: '4276', Oct: '13907', }, { Salesperson: 'Thomas, Robert', May: '3259', June: '3679', July: '8406', Aug: '2123', Sept: '14697', Oct: '16827', }, { Salesperson: 'Thompson, Shannon', May: '2943', June: '3943', July: '11987', Aug: '1183', Sept: '3071', Oct: '11292', }, { Salesperson: 'Walters, Chris', May: '5529', June: '4925', July: '3122', Aug: '1629', Sept: '14684', Oct: '20871', }, { Salesperson: 'Zimmerman, Kate', May: '2380', June: '3247', July: '11956', Aug: '1156', Sept: '3098', Oct: '8531', }, ];