This topic provides an overview of the igSparkline™ control, its benefits, and the supported chart types.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
The following table summarizes the supported igSparkline
chart types.
Type  Description 

Line  Displays the Line chart type of Sparkline with numeric data, connecting the data points with line segments. You need to provide at least 2 data points in order to visualize the data in Sparkline. 
Area  Displays the Area chart type of Sparkline with numeric data. This is similar to line type with additional step of closing the area after each line is drawn. You need to provide at least two data points in order to visualize the data in Sparkline. 
Column  Displays the Column chart type of Sparkline with numeric data. Some may refer to this as vertical bars. This type can render a single data point, but requires specifying the minimum value range option (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible. 
WinLoss  This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or a loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. 
The following table summarizes the main features of the igSparkline
control. Explaining the features in further detail in the text blocks following the table.
Feature  Description  

Markers  Markers are symbols overlaid on the Sparkline indicating individual data points based on X/Y coordinates.  
Trend Line  Trend lines are lines drawn from the starting point to the end point indicating the trending direction and movement of the series, so that the viewer can evaluate the tendencies in the data and mentally extrapolate past, future, or unknown values.  
Normal Range  The Normal range is a horizontal stripe representing some predefined meaningful range when visualizing the data.  
Interpolating Unknown Values 
igSparkline can detect unknown values (null or double.NaN) and render the space for the unknown values using a specified interpolation algorithm.


Axes 
igSparkline allows displaying the X and Y axes (both or only one of them) with corresponding labels.


Tooltip 
igSparkline can display a tooltip when the mouse is hovered over the Sparkline.

Markers are symbols overlaid on a single data point denoting the precise location of the individually plotted data points on the chart using their cartesian X/Y coordinates.
Specifies the Markers in igSparkline
to identify the data points based on the data and/or the location of the data points.
The following table displays the supported Marker types.
Marker type  Description  

All data points  Displays markers on all data points.  
First and last data points  Displays 2 markers – on the first and on the last data point.  
Top and bottom data points  Displays 2 markers– on the highest and on the lowest data point.  
Negative data points  Displays markers on the negative data points. If there is more than one negative data point, all of them will be marked. 
Trend lines are lines drawn from the starting point to the end point indicating the trending direction and movement of the series so that the viewer can evaluate the tendencies in the data and mentally extrapolate past, future, or unknown values.
The Trend Line feature enables you to choose among several formulas for generating a trending directional line. Specify the formula to use in the trendLineType
option. The Trend Line renders in front of the series data, so it is always visible.
The following table displays the supported trend line types. Drawing each trend line type based on the calculation formula of its type.
Trend Line type  Description 
trendLineType option setting



Simple Average  Simple Average is a set of numbers, each of which is the average of a corresponding subset of data points. Also known as Simple Moving Average 
simpleAverage


Modified Average  Modified Average shows the moving average value over a set period. Used to emphasize the direction of the trend and smooth out the fluctuation. 
modifiedAverage


Exponential Average  Exponential Average, similar to simple average with an added weight factor. This type of average reacts faster to recent trend changes. 
exponentialAverage


Cumulative Average  Cumulative Average is an ordered data points with calculated average of all data up to the current point. 
cumulativeAverage


Weighted Average  Weighted Average is any average that has multiplying factor to give weight to data at different positions. 
weightedAverage


Cubic Fit  Uses polynomial mathematical functions to specify a cubic fit trend line on a series. 
cubicFit


Exponential Fit  Uses exponential mathematical functions to specify an exponential fit trend line on a series. 
exponentialFit


Line Fit  The bestfitting straight trend line. 
lineFit


Logarithmic Fit  The bestfitting curved line. Used when the rate of change in the data increases or decreases quickly and then levels out. This type of trend line is most useful with sufficient data. 
logarithmicFit


Power Low Fit  Power Low trend line is a curved line that uses power function to draw a line. It is best to avoid zero (0) point as it is not valid for power function. Sparkline will not produce any errors, it will plot the zero (0) point, but from the power trend line prospective, the result will not be accurate. Power trend line uses data sets that compare measurements that increase at a specific rate. 
powerLowFit


Quadratic Fit  Uses the quadratic equation to derive a trend line showing the overall effect of the high and low data points with the accuracy of a linear curve. 
quadraticFit


Quartic Fit  Uses quartic polynomials to specify a series trend line. 
quarticFit


Quintic Fit  Uses quintic polynomials to specify a series trend line. 
quinticFit

The Normal Range is a horizontal stripe drawn to represent some predefined meaningful range when visualizing the data.
The typical use of the Normal Range is to indicate what values are considered normal or good. For example, if the Sparkline represented the person’s heart rate over time, the normal range of 60100 beats per minute would be the range to be highlighted as Normal, making the outlying data points easy to identify.
The normalRangeMinimum
and normalRangeMaximum
options determine the range width and position.
The igSparkline
can detect unknown values and render the space for the unknown values using a specified interpolation algorithm.
If there are missing values in the data (typical “unknown” values found in data are null and NaN), igSparkline
can render in the space with unknown values by linear interpolation. The following table demonstrates the difference in a Sparkline plotted from the same data set (containing missing values) with or without using Unknown Values Plotting.
Plotting of unknown values applied?  Preview 

No  
Yes 
Manage this feature through the unknownValuePlotting
option. The allowed values are dontPlot
and linearInterpolate
.
The following Sparkline types support Unknown Values Plotting:
The Column and Win/Loss types do not interpolate unknown values. These Sparkline types will always display a blank space where unknown values are present.
The Sparkline allows displaying 1 or both the X and Y axes with corresponding labels.
Enabling the X and Yaxis (not shown by default) the Sparkline will decrease its size to make up space for the axis and the labels. If it resides in a grid cell, it may require adjusting the size of the cell.
The following aspects of the igSparkline
control axes are customizable:
Allows you to manage the visibility of the X and Yaxis individually, using their respective horizontalAxisVisibility
and verticalAxisVisibility
options, making it possible to display either one or both axes.
You can add descriptive labels to the Xaxis. The labelMemberPath
option manages these options.
The igSparkline
can display a tooltip when the mouse hovers over the Sparkline. By its very design, the tooltip displays the high, low, first, and last data points.
The toolTip option manages the Tooltips.
The tooltips of the igSparkline
can be customized in the following aspects:
The following topic provides additional information related to this topic.
igSparkline
control.The following samples provide additional information related to this topic.
Tooltips and Markers: This sample shows an example of enabling tooltips and markers in the igSparkline
.
Normal Range and Trend Lines: This sample shows the normal range and trend line functionality.
View on GitHub