Edge Documentation

{{DISPLAYTITLE:Sparkline Renderer}}
[[Image:SparklineExample.png|thumb|center|500px|Using Sparklines To Show 
Historical Trend]]


The Sparkline column renderer is a special option for presenting data in the column of a Basic Table Widget.  It is available in AppBoard versions 2.4 and higher.


A Sparkline is a very small line chart, without axes or coordinates, that presents the general shape of variation in some measurement, such as temperature or stock market price, in a simple and highly condensed way.  Using alternate methods, such as Actions to drill-down and provide details, or to update an on-screen Widget, may not provide the immediate context and ability to compare items within a table that can be achieved with a Sparkline.


The Sparkline option is only applicable for columns that have a one-to-many association where the “many” association represents the data points used in the sparkline.


== How To Create a Sparkline ==

Perform the following steps to create a Sparkline column in a Table Widget:

# Log in to AppBoard as administrator.
# Create a [[appboard/2.4/builder/table_widget|Table Widget]].
# Add one or more columns of data to the Widget.
# For a desired <b>Data Field</b>, select <b>Sparkline</b> as the Column Renderer.
# Click <b>Customize</b> to configure the Sparkline:
#* <b>Header Text</b> - The name to be displayed for the column.
#* <b>Column Width</b> - The default width for the display of the column in the table.
#* <b>Resizable</b> - Check the box if you want the User to be permitted to change the width of the column.
#* <b>X Axis Field</b> - Select the desired data field to use for the X-Axis of the Chart.  For more details, see [[Area_Chart_Widget|Area Chart Widget]].
#* <b>X Axis Type</b> - Select an option for Type from the drop-down box. This will be used to determine how the data is translated by AppBoard into the labels that are shown along the x-axis.  For more details, see [[Area_Chart_Widget|Area Chart Widget]].
#* <b>Y Axis Field</b> - Select the desired data field to use for determining the height for that series.  For more details, see [[Area_Chart_Widget|Area Chart Widget]].
#* <b>Minimum Value</b> - Select the lowest Y Axis value to display, for purposes of controlling which portion of the results to display.
#* <b>Maximum Value</b> - Select the highest Y Axis value to display, for purposes of controlling which portion of the results to display.
#* <b>Chart Type</b> - Select "Area" for an area-based Sparkline or "Line" for a line-based Sparkline.  This controls whether there is shading of the region beneath the displayed values.  The "Area" option will include shading.
#* <b>Chart Color Rules</b> - Configure conditions that modify the color of the Sparklines, based on evaluation of fields in the underlying data.

== Sample Data ==

Perform the following steps to create a Sparkline column in a Table Widget using sample data:

# Create a Data Source called sparkline, using the CSV data directory in /pkg/appboard/tutorial/sparkline
# Add the following association on the <b>Associate</b> panel of the Data Source Wizard:
#* sparkline.sparkline_services.Service - EQUALS - sparkline.sparkline_svc_history.Service
#* <b>Name</b>: "history"
#* <b>Type</b>: "One To Many"
#* <b>Publish</b>: "Always"
# Create a Basic Table Widget and place it on a Stack.
# Select "sparkline.sparkline_services" as the <b>Data Collection</b> for the Widget.
# Configure the following columns for the Basic Table Widget:
#* Service: Status Shape
#* Service: Text
#* Availability: Text
#* history: Sparkline
# Click <b>Customize</b> and configure the Sparkline as follows:
#* <b>Header Text</b> - Service History
#* <b>Column Width</b> - 150
#* <b>X Axis Field</b> - Datetime
#* <b>X Axis Type</b> - DateTimeAxis
#* <b>Y Axis Field</b> - Availability
#* <b>Minimum Value</b> - 0
#* <b>Maximum Value</b> - 100
#* <b>Chart Type</b> - Area
#* <b>Chart Color Rules</b> - [None]
#* <b>Default Chart Color</b> - Select a color.
#* [optional] Add a <b>Chart Color Rule</b> that is red when Availability <= 90 and green when Availability > 90. 
# Click <b>Save Changes</b>, <b>Next</b>, and <b>Finish</b>.
# Observe that the Table Widget in the builder display has a Sparkline Column labeled "Service History".


<!--== Known Issues ==-->


<!--# If you set the Renderer for a Data Field to "Sparkline", and then change it back to "Text", the data field now shows blank but the preview (and if you save the config) will actually be showing the association data.-->