Multi purpose chart

Edit online

Generates a multi purpose chart (single data or multi data series) for a data set, with the option to add drill-down trees for additional data sets. You must populate the data set by using a service.

Restriction

Multi purpose chart must be populated by using a service.

Note: If you encounter sizing problems when you display the chart in a collapsible panel, use the following code on the On expand event of the collapsible panel to adjust the chart size to the available space: ${CHART_CONTROL_ID}.refresh();

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

The appearance configuration properties for the Multi purpose chart view are shown in the following table:

Table 1. Appearance configuration properties for Multi purpose chart
Appearance configuration property	Description	Data type
Background color style	The color style for the background color.	`String`
Data series color style	The color style for the data series.	`String`
Data series custom color style	Customize the color style for the data series. In the `NameValuePair`, if the selected chart type is Bar, Area, Line or Step, `Name` is the series name. If the selected chart is Donut or Pie, `Name` is the datapoint label. `Value` is the color specified as name, hexadecimal code, or RGB code. For example, `red`, `#ff0000`, `rgb(255, 0, 0)`. The property takes precedence over Data series color style.	`NameValuePair (List)`
Show value labels	Display data point values above each point in the chart.	`Boolean`
Show breadcrumbs	When this option is enabled, the title shows the current position of the tree that the user can drill down into (depending on the menu selection).	`Boolean`
Point size	The size of the dot that marks the value. Default: 2.5 pixels.	`Decimal`
XY Axis color style	The color style for the X and Y axes.	`String`
Gridlines style	The style for the horizontal gridlines.	`String`
Legend placement	The position of the legend for the chart.	`String`
X label rotation	The rotation in degrees for the X-axis label.	`Decimal`
X axis height	The height of the X axis.	`Integer`
Border radius	The radius of the chart. You can set this property for pie and donut charts.	`String`
Padding	The padding for the right, top, left, and bottom of the chart (in pixels).	`String`
Height	The height of the chart.	`Integer`

The behavior configuration properties for the Multi purpose chart view are shown in the following table:

Table 2. Behavior configuration properties for Multi purpose chart
Behavior configuration property	Description	Data type
Single data service	A service that populates the data series.	`Ajax service`
Single data series	The `seriesName` is the name for the data series and `dataPoints` is the list of data points to include in the data series.	`String` for the `seriesName` and `DataPoint[]` for the list of `dataPoints`.
Multi data service	A multi-data series service that populates the chart data.	`Ajax service`
Multi data series	A multi-data series to populate the chart. The `seriesName` is the name for the data series and `dataPoints` is the list of data points to include in the data series.	`String` for the `seriesName` and `DataPoint[]` for the list of `dataPoints`.
Show multi-data series	Overlay multiple data series.	`Boolean`
Chart data mode	Select whether to populate chart data from a service or from the configuration option. Note that trees users can drill down into are available only by populating through a service flow with appropriate Ajax access.	`String`
Enable menu	Enables the visibility of the menu. The menu is required if you have a tree that users can drill down into, or if you added menus.	`Boolean`
Number of Y axis ticks	The number of ticks on the Y axis. The value that you specify is not interpreted as an exact number but is adjusted to the best suitable tick count to provide optimal display.	`Integer`
Y axis tick precision	The number of decimal places to display for Y-axis value labels. The default number of decimal places is 0.	`Integer`
Min Y axis value	The minimum value on the Y axis.	`Decimal`
Max Y axis value	The maximum value on the Y axis.	`Decimal`
Use X axis culling	Show only the number of X-axis data tick counts, which is determined by the value of the Max X tick count property.	`Boolean`
Number of X axis ticks	The number of ticks on the X axis. The value that you specify is not interpreted as an exact number but is adjusted to the best suitable tick count to provide optimal display.	`Integer`
Tooltip style	Display tooltips.	`String`

For information on drill-down trees that you can use with your charts, see Drill-down trees.

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events. The Multi purpose chart view has the following types of event handlers:

On load: Activated when the chart is loaded, for example,
```
me.defocusSeries("Brand1")
```
On refreshed: Activated when the chart is refreshed, for example,
```
me.focusSeries("Brand1")
```
On click: Activated when the chart is clicked, for example,
```
me.transform("donut", ["Brand1","Brand2"])
```

On menu action: Activated when a menu action is detected, for example,

console.log("Running menu action '" + action.name + "' on " + me.getSelectedDataPoint().label + " with value of " + me.getSelectedDataPoint().value)

Keyboard navigation

To navigate charts using the keyboard:

Press Tab until the chart that you want is highlighted.
Press Tab to get focus inside the chart.
Use the right, left, up or down arrow keys to navigate within the chart.
Note: To navigate the chart as described, you must use the JAWS screen reader.

Methods

For information about the methods for Multi purpose chart, see the Multi purpose chart JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.