bpm-highcharts

The <bpm-highcharts> business component displays a chart that contains information about process templates, process instances, audit events, cases, or work items.

This component's internal controller invokes the BPMChartService.getChart operation to aggregate the requested data, return it in a tabular format, then display the data in a chart using the Highcharts library.

Unlike most of the other business components provided in the framework, this component does not have a template, and it is not demonstrated in the Component Showcase Application.

Prerequisites

Usage

After the prerequisites listed above are fulfilled, the <bpm-highcharts> business component can be invoked in your HTML file using the following form: 

<bpm-highcharts config="chartConfiguration"></bpm-highcharts>

Attributes

Name Type Description
config String This specifies the configuration for the chart, for example, the type of chart (bar, pie, and so on), the text to be displayed on the x-axis and y-axis, and so on. The available configuration options can be found on the Highcharts website.

This configuration is defined in the controller.

Example

	<body layout="column" ng-controller="BPMHighchartsCtrl" ng-cloak >
		<div flex>
			<bpm-highcharts config="chartConfig1"></bpm-highcharts>	
			<bpm-highcharts config="chartConfig2"></bpm-highcharts>	
			<bpm-highcharts config="chartConfig3"></bpm-highcharts>	
		</div>
	</body>

This causes three charts to be rendered, each configured differently as defined in configuration objects chartConfig1, chartConfig2, and chartConfig3.

The configuration objects and data models are defined in the controller, BPMHighchartsCtrl.