Markers and Points

You can show markers or points in the column, line, or winloss sparkline graphs. You can specify different colors for low or negative, high, first, and last points.

The high point is the point for the largest value. The low point is the smallest value. The negative point represents negative values. The first point is the first point that is drawn on the graph. The last point is the last point that is drawn on the graph.

The options.markersColor property only applies to the line sparkline type when adding the sparkline using a method. The line, column, and winloss formulas have options for specifying markers.

Using Code

This example adds sparklines and specifies colors for the markers.

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 );

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
         );