SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Sparklines / Column, Line, and Winloss Sparklines Using Methods
In This Topic
    Column, Line, and Winloss Sparklines Using Methods
    In This Topic

    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