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