Sparklines

Overview

The Sparkline package includes 3 charts, a line, bar, and pie chart. All three are designed to be used inline in data grids, or as standalone charts.

To sustain high-level performance these charts are not skinned.

Creating the Sparkline Components

The bar, line, and pie sparkline charts extend the Group class, so they can be added to any parent that implements IVisualElementContainer.

Using the Sparkline Components

Line and bar charts display data points from the minY to the maxY values. Values that are not within the minY and maxY are not displayed. "minY" and "maxY" can be explicitly set, or will be calculated from the values in the dataProvider automatically if the "autoRange" property is true.

Pie charts display all the data in wedges proportional to each data node's percentage of the total weight of the series.

SparklineBar Bar Chart

Sparkline chart that uses bars (columns) to present the data.

The bars are drawn starting at the axis, up or down depending on whether the value they represent is less than or greater than the axis value. Thus, even if the axis is not shown, its calculated value is still important.

For bar charts, data in the dataProvider are presented left to right according to each data value's position in the dataProvider. If it is important to vary the x position for data, use the SparklineLine class.

SparklineLine Line Chart

Sparkline chart that uses a line (stroke) to present the data.

See the "form" property to change the type of stroke that is drawn.

The "xField" can be specified to display the data at specified positions along the x-axis. Positioning is relative, meaning that the data's x value is not the explicit x position on the curve. Rather, it is the x position relative to the minimum and maximum x values of all of the data points.

If you define an "xField", all data points must have a defined "xField" value.

If the "xField" is null, the points will be positioned according to their indices in the dataProvider, just like for the bar chart.

SparklinePie Pie Chart

Sparkline chart that uses a pie chart to present the data.

Use the "seriesField" property to provide the chart with the node values or weights. If the "seriesField" property is null, the chart will assume that the dataProvider is flat numerical data.

DataProvider

All three charts expect an IList dataProvider. Data can either be a flat numerical array, or objects with the x and y values specified by the "xField" and "yField" properties for bar and line charts.

DataTip

If the "showDataTip" property is true, then a datatip will display when the user hovers over data points or columns. For the bar chart, the mouse must hover over a column, and for the line chart, the user must hover within the marker circle or within 5 pixels of the data point, whichever is greater.

Specify a custom tip via the "dataTipField" on the data or via a callback function via the "dataTipFunction" property. Also, tooltips can be passed TextFlow objects for a highly customized appearance.

The dataTip will persist for a time set by the "dataTipHideDelay" after users mouse out of data nodes.

Axis (line and bar only)

The axis is a optional horizontal line to provide a visual cue as to the median value or some threshold for the data. If "autoAxis" is true, the axis will be drawn along the median of the displayed range.

For the bar sparkline, it also specifies how columns are drawn. They are drawn below the axis if the column's value is less than the axis value, or above the axis if the bar's value is greater than the axis.

Normal Range (line and bar only)

The normal range is an optional drawn rectangle that can be used to indicate to the viewer if a data point is within the normal range of values.

Sparkline as a GridRenderer

To add the sparklines inline within a data grid, simply wrap them in a Spark GridRenderer. For example:

<s:DataGrid dataProvider="{dp}">   
  <s:columns>
    <s:ArrayList>
      <s:GridColumn width="100" headerText="Sparkline Bar">
        <s:itemRenderer>
          <fx:Component>
            <s:GridItemRenderer> 
              <sparklines:SparklineBar top="2" right="2" bottom="2" left="2"
				       height="45"
				       dataProvider="{data.chart}"/>
            </s:GridItemRenderer>
          </fx:Component>
        <s/:itemRenderer>
      </s:GridColumn width="100" headerText="Sparkline Bar">
    </s:ArrayList>
  </s:columns>
</s:DataGrid dataProvider="{dp}"> 

Default Property

A dataProvider that implements IList is the default property.

Selected Custom Styles

See the ASDocs for the SparklineBase, SparklineBar, SparklineLine, and SparklinePie classes. The number of styles is very numerous.

Example

See the Sparklines demo application for example code.

Back To Top