Highcharts

Building charts with Price Setting is easy and requires no programming skills. A Price Setting chart can be defined with the UI and automatically added to a logic. The definition of a Price Setting chart contains a Datamart query and the result from this query is displayed in the chart.

The biggest benefit of Price Setting charts is the speed at which charts can be created, but the drawback is that the data must be the result of a Datamart query.

For example, it is not possible to visualize Rebate Records with a Price Setting chart.

As a second example, the queries that can be constructed with Price Setting have limited capability. If the desired result can’t be achieved with a single query, Price Setting charts can’t display the result.

About Highcharts

Highcharts is a JavaScript library for interactive charts that is built into Pricefx. It is generally more flexible than the Price Setting charts. For example, it is possible to apply styles, multiple charts can be combined into one and it is possible to create interactive drill-down charts (where the user can click on an individual plot to open a descendant chart).

It also supports more types of charts, including:

A major benefit of Highcharts is that the visualized data does not need to be the result of a single Datamart query. The data can come from anywhere, it doesn’t need to originate from a Datamart.

Figure 1. Example of a chart made using Highcharts

Pricefx also supports FlexCharts, which are based on Highcharts. However, FlexCharts can only use an old version of the Highcharts API and thus have limited capability. FlexCharts should therefore not be used in new projects.

Comparison of Price Setting Charts and Highcharts

The table below compares and highlights the most significant differences between Highcharts and Price Setting charts.

	Price Setting Chart	Highchart

	Price Setting Chart	Highchart
When to use	For quick creation of initial solution — Proof of Concept, Demo, etc.	When high flexibility is needed for final solution. When customization of appearance is needed. When the chart data does not reside in a Datamart. When the chart data cannot be achieved with a single Datamart query.
Effort to create	Easy — no programming skills needed.	More difficult — programming skills needed.
How to create	Code generated in the UI	Code
Time to develop	Short	Long
Number of chart types	10	Almost all from Highcharts, including geographical maps.
Source of Data	Datamart	Anything
Data	Datamart is queried dynamically in the browser when needed. For example, when the dashboard is refreshed and if the portlet is made visible.	Data is loaded by the (dashboard) calculation logic.
Flexibility	Limited to Analytics pre-build capabilities.	Almost everything from Highcharts library.
Drilldown	Limited capability	Highly flexible

The Highchart Object

In the web browser, a Highchart is represented by a JavaScript object, referred to as a Highchart object. In the logic, the Highchart object is represented by a Map.

To create a highchart, this map should be provided as an argument to api.buildHighchart(), which in turn should be returned by the logic code. The Highchart object is then included in the calculation logic element result/output, represented as a JSON string, and will be rendered in the Pricefx UI.

The Highchart object has the following properties (among others):

chart — Contains property type which defines whether the chart is a pie chart, scatter plot etc.
series — The data sample values to be plotted, i.e., not a Datamart query.
title — Title options.
tooltip — Tooltip options.
xAxis & yAxis — Axis options.
credits — Needs to be set to [enabled: false] in order to disable the credits to Highcharts.com (by default visible in the bottom right corner).

Example of basic simple chart definition

def highchartObject = [
        chart: [
                type: "column"
        ],
        series : [
                [
                        data: [29.9, 71.5, 106.4, 129.2, 144.0]
                ]
        ]
]
return api.buildHighchart(highchartObject)

Figure 2. Result of the basic Highchart in the code above

Principle of Chart Preparation

Initial preparation is critical for the successful creation of a chart. Configuration Engineers should aim at developing charts with the following series of steps:

The end-result, i.e, the appearance of the chart, is made understood thoroughly. A sketch on a paper or whiteboard is usually enough.
The data that will be visualized with the chart is made understood perfectly.
A highchart with hard-coded mock data is created with one of the following methods (in order of preference):
- By using Pricefx Studio’s live templates (code snippets) in IntelliJ.
- By copying a chart from the Highcharts Demos and converting the JavaScript Highchart object into a Groovy Map.
- By reading the Highcharts API documentation and constructing the Highchart object from scratch.
The chart (with the hard-coded mock data) is tested, to ensure that the Highchart works as required.
A Data Gathering Element is created, which gathers the necessary data from tables.
A Result Element is created, which returns the Highchart object with the gathered data in the series property.
The functionality is verified.

Modules

Highchart functionalities are bundled in a set of modules. Several of these modules are available by default in Pricefx:

boost — Bypasses some of the standard features in order to render as many data points as possible. Disabled by default in Pricefx.
drilldown — Allows a user to click on a point, this series is then loaded in the chart and replaces the existing series.
exporting — Allows user to download the chart as PDF, PNG, JPG or SVG vector images.
export-data — Enables exporting the chart data to CSV, XLS or HTML table formats.
heatmap — Allows for displaying heatmaps.
no-data-to-display — Options for displaying a message like "No data to display".
treemap — Allows for displaying treemaps.

Calculation Logics can add other modules with the Groovy API, ResultHighchart.addModule().

References

Highcharts

Groovy API

ResultHighchart
- addModule()
ResultHighmap
api functions
- api.buildHighchart(definition)
- api.buildHighmap(definition)

Knowledge Base

Highcharts Documentation

Flex Charts

Pricefx Documentation

Flex Chart Templates

Groovy API

api functions
- api.buildFlexChart(baseTemplateToUse, definition)

Knowledge Base