SpreadJS Documentation
Creating Column, Line, and Winloss Sparklines with Formulas

You can use formulas to create column, line, and winloss sparklines.

The formulas have the following options:

Option Description
Data A range reference that represents sparkline data. For example: A1:C3.
DataOrientation A number that represents the sparkline data orientation, 0 is vertical, 1 is horizontal.
DateAxisData A range reference that represents sparkline date axis data. For example: D1:F3. This setting is optional.
DateAxisOrientation A number that represents the sparkline date axis orientation, 0 is vertical, 1 is horizontal. This setting is optional.
Setting A string with JSON format. For example: "{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,
seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,
displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}". This setting is optional.

The following table lists the JSON format string and the equivalent sparkline setting method or property.

Json Property SparklineSetting Method or Property
AXISCOLOR axisColor()
FIRSTMARKERCOLOR firstMarkerColor()
HIGHMARKERCOLOR highMarkerColor()
LASTMARKERCOLOR lastMarkerColor()
LOWMARKERCOLOR lowMarkerColor()
MARKERSCOLOR markersColor()
NEGATIVECOLOR negativeColor()
SERIESCOLOR seriesColor()
DISPLAYEMPTYCELLSAS displayEmptyCellsAs
RIGHTTOLEFT rightToLeft
DISPLAYHIDDEN displayHidden
DISPLAYXAXIS displayXAxis
SHOWFIRST showFirst()
SHOWHIGH showHigh()
SHOWLAST showLast()
SHOWLOW showLow()
SHOWNEGATIVE showNegative()
SHOWMARKERS showMarkers()
MANUALMAX manualMax
MANUALMIN manualMin
MAXAXISTYPE maxAxisType
MINAXISTYPE minAxisType
LINEWEIGHT lineWeight

The line, column, and winloss formulas have the following format:

=LINESPARKLINE(data, dataOrientation, dateAxisData, dateAxisOrientation, setting)
=COLUMNSPARKLINE(data, dataOrientation, dateAxisData, dateAxisOrientation, setting)
=WINLOSSSPARKLINE(data, dataOrientation, dateAxisData, dateAxisOrientation, setting)

Using Code

This example uses formulas to create column, line, and winloss sparklines.

JavaScript
Copy Code
activeSheet.addSpan(0, 0, 1, 5);
activeSheet.getCell(0, 0).value("The company revenue in 2014").font("20px Arial").hAlign(GcSpread.Sheets.HorizontalAlign.center).vAlign(GcSpread.Sheets.VerticalAlign.center);
var table1 = activeSheet.addTable("table1", 1, 0, 13, 5, GcSpread.Sheets.TableStyles.medium4());
table1.rowFilter().filterButtonVisible(false);
activeSheet.setValue(1, 0, "Month");
activeSheet.setValue(1, 1, "Revenue");
activeSheet.setValue(1, 2, "Diagram 1");
activeSheet.setValue(1, 3, "Diagram 2");
activeSheet.setValue(1, 4, "Diagram 3");
for (var i = 2; i < 14; i++) {
    activeSheet.setValue(i, 0, new Date(2014, i - 1, 1));
}
activeSheet.setFormatter(-1, 0, "mm/dd/yyyy");
activeSheet.setValue(2, 1, 10);
activeSheet.setValue(3, 1, 20);
activeSheet.setValue(4, 1, 50);
activeSheet.setValue(5, 1, 100);
activeSheet.setValue(6, 1, 30);
activeSheet.setValue(7, 1, - 10);
activeSheet.setValue(8, 1, -25);
activeSheet.setValue(9, 1, 60);
activeSheet.setValue(10, 1, 50);
activeSheet.setValue(11, 1, 30);
activeSheet.setValue(12, 1, 80);
activeSheet.setValue(13, 1, 88);
activeSheet.addSpan(2, 2, 10, 1);
activeSheet.setFormula(2, 2, '=LINESPARKLINE(B3:B14,0,A3:A14,0,"{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}")');
activeSheet.addSpan(2, 3, 10, 1);
activeSheet.setFormula(2, 3, '=COLUMNSPARKLINE(B3:B14,0,A3:A14,0,"{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}")');
activeSheet.addSpan(2, 4, 10, 1);
activeSheet.setFormula(2, 4, '=WINLOSSSPARKLINE(B3:B14,0,A3:A14,0)');
activeSheet.setRowHeight(0, 50);
for (var i = 1; i < 14; i++) {
    activeSheet.setRowHeight(i, 25);
}
activeSheet.setColumnWidth(0, 80);
activeSheet.setColumnWidth(2, 200);
activeSheet.setColumnWidth(3, 200);
activeSheet.setColumnWidth(4, 200);
See Also

 

 


Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.