Description

The ChartBuilder component allows you to build a chart dynamically.


Implementation


  • Copy / paste the component into the station.
  • Edit the properties in the view.
  • Save and see the result.
  • After building the chart you can display it in a card ChartBuilder


This component is for advanced chart building. 

It is the responsibility of the user to see how Highcharts configurations works, please refer to the official API here.

Most of the example in Highcharts API are Javascript syntax. Fix the configuration to JSON syntax to make the ChartBuilder works.

The current version of Highchart used is the 7.1.3, we do not support newest features.


Properties

  • Enable dateTime: Adds datetime for values. If enable, add type  field with datetime value to xAxis configuration
  • Constructor Type: The type of constructor highcharts you want to use. The constructor here is the library to take constructor from, 4 possibilities:
    • charts  for Highcharts charts
    • stockChart for Highstock charts
    • mapChart for Highmaps charts
    • ganttChart' for Gantt charts
  • Data: The bql requests to resolve the data to display
  • CSS:  An additional style to apply to the chart view
  • JSON: The JSON configuration for the chart. It isn't allowed to use Javascript in it like the Highchart  object. To add custom data to the chart, follow this steps:
    • Add as many request you want in data field
    • Add as many series configuration in your JSON
    • Add series field configuration, and for the value use the syntax "$chart_dataI" . Replace I by the index of the data request you want to replace, starting by 0. For example $chart_data0  for the first data request

    • A full example of JSON :