Display Chart

Description

The Display Chart form-node 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 through SQL, Lua data object, or JSON format to present information in a variety of formats.

Design Process

You can 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 part on Chart data tab.

The following steps are one approach you can follow to design 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/.

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: With this done, look at the data and the configuration required for the chart data tab of the LogicNets part:

- If you are using SQL data, enter any categories through a SQL select or manually per the part editor. Enter the series SQL select statement in 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 required x- and y- categories in 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 the system displays a resulting chart with each step. For instance, if you are building a chart with multiple series, build with one series first so the result appears before adding a second or third series. Creating a complex chart may require repeating 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, which 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.