Step Chart control

The Step Chart displays data in a chart on a coach with the option to add drill down trees for presenting additional data sets. The Step Chart must be populated by using a service flow with Ajax access.

Configuration properties

Set or modify configuration properties for the control, such as appearance and behavior properties, in the Configuration properties tab.

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, 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 control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Step Chart control are shown in the following table:

Table 1. Appearance configuration properties for the Step Chart control
Appearance configuration property	Description	Data type
Show area below steps	The area beneath the step chart is filled (similar to the rendering of the Area Chart control).	`Boolean`
Background color style	The color style for the background color.	`String`
Data series color style	The color style for the data series.	`String`
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`
XY axis color style	The color style for the X and Y axes.	`String`
Gridlines style	The style for the horizontal gridlines.	`String`
X label rotation	The rotation in degrees for the X-axis label.	`Decimal`
Border radius	The radius of the chart.	`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 Step Chart control are shown in the following table:

Table 2. Behavior configuration properties for the Step Chart control
Behavior configuration property	Description	Data type
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`
Data service	A service that populates the data series.	`Ajax service`
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`.
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 maximum number of ticks on the Y axis.	`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`
Max X tick count	The maximum number of ticks on the X axis.	`Integer`
Show tooltip	When this option is enabled, hovering over data points in the chart with the mouse causes a tooltip to appear. The tooltip shows both the name of the point and its value.	`Boolean`

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events.

The Step Chart control 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)

Methods

For detailed information about the available methods for the Step Chart control, see the JavaScript documentation.

Additional resources

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