This topic provides an overview of the various ways to configure the igSparkline™ control and links to the related API members.
The following topics are prerequisites to understanding this topic:
igSparkline Overview: This topic provides conceptual information about the igSparkline control including its main features.
Adding igSparkline to an HTML Document: This topic explains how to add the igSparkline to an HTML page and bind to a JavaScript array.
Adding igSparkline to an ASP.NET MVC View: This topic walks through how to instantiate an igSparkline in an ASP.NET MVC view and bind to a .NET collection of objects.
The following table lists the configurable aspects of the igSparkline control.
| Configurable aspects | Details | Properties |
|---|---|---|
| Defining the Sparkline Type | Specifies the type of Sparkline: Line, Area, Column or WinLoss. | displayType |
| Defining a Normal Range | Defines a shaded area across the chart (horizontally). | normalRangeVisibility |
| Configuring the Normal Range | Configures the various normal range aspects: top and bottom border, and color. | normalRangeMinimum normalRangeMaximum normalRangeFill |
| Defining Markers | Defines markers to display on the following chart types: Line, Area and Column. | markerVisibility highMarkerVisibility lowMarkerVisibility firstMarkerVisibility lastMarkerVisibility negativeMarkerVisibility |
| Configuring the Markers | Configures the various marker aspects: brush size and color. | markerSize markerBrush |
| Adding a Trend Line | Specifies the type of trend line to place over the chart. | trendLineType |
| Configuring the Trend Line | Configures the various trend line aspects: trend line brush, period, and type, and line thickness. | trendLineBrush trendLinePeriod trendLineType trendLineThickness |
| Interpolating Unknown Values | Identifies an unknown value (null or NaN) and allows you to interpolate or view it as a blank point. | unknownValuePlotting |
| Configuring the Tooltip | Enables a tooltip and displays the supplied HTML template with support for the following keys: Low, High, First, Last | toolTipTemplate |
The following topics provide additional information related to this topic.
igSparkline Visual Elements: This topic provides an overview and images explaining the visual elements of the igSparkline.
jQuery and MVC API Links (igSparkline): This topic provides links to the API documentation for the jQuery and its ASP.NET MVC helper class for the igSparkline control.
The following samples provide additional information related to this topic.
Normal Range and Trend Lines: Sample demonstrating the normal range and trend line features.
Tooltips and Markers: Sample demonstrating the tooltip and marker features.
View on GitHub