CellMaker Sparklines

The CellMaker class provides a simple way to create custom cells of common types.

This sample shows how to use the CellMaker class to create cells with sparklines.

Sparklines are small charts used to show trends in a series of values, such as seasonal increases or decreases, economic cycles, or to highlight maximum and minimum values.

The CellMaker.makeSparkline method gets the chart data from the column binding. It allows you to set choose the type of sparkline (line, column, or win/loss), markers you want to display and label expression to improve accessibility.

Learn about FlexGrid | FlexGrid API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { CellMaker, SparklineType, SparklineMarkers } from '@grapecity/wijmo.grid.cellmaker'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { getData, getCountries } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { new FlexGrid('#theGrid', { showMarquee: true, selectionMode: 'MultiRange', autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true, width: 80 }, { binding: 'country', header: 'Country', dataMap: getCountries() }, // spark lines: Line { binding: 'history', header: 'Sparklines: Line', width: 175, cellTemplate: CellMaker.makeSparkline({ //maxPoints: 5, markers: SparklineMarkers.High | SparklineMarkers.Low, label: '${item.country} sales history line chart', }) }, // spark lines: column { binding: 'history', header: 'Sparklines: Column', width: 175, cellTemplate: CellMaker.makeSparkline({ //maxPoints: 5, type: SparklineType.Column, markers: SparklineMarkers.High | SparklineMarkers.Low, label: '${item.country} sales history column chart' }) }, // spark lines: win/loss { binding: 'history', header: 'Sparklines: WinLoss', width: 175, cellTemplate: CellMaker.makeSparkline({ //maxPoints: 5, type: SparklineType.WinLoss, markers: SparklineMarkers.Negative, label: '${item.country} sales history win/loss chart' }) } ], itemsSource: getData(1000) }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid CellMaker: Sparklines</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theGrid"></div> </div> </body> </html>
export function getCountries() { return 'US,Germany,UK,Japan,Italy,Greece'.split(','); } export function getData(cnt) { let countries = getCountries(), data = []; for (var i = 0; i < cnt; i++) { let country = countries[i % countries.length]; data.push({ id: i, country: country, url: 'https://visit.' + country + '.com', downloads: Math.round(Math.random() * 1000), sales: Math.random() * 2000, expenses: Math.random() * 1000, checked: i % 4 == 0, history: getValues(3 + Math.random() * 20, 100), img: 'https://cdn.mescius.com/wijmo/images/' + (i % 4 + 1) + '.png', rating: Math.floor(Math.random() * 5) }); } return data; } function getValues(cnt, max) { let values = [], val = Math.random() * max; for (let i = 0; i < cnt; i++) { val = Math.min(max, val + (Math.random() - 0.5) * max / 5); values.push(val); } return values; }
.wj-flexgrid { max-height: 300px; } .wj-flexgrid .wj-cell { padding: 6px 10px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);