[]
        
(Showing Draft Content)

Sparklines

A sparkline is a small chart that can be applied to quickly visualize data and transform it into a compact form in a cell. It uses data from a range of cells to help you easily analyze data at the cell level.


You can set the sparkline type to column, line, or winloss by using setSparkline method or use type-specific formulas to create different sparklines available in SpreadJS.


You can also implement your logic to define a custom sparkline formula with provided dataset and settings; add that custom sparkline using the addSparklineEx method.

Note: Sparklines created using formulas cannot be exported to an Excel file.

The image below shows the Vbar sparkline in action. It shows the trends in the temperature levels across a year in different cities and helps to quickly understand the high and low data points.



Types of Sparklines

You can use the following sparkline types in your spreadsheet. Click on the images to visit the corresponding topics.

Types of Sparklines

**columnsparkline.png

Column Sparkline

linesparkline.png

Line Sparkline

winlosssparkline.png

Winloss Sparkline

sparkarea.png

Area Sparkline

sparkpie.pngPie Sparkline

sparkscatter.png

Scatter Sparkline

bullet-sparkline.png

Bullet Sparkline

sparkspread.png

Spread Sparkline

sparkstacked.png

Stacked Sparkline

hbar-sparkline.png

Hbar Sparkline

vbar-sparkline.png

Vbar Sparkline

sparkboxplot.png

Box Plot Sparkline

sparkvari.png

Vari Sparkline

sparkcascade.png

Cascade Sparkline

sparkmonth.png

Month Sparkline

sparkyear.png

Year Sparkline

pareto-sparkline.png

Pareto Sparkline

rangeblock-spark.png

RangeBlock Sparkline

histogram-spark.png

Histogram Sparkline

kpi-spark.png

Gauge KPI Sparkline

imagesparkline.png

Image Sparkline

Grouping Sparklines

You can group and ungroup sparklines by using groupSparkline and ungroupSparkline methods.


Grouping enables you to apply changes to several sparklines all at once and saves time in the process. Grouping also helps to easily compare sparklines by using the same type of sparkline and axis in a group.

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();

var s1=  sheet.setSparkline(13, 0, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.line
        , setting
        );
var s2 =sheet.setSparkline(13, 3, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.column
        , setting
        );
var s3=  sheet.setSparkline(13, 6, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.winloss
        , setting
        );

// group sparklines
var group = sheet.groupSparkline([s1,s2,s3]);

group.sparklineType = GC.Spread.Sheets.Sparklines.SparklineType.column;

// ungroup sparklines
sheet.ungroupSparkline(group);