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.

<p>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.</p> <p>Since DataViews is modular, you need to reference <strong>sparkline.js</strong> to get started.</p> <p>The <strong>Sales - Trend Line</strong> and <strong>Sales - Count</strong> 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 <strong>dataField</strong> to a Sparkline formula and defining that formula in your code. You can see <strong>lineSparklineFormula</strong> and <strong>columnSparklineFormula</strong> in the code below.</p> <p>Because drawing Sparkline need more calculation, when there are lots of data or the performance of the device is not good, you can set <strong>allowAsyncRender</strong> to <strong>true</strong> to draw sparkline asynchronously. When the built-in Sparklines (LINESPARKLINE, COLUMNSPARKLINE, WINLOSSSPARKLINE and PIESPARKLINE) don't meet your needs, you can use <strong>asyncRender</strong> to define your customized Sparklines. You can see we use this way in column <strong>winloss</strong></p>
<!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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', 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', }, ];