Display Chart

Description

The Display Chart part provides advanced functionality that allows you to use the full range of Highcharts styles in presenting data.

Use

You can populate this part with Highcharts style settings, which are available directly from one of several tools available on the Highcharts website combined with application data accessed via SQL, Lua data object, or JSON format to present information in a variety of formats.

Design Process

It is possible to use either a JSON format or Lua data object interchangeably for the chart display configuration, but note that the Highcharts Cloud provides JSON format directly, so this is the simplest approach to use. 

For the data source, it is possible to specify a Lua data object or use classic SQL queries in the chart data tab of the part.

Below we outline one approach to designing your chart using the configuration options above.

Step 1: Go to the Highcharts Cloud to generate the starting point for the chart. Explore the tools available at http://editor.highcharts.com/ (some are more sophisticated than others).

The tools will help you choose a chart style, provide title and subtitle, and offer various ways to create some sample data. The sample data is helpful to be able to give an early indication of the look of the final chart. At this point do not be concerned about where the data is ultimately coming from, as this is covered in Step 4.

Step 2: You can tweak or add to the sample data at any time by accessing the DATA view (A). Once the Highcharts Editor has created a sample chart, you can tailor the style and make it more sophisticated by accessing the wide variety of options presented by the blue bars on the left when the Customize view (B) is engaged. A preview of the chart with sample data and customized styling is available via the Preview button (C).

Step 3: Once you have finalized the chart specification, copy the JSON formatted information shown in the Preview, and paste this into the LogicNets part Display Configuration tab (select JSON and paste into the config field). Inspect the JSON to make sure the sample data has not been transferred back, although if it is NOT removed, it does not interfere with the chart generation process during runtime.

Step 4: Now focus on the data and the configuration required for the chart data tab of the LogicNets part:

- If you are using SQL data, enter any categories via a SQL select or manually per the part editor. Enter the series SQL select statement into the name/query table. See the example project(s) for working models of this.

- If you are using data objects, enter the names of the objects containing the series and any x- and y- categories required into the corresponding boxes in the part editor.

Step 5: If the initial result is satisfactory but you want additional styling, go back to the Highcharts Editor tool, modify the styling, and repeat Step 3. Regardless of which data approach you are using, getting the data in the right format is an important and sometimes complex task. We suggest building up the data over a series of small steps so that a resulting chart is displayed with each step. For instance, if you are building a chart with multiple series, then build with one series first so the result appears before adding a second or third series. Creating a complex chart might be the result of going through Steps 1 to 5 above iteratively, each time adding more complexity and more data.

Data Structure for Report Objects

If using the data object approach (this is more flexible than hard coding SQL queries into the display chart editor), the Highcharts plug-in is looking for a specific data structure:

• each series is an item in a collection. The name of the collection is entered into the data object box in the Display Chart part editor.
• within a series, there is a simple array called data that contains the data points 
• the name of the series is contained in a simple object within the series item

Examples

Please download and import the following example projects in your workspace.