SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Sparklines / Spread Sparkline
In This Topic
    Spread Sparkline
    In This Topic

    You can create a Spread sparkline using the SpreadSparkline formula and cell values.

    Spread sparkline

    The Spread sparkline formula has the following options:

    Option Description
    Points A reference that represents a range of cells that contains the values, such as "A1:A10".
    ShowAverage A boolean that represents whether to show the average. This setting is optional. The default value is false.
    ScaleStart A number that represents the minimum boundary of the sparkline. This setting is optional. The default value is the minimum of all values.
    ScaleEnd A number that represents the maximum boundary of the sparkline. This setting is optional. The default value is the maximum of all values.
    Style A number that references the style of the Spread sparkline. This setting is optional. The default value is 4 (poles).
    ColorScheme A string that represents the color of the sparkline. This setting is optional. The default value is "#646464".
    Vertical A boolean that represents whether to display the sparkline vertically. This setting is optional. The default value is false.

    When the sparkline is horizontal, the horizontal axis represents each point. The length of lines or the number of dots in the vertical axis represents the frequency of occurrence.

    Six styles are supported:

    The Spread sparkline formula has the following format:

    =SPREADSPARKLINE(points, showAverage?, scaleStart?, scaleEnd?, style?, colorScheme?, vertical?)

    Using Code

    The following code creates a Spread sparkline.

    JavaScript
    Copy Code
    activeSheet.addSpan(0, 0, 1, 3);
    activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Employee Age Statistics").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
    var table1 = activeSheet.tables.add("table1", 1, 0, 49, 3, GC.Spread.Sheets.Tables.TableThemes.light12);
    table1.filterButtonVisible(false);
    activeSheet.setValue(1, 0, "Name");
    activeSheet.setValue(1, 1, "Age");
    activeSheet.setValue(1, 2, "Diagram");
      for(var i = 2;i < 20; i++) {
      activeSheet.setValue(i, 0, "Employee " + (i - 1));
      }
    activeSheet.setValue(2, 1, 18);
    activeSheet.setValue(3, 1, 20);
    activeSheet.setValue(4, 1, 21);
    activeSheet.setValue(5, 1, 22);
    activeSheet.setValue(6, 1, 23);
    activeSheet.setValue(7, 1, 22);
    activeSheet.setValue(8, 1, 24);
    activeSheet.setValue(9, 1, 24);
    activeSheet.setValue(10, 1, 30);
    activeSheet.setValue(11, 1, 33);
    activeSheet.setValue(12, 1, 33);
    activeSheet.setValue(13, 1, 40);
    activeSheet.setValue(14, 1, 44);
    activeSheet.setValue(15, 1, 45);
    activeSheet.setValue(16, 1, 45);
    activeSheet.setValue(17, 1, 46);
    activeSheet.setValue(18, 1, 50);
    activeSheet.setValue(19, 1, 55);
    activeSheet.addSpan(2, 2, 10, 1);
    activeSheet.setFormula(2, 2, '=SPREADSPARKLINE(B3:B20,TRUE,,,4,"green")');
    activeSheet.setRowHeight(0, 30);
    activeSheet.setColumnWidth(0, 100);
    activeSheet.setColumnWidth(1, 100);
    activeSheet.setColumnWidth(2, 400);
    
    See Also