WebPage Charts

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

To add charts You ave 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 dont have yet any data. 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 beetwen comments

Chart itself is generated by the function:

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

Chart are based on great library : plotly.js It. has hundrets of settings, and You should experiment with this settings by your own.

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.