FlexGrid Sparkline Columns with CellMaker

March 31 2020

We have added an easy way to add Sparkline Columns to our JavaScript DataGrid. 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. Sparklines are available in Excel, and now they are also available on the FlexGrid.

In that last release, we added a cellTemplate property to the FlexGrid's Column class. This property allows developers to define custom content for cells using template literals, which provide a lot of flexibility.

In many cases, the cellTemplate is simpler and easier to use than the formatItem event. But some of our customers wanted something even more manageable, so they would not have to write any HTML if all they wanted to do was create some common simple cells like buttons and hyperlinks.

We listened and decided to leverage the cellTemplate property to build a new module called CellMaker. The CellMaker module provides methods that create several types of simple and useful cells, including Sparklines.

Let's look at how we can use CellMaker to add a Sparkline column to FlexGrid.

To create sparkline columns, use the CellMaker class as follows:

import { FlexGrid, ICellTemplateContext } from '@grapecity/wijmo.grid';  
 import {  
     CellMaker, SparklineType, SparklineMarkers  
 } from '@grapecity/wijmo.grid.cellmaker';  

 let theGrid = new FlexGrid('#theGrid', {  
     showMarquee: true,  
     autoGenerateColumns: false,  
     columns: [  

         // spark lines: column  
         {  
             binding: 'history',  
             header: 'Sparklines: Column',  
             width: 175,  
             cellTemplate: CellMaker.makeSparkline({  
                 type: SparklineType.Column,  
                 markers: SparklineMarkers.High | SparklineMarkers.Low,  
                 label: '${item.country} sales history column chart'  
             })  
         }  
     ]  
 });

The code sets the column's cellTemplate property to an ICellTemplateFunction provided by the CellMaker's makeSparkline method.

The 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) and markers you want to display. You should also include a label expression to improve accessibility.

The result looks like this: