Multi Purpose Chart

The Multi Purpose 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 Multi Purpose Chart must be populated through an AJAX service.

The Multi Purpose chart is unique in that you have a lot of choices in the type of chart you want displayed, either single data series alone, or overlaid with a multi data series.


Single Data Service Data service that populates the Data Series

Multi Data Service Multiple data service that populates the Data Series

Show Multi-Data Series When selected show the Multi Data Service

Default Chart Type Bar, Line, Area, Spline, Area Spline, Step, Area Step, Pie, Doughnut

Enable Menu Note: You cannot use Menu for the Multi Purpose Chart

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


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

Legend Placement None, Bottom-Center, Middle-Right

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 ...

Note: When hovered over chart; the data points (tooltips) display


With the Multi Purpose 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

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.

Related Article(s)

How To Create a Drilldown Tree for Charts


  • Author: Courtney Silva
  • Date Created: June 16, 2015
  • Date Modified: August 31, 2015
Was this article helpful?
0 out of 0 found this helpful