MultiPurposeChart

Multi purpose chart

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.

Multi data series

Multi data service: Multi data series service to populate the chart data

Multi data series: Multi data series to populate the chart. DataSeries[]

Show multi data series: When enabled, the chart displays multiple data series concurrently. Otherwise, chart behaves as, and uses single data series Boolean

Single Data Series

Single data service: Data service that populates the DataSeries.

Single data series: Single data series to populate chart DataSeries

Appearance

Background color style: The background style of the chart
{Transparent | Primary | Info | Success | Warning | Danger} ChartBackgroundColorStyle

Data series color style: Data series color style.
{Default | Primary | Info | Success | Warning | Danger} ChartDataSeriesColorStyle

Data series custom color style: Data series custom color style. NameValuePair[]

Show value labels: When enabled, data point values will be displayed above each point Boolean

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

Point size: Size of the dot marking the value - 2.5 is the default Decimal

XY axis color style: XY axis color style
{None | Light - Labels Only | Dark - Labels Only | Light | Dark} ChartXYAxisStyle

Gridlines style: The style of horizontal gridlines.
{None | Light | Dark} ChartGridLinesStyle

Legend placement: The position of the legend.
{None | Bottom-Center | Middle-Right} ChartLegendPlacement

X label rotation: X axis label rotation (in degrees) Decimal

X axis height: X axis height (as integer) Integer

Border radius: Radius to use when chart is set as pie or donut styles String

Padding: Padding for right, top, left, bottom (in px) String

Height: The height of the chart Integer

Behavior

Chart data mode: The method to populate chart data, from a service or from the config option. To populate drill down trees, you must use a service.
{From Service | From Config Option} ChartDataMode

Default chart type: What type of chart should be displayed on load
{Bar | Line | Area | Spline | Area Spline | Step | Area Step | Pie | Donut} ChartKind

Enable menu: Visibility of the menu. Necessary if you have are using a drill-down tree, or if you have added menus. Boolean

Number of Y axis ticks: 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 values. The default is 0. Integer

Min Y axis value: Minimum Y axis value Decimal

Max Y axis value: Maximum Y axis value Decimal

Use X axis culling: X Axis culling Boolean

Number of X axis ticks: 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: Set whether or not to use tooltips, and if those tooltips should display data from entire groups of data points, or individual points within groups
{None | Grouped | Ungrouped} ChartTooltipStyle

Events

On Load:

Description:	This event is fired when the chart is loaded
Example:	`me.defocusSeries("Brand1")`

On Refreshed:

Description:	This event is fired when the chart is refreshed
Example:	`me.focusSeries("Brand1")`

On Click:

Description:	This event is fired when the chart is clicked
Example:	`me.transform("donut", ["Brand1","Brand2"])`

On Menu Action:

Description:	This event is fired when a menu action is detected
Example:	`console.log("Running menu action '" + action.name + "' on " + me.getSelectedDataPoint().label + " with value of " + me.getSelectedDataPoint().value)`

Context Variables	action {object}
Properties	name

Extends:

Methods:

Inherited addClass(name, [replaced])

Add or replace the CSS classes for this view.

Name Type Default Description

name {string} The CSS class names to add to the view. For multiple classes, use space to separate the class names.

replaced {string} The CSS class names to be replaced by the first argument. For multiple classes, use space to separate the class names.

Example

Button.addClass("green");

addHorizontalLine(value, label)

Adds a horizontal line to the chart. Note: this function is not applicable to Donut and Pie Charts.

Name Type Default Description

value {integer} the position of the y-value that you want to add the dashed horizontal line

label {string} the label of the line

addStaticMenuAction(action, menuItemLabel, [icon], [badgeText], [onClickFunction])

Adds an action to the chart's popup menu and optionally attaches logic to it

Name Type Default Description

action {String} An identifier for this action

menuItemLabel {String} The label of the menu item

