Follow

Donut Chart

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

Behavior

Data Service Data service that populates the Data Series

Enable Menu Visibility of the menu for drill-down tree

Show Tooltip Visibility of the tooltip; When hovered over the chart; the data points (tooltips) display

Appearance

Background Color Style

Show Breadcrumbs When enabled, the title shows the current position of the drill-down tree (depending on menu selection)

Legend Placement None, Bottom-Center, Middle-Right

Border Radius Roundness of background color style

Padding top, right, bottom, left (in px); e.g. 10px 20px 10px 20px

Height Value in px, em, or %

Example

These are the configuration option settings...

This is the result ...

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

Events

With the Donut 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.

Methods

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 12, 2015
  • Date Modified: August 31, 2015
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments