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 GcSpread.Sheets.Range(1, 0, 8, 1); var dateAxis = new GcSpread.Sheets.Range(1, 2, 8, 1); activeSheet.addSpan(11, 0, 1, 3, null) activeSheet.setText(11, 0, "Sparkline without dateAxis:", GcSpread.Sheets.SheetArea.viewport); activeSheet.setText(12, 0, "(1) Line", null); activeSheet.setText(12, 3, "(2)Column", null); activeSheet.setText(12, 6, "(3)Winloss", null); var setting = new GcSpread.Sheets.SparklineSetting(); setting.showMarkers(true); setting.lineWeight = 3; setting.displayXAxis = true; setting.showFirst(true); setting.showLast(true); setting.showLow(true); setting.showHigh(true); setting.showNegative(true); setting.seriesColor('Text 2 1'); setting.firstMarkerColor('Text 2 3'); setting.negativeColor('Accent 2 1'); setting.markersColor('Accent 3 1'); setting.lowMarkerColor('Accent 4 1'); setting.highMarkerColor('Accent 6 1'); setting.lastMarkerColor('Accent 6 6'); setting.axisColor('Text 1 1'); //line activeSheet.addSpan(13, 0, 4, 3, null); activeSheet.setSparkline(13, 0, data , GcSpread.Sheets.DataOrientation.Vertical , GcSpread.Sheets.SparklineType.line , setting ); //column activeSheet.addSpan(13, 3, 4, 3, null); activeSheet.setSparkline(13, 3, data , GcSpread.Sheets.DataOrientation.Vertical , GcSpread.Sheets.SparklineType.column , setting ); //winloss activeSheet.addSpan(13, 6, 4, 3, null); activeSheet.setSparkline(13, 6, data , GcSpread.Sheets.DataOrientation.Vertical , GcSpread.Sheets.SparklineType.winloss , setting );

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 GcSpread.Sheets.Range(1, 0, 8, 1);
var dateAxis = new GcSpread.Sheets.Range(1, 2, 8, 1);

activeSheet.addSpan(11, 0, 1, 3, null)
activeSheet.setText(11, 0, "Sparkline without dateAxis:", GcSpread.Sheets.SheetArea.viewport);
activeSheet.setText(12, 0, "(1) Line", null);
activeSheet.setText(12, 3, "(2)Column", null);
activeSheet.setText(12, 6, "(3)Winloss", null);

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

setting.seriesColor('Text 2 1');
setting.firstMarkerColor('Text 2 3');
setting.negativeColor('Accent 2 1');
setting.markersColor('Accent 3 1');
setting.lowMarkerColor('Accent 4 1');
setting.highMarkerColor('Accent 6 1');
setting.lastMarkerColor('Accent 6 6');
setting.axisColor('Text 1 1');
//line
activeSheet.addSpan(13, 0, 4, 3, null);
activeSheet.setSparkline(13, 0, data
    , GcSpread.Sheets.DataOrientation.Vertical
    , GcSpread.Sheets.SparklineType.line
    , setting
);
//column
activeSheet.addSpan(13, 3, 4, 3, null);

activeSheet.setSparkline(13, 3, data
    , GcSpread.Sheets.DataOrientation.Vertical
    , GcSpread.Sheets.SparklineType.column
    , setting
);
//winloss
activeSheet.addSpan(13, 6, 4, 3, null);

activeSheet.setSparkline(13, 6, data
    , GcSpread.Sheets.DataOrientation.Vertical
    , GcSpread.Sheets.SparklineType.winloss
    , setting
);