Developer's Guide
Working with Columns
Adding a Sparkline Column
Version 1
Version 1

Adding a Sparkline Column

In DataViewsJS, you can use sparklines to display data trends in a small graph. The sparklines display the most recent value at the right-most data point and compare the value to the previous values.

The following table lists the formulas for different sparklines:

Sparkline Formula Description
PIESPARKLINE =PIESPARKLINE(column\percentage,color1?,color2?,…..) For column\percentage:
If column, column value should be a number or a number array.
If percent, the percentage is the value.
If parse value is invalid, it will be treated as 0.
ColorInfo:
- Color parameter count is more than or equal to range count, values and colors are one-to-one correspondence.
- Color parametr count is less than the range count, it recycles given colors and uses a linear gradient to ensure each sector has a different color.
- If there is no color, it uses "darkgray" as default.
LINESPARKLINE =LINESPARKLINE(data, dateAxisData?, setting?) where:
data - a column reference represents sparkline data
dateAxisData - a column reference represents sparkline date axis data.
setting - a string with JSON formatNote: dateAxisData and setting is optional and each value of "setting" property has a default value.
COLUMNSPARKLINE =COLUMNSPARKLINE(data, dateAxisData?, setting?) where:
data - a column reference represents sparkline data
dateAxisData - a column reference represents sparkline date axis data.
setting - a string with JSON formatNote: dateAxisData and setting is optional and each value of "setting" property has a default value.
WINLOSSSPARKLINE =WINLOSSSPARKLINE(data, dateAxisData?, setting?) where:
data - a column reference represents sparkline data
dateAxisData - a column reference represents sparkline date axis data.
setting - a string with JSON formatNote: dateAxisData and setting is optional and each value of "setting" property has a default value.

Use the following steps to add different types of sparklines, such as PIESPARKLINE, LINESPARKLINE, COLUMNSPARKLINE and WINLOSSSPARKLINE. The image displays various sales trends:

Sample Code

  1. Add references to DataViewsJS files.
<script src="[Your Script Path]/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/gc.dataviews.grid.min.js" type="text/javascript"></script>
  1. Define the different sparkline variables to render while creating a grid.
function renderWinlosssparkline(data, container) {
  var newData = [];
  newData.push(data.may - standard);
  newData.push(data.june - standard);
  newData.push(data.july - standard);
  newData.push(data.aug - standard);
  newData.push(data.sept - standard);
  newData.push(data.oct - standard);
  var winlossSparkline = new GC.DataViews.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,
    },
  });
  winlossSparkline.paint(container);
}

var lineSparklineSetting = {
  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 = {
  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", "", "' + JSON.stringify(lineSparklineSetting).replace(/"/g, '') + '")';
var columnSparklineFormula =
  '=COLUMNSPARKLINE("may,june,july,aug,sept,oct", "", "' +
  JSON.stringify(columnSparklineSettings).replace(/"/g, '') +
  '")';
var smallDevice = screen.width <= 480;
var colWidthSmall = smallDevice ? 125 : '*';
var colWidthLarge = smallDevice ? 125 : '2*';
  1. Add the column definition.
var columns = [
  {
    id: 'salesPerson',
    caption: 'Sales Person',
    dataField: 'Salesperson',
    width: colWidthSmall,
  },
  {
    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,
  },
];
  1. Initialize the code by calling the grid ID from the DIV tag.
dataView = new GC.DataViews.DataView(
  document.getElementById('grid1'),
  data,
  columns,
  new GC.DataViews.GridLayout({
    rowHeight: 32,
  })
);

See also