SpreadJS Documentation
Creating Column, Line, and Winloss Sparklines Using Methods
SpreadJS Documentation > Developer's Guide > Managing Data Visualization and Objects > Understanding Sparklines > Creating Column, Line, and Winloss Sparklines Using Methods

Use the setSparkline method to add a column, line, or winloss sparkline. Use the SparklineSetting class to specify colors and other options.

Using Code

This example adds column, line, and winloss sparklines.

JavaScript
Copy Code

activeSheet.setValue(0, 0, "Data Range is A2-A9");
activeSheet.setValue(1, 0, 1);
activeSheet.setValue(2, 0, -2);
activeSheet.setValue(3, 0, -1);
activeSheet.setValue(4, 0, 6);
activeSheet.setValue(5, 0, 4);
activeSheet.setValue(6, 0, -4);
activeSheet.setValue(7, 0, 3);
activeSheet.setValue(8, 0, 8);
activeSheet.setValue(0, 2, "Date axis range is C2-C9");
activeSheet.setValue(1, 2, '2011/1/5');
activeSheet.setValue(2, 2, '2011/1/1');
activeSheet.setValue(3, 2, '2011/2/11');
activeSheet.setValue(4, 2, '2011/3/1');
activeSheet.setValue(5, 2, '2011/2/1');
activeSheet.setValue(6, 2, '2011/2/3');
activeSheet.setValue(7, 2, '2011/3/6');
activeSheet.setValue(8, 2, '2011/2/19');

var data = new GC.Spread.Sheets.Range(1, 0, 8, 1);
var dateAxis = new GC.Spread.Sheets.Range(1, 2, 8, 1);

var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;

setting.options.seriesColor = "Text 2 1";
setting.options.firstMarkerColor = "Text 2 3";
setting.options.negativeColor = "Accent 2 1";
setting.options.markersColor = "Accent 3 1";
setting.options.lowMarkerColor = "Accent 4 1";
setting.options.highMarkerColor = "Accent 6 1";
setting.options.lastMarkerColor = "Accent 6 6";
setting.options.axisColor = "Text 1 1";
activeSheet.addSpan(11, 0, 1, 3, null)
activeSheet.setText(11, 0, "Sparkline with dateAxis:", null);
activeSheet.setText(12, 0, "(1) Line", null);
activeSheet.setText(12, 3, "(2)Column", null);
activeSheet.setText(12, 6, "(3)Winloss", null);

//line
activeSheet.addSpan(14, 0, 4, 3, null);
activeSheet.setSparkline(14, 0, data
               , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
               , GC.Spread.Sheets.Sparklines.SparklineType.line
               , setting
               , dateAxis
               , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
           );
//column
activeSheet.addSpan(14, 3, 4, 3, null);
activeSheet.setSparkline(14, 3, data
               , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
               , GC.Spread.Sheets.Sparklines.SparklineType.column
               , setting
               , dateAxis
               , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
           );

//winloss
activeSheet.addSpan(14, 6, 4, 3, null);
activeSheet.setSparkline(14, 6, data
               , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
               , GC.Spread.Sheets.Sparklines.SparklineType.winloss
               , setting
               , dateAxis
               , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
           );

See Also