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 LineSparkline, ColumnSparkline, and WinlossSparkline columns are three representations of the same data, which is an array of six values.
The first is a line, the second is a column, and the third is a win/loss sparkline. They are implemented by setting the column dataField to a Sparkline formula and defining that formula in your code.
You can see lineSparklineFormula, columnSparklineFormula, and winlossSparklineFormula in the code below.
Because drawing Sparklines needs 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 | MESCIUS 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" />
<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:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</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">
<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',
},
];
