WebPage Charts

Similar like adding components to the webPage you can add also charts.

To add charts you got to have variables with history more here

To create a new WebPage from device tab choose New Device and New webPage device :

Then our webPage is created. We click at index.html and choose option “Edit with wizard”

then click at “Insert Chart”

  1. Random data – in most cases when you are adding chart you don’t have any data yet. This checkbox will force diagram to display random data to preview
  2. Series we want to display – it has some settings like color etc
  3. Add new series based on variable history
  4. Preview of chart
  5. Choose date to show chart
  6. Insert chart to the webPage

Code editing

Inserted chart has only basic functionality, to add more settings, please go to the Source at the top left.

Code for chart is inserted beetwen<!--Chart begin XXXXX--> and <!--Chart End XXXXX--> where XXXX is some random number the same for beginning and end of the chart. To remove chart from the webPage remove everything include everything between comments

Chart itself is generated by the function:

and inserted into generated device in the source Code with givenId. The javascript code can be moved to script.js to make html looks cleaner

Charts are based on great library : plotly.js It has hundreds of settings, and you can experiment with these settings.

The carts are downloaded using URL:

/api/rest/v1/variable/get/timeseries/dd.MM.yyyy%20HH:mm/${from dd.mm.YYYY}/${to m dd.mm.YYYY}/${variables}/

And it returns json data.