The Area Chart displays data in a chart on a Coach with the option to add drill down trees for presenting additional data sets.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
The Area Chart must be populated through an AJAX service.
Data Service Data service that populates the Data Series
Enable Menu Visibility of the menu for drill-down tree
Number of Y Axis Ticks Number of horizontal lines across graph from Y axis
Y Axis Tick Precision Number of decimal places for data points
Max Y Axis Value Max Y value
Use X Axis Culling When selected only shows the number of X axis data tick counts determined by Max X Tick Count
Max X Tick Count Max data points shown on X axis
Show Tooltip Visibility of the tooltip; When hovered over the chart; the data points (tooltips) display
Smooth Area Graph line is smooth versus jagged in appearance
Background Color Style
Data Series Color Style
Show Value Labels The visibility of the value labels
Show Breadcrumbs When enabled, the title shows the current position of the drill-down tree (depending on menu selection)
Point Size Size of the dot marking the value - 2.5 is the default
XY Axis Color None, Light - Labels Only, Dark - Labels Only, Light, Dark
Gridlines Style None, Light, Dark
X Label Rotation X axis label rotation (in degrees)
Border Radius Roundness of graph
Padding top, right, bottom, left (in px); e.g. 10px 20px 10px 20px
Height Value in px, em, or %
These are the configuration option settings...
This is the result ...
With the Area Chart, there are 4 types of event handlers:
- On Load When the page loads
- On Refreshed When the Chart is refreshed
- On Click When the Chart is clicked
- On Menu Action When there is a menu action
For detailed information on the available methods for this control, access the JS Doc file.
- Author: Courtney Silva
- Date Created: June 9, 2015
- Date Modified: August 31, 2015