icon {String} (Font Awesome) icon name for the menu item. See {@link http://fontawesome.io/icons Font Awesome} for a comprehensive list of icons. Refer to the knowledge center for the latest Font Awesome version.

badgeText {String} text/value to show in a badge next to the menu item

onClickFunction {function} a callback function to be invoked when the menu item is clicked. If omitted, the "on menu action" event will be called when the item is clicked

addTempMenuAction(action, menuItemLabel, [icon], [badgeText], [onClickFunction])

Adds an action to the chart's popup menu and optionally attaches logic to it. This method should ONLY be called from the On Click event of the chart - otherwise it will not be displayed in the menu

Name Type Default Description

action {String} An identifier for this action

menuItemLabel {String} The label of the menu item

badgeText {String} text/value to show in a badge next to the menu item

onClickFunction {function} a callback function to be invoked when the menu item is clicked. If omitted, the "on menu action" event will be called when the item is clicked

addVerticalLine(value, label)

Adds a vertical line to the chart. Note: this function is not applicable to Donut and Pie Charts.

Name Type Default Description

value {integer} the position of the x-value that you want to add the dashed vertical line

label {string} the label of the line

defocusSeries([seriesName])

Defocus the DataSeries in the chart

Name Type Default Description

seriesName {(string|string[])} the name(s) of the dataseries that you want to defocus. If no series is specified, all data in chart will be dimmed

drillUp()

Goes one step up in the Drill Down Tree hierarchy

focusSeries([seriesName])

Focus the DataSeries in the chart

Name Type Default Description

seriesName {(string|string[])} the name(s) of the dataseries that you want to focus. If no series is specified, all data in chart will be highlighted

getColorStyle() Returns: {string}

Get the color style for the background. NOTE: This always returns the color as set, to avoid ambiguity always set the color using "T"|"P"|"I"|"S"|"W"|"G"

getCurrentDimension() Returns: {string}

Get the current drilldown dimension (the current hierarchical level at the drill-down tree). Only functional if drill-down is enabled

getCurrentDimensionCriteria() Returns: {object}

Returns an object with a name/value pair that describes the current position of the drill-down tree; Only functional if drill-down is enabled.

Example

me.getCurrentDimensionCriteria(); //returns --> Object {name: "Type", value: "CLOTHING"}

getDataSeries() Returns: {DataSeries}

Get the current data series being used to populate the chart

getDataSeriesColorStyle() Returns: {string}

Returns color style currently set for data series

getDataSeriesCustomColorStyle() Returns: {object | array}

Returns color style currently set for data series

getDrillDownStack() Returns: {NameValuePair[]}

Get the stack/structure of the drill-down tree. Only functional if drill-down is enabled

getQueryData() Returns: {*}

Gets the input of the Data Series AJAX Service

getSelectedDataPoint() Returns: {object}

Returns the last selected data point in the chart

getType() Returns: {string}

Get descriptive string representing the type of control

groupSeries(whether, [seriesName])

Groups the DataSeries in the chart.

Name Type Default Description

whether {boolean} to group the series or not

seriesName {string[]} the name of the dataseries

Example

me.groupSeries(true, ["SeriesName 1", "SeriesName 2", "SeriesName 3"]); //SeriesName 1, SeriesName2, and SeriesName3 will stack together if it is a bar chart.

Inherited hide(collapseFlag)

Hide the view.

Name Type Default Description

collapseFlag {boolean} Set to true to collapse the view (equivalent to a view setting of "NONE")

Example

MyView.hide();

hideSeries([seriesName])

Hides the DataSeries in the chart

Name Type Default Description

seriesName {(string|string[])} the name(s) of the dataseries that you want to show. If no names are specified, all series in chart will be hidden

Inherited isBound() Returns: {boolean}

Indicate the bound status of the view.

Inherited isEnabled() Returns: {boolean}

Check whether the view is enabled.

Example

var enabled = MyView.isEnabled();

Inherited isLabelVisible() Returns: {boolean}

Check whether the view label is visible.

Example

var labelVisible = MyView.isLabelVisible();

Inherited isVisible() Returns: {boolean}

Check whether the view is visible.

Example

var visible = MyView.isVisible();

Inherited propagateUpValueChange(event) Returns: {boolean}

Propagate the value change of the view up through the parent views.

Name Type Default Description

event {Event} Value change event (usually an onchange event)

Example

MyView.propagateUp(event);

redrawChart()

Redraws the chart. This operation simply redraws the chart and does not refresh the current chart data. It is useful
to quickly redraw the chart when it is not displaying properly. It is quicker than doing a full refresh.

refresh()

Updates the chart by calling the AJAX service and using the Data Series data returned.

removeHorizontalLine([label])

Removes horizontal line with specified label. If no label is specified, all horizontal lines will be removed. Note: this function is not applicable to Donut and Pie Charts.

Name Type Default Description

label {string} Label for the line that is to be removed

removeMenuAction(actionId)

Removes an action from the chart's popup menu

Name Type Default Description

actionId {String} Identifier for the action to be removed

removeVerticalLine([label])

Removes vertical line with specified label. If no label is specified, all vertical lines will be removed. Note: this function is not applicable to Donut and Pie Charts.

Name Type Default Description

label {string} Label for the line that is to be removed

setDataSeriesColorStyle(style)

Set the color style for the charted data series. NOTE: to avoid ambiguity always set the color using "D"|"P"|"I"|"S"|"W"|"G". Note that the Default option is available instead of Light for Pie, Donut, and Multi Purpose charts. All other charts have the Light option, instead of Default

Name Type Default Description

style {string} "DEFAULT"|"DEF"|"D"=Default | "PRIMARY"|"PRI"|"P"=Primary | "LIGHT"|" L"=Light |INFO"|INF"|"I"=Info | "SUCCESS"|"S"=Success | "WARNING"|"WARN"|"W"=Warning | "DANGER"|ERROR|ERR"|"E"|"G"=Danger

setDataSeriesCustomColorStyle(style)

Set color for the charted data series.

Name Type Default Description

style {object | array} Specify a name value pair object for single data series and an array of name value pair for multi data series. The name property should specify the series-name or category name in the case of pie and donut charts. The value should specify the color by name, HEX code or RGB code.

Inherited setEnabled(enabled, required)

Enable or disable the view.

Name Type Default Description

enabled {boolean} Enabled/read-only flag (true to enable view, false to disable/make read-only)

required {boolean} Enable or disable the required field flag for the view.

Example

MyView.setEnabled(false); //Make MyView read-only

Inherited setLabelVisible(visible)

Show or hide the view label.

Name Type Default Description

visible {boolean} Label visibility flag (true to show view label, false to hide)

Example

MyView.setLabelVisible(false);

setQueryData(queryData)

Sets the input to the Data Series AJAX Service

Name Type Default Description

queryData {*} Updated query data

Inherited setViewData(data, createPseudoBinding)

Set or update the bound data associated with the view. It applies only to views with bound data.

Note: It should only be used with simple type bindings, or complex type bindings with simple type properties.
It should not be used with bindings that have properties that are lists or compext types. For complex types, set the bindings by using
the binding.set pattern, as described in the Binding data and configuration options documentation section.

Name Type Default Description

data {Object} The value of the bound data. The parameter type must match the type of the bound data.

createPseudoBinding {boolean} If the value is set to true, the parameter creates a pseudo binding if there is no current binding.

Example

MyView.setViewData("TEST"); //Updates bound data to the string 'TEST'

Inherited setVisible(visible, collapse)

Show or hide the view.

Name Type Default Description

visible {boolean} Visibility flag (true to show the view, false to hide it)

collapse {boolean} Set it to true to collapse the view space when the option visible is set to false.

Examples

MyView.setVisible(false, false); //Equivalent to MyView.hide()

MyView.setVisible(false, true); // Sets visibility to "None"

Inherited show()

Show this view.

Example

MyView.show();

showSeries([seriesName])

Shows the DataSeries in the chart

Name Type Default Description

seriesName {(string|string[])} the name(s) of the dataseries that you want to show. If no names are specified, all series in chart will be shown

transform(chartType, seriesName)

Transforms the chart taking in a new chart type with the specified series name.

Name Type Default Description

chartType {string} the chart type in {bar, line, area, spline, area-spline, step, area-step, pie, donut}

seriesName {string[]} the name of the series that you want to transform the chart with

Example

me.transform("bar", ["SeriesName 1", "SeriesName 2"]);

Inherited triggerFormulaUpdates([phase])

Broadcast the expression trigger for the specified view.

Name Type Default Description

phase {int} bpmext.ui.PHASE_NORMAL The phase we are currently in

Example

MyView.triggerFormulaUpdates();

Methods

Parent

Helpers