Chart
Add dynamic line, bar, pie, polar area and radar charts to the Maya dashboard.
Last updated
Add dynamic line, bar, pie, polar area and radar charts to the Maya dashboard.
Last updated
To display live data just wire up an input with a msg.payload
that contains a number.
To display two or more lines on the same chart then each msg
must also contain topic
property that identifies which data series it belongs to - for example:
Each series will be represented by a different colour. Alternatively you can use the property series
instead of topic
if you prefer.
It is possible to create "gaps" in line charts by sending either a null or boolean false as the payload.
You can also insert extra data points by specifying the timestamp
property. This must be in either epoch time (in miliseconds, not seconds), or ISO8601 format.
If you want all the bars to be the same colour, then use the label
property instead.
You can have both a label and series property if you want.
To display a complete chart in one go - for example from a set of points retrieved from a database, the data must be supplied in the form of an array, that holds an object that has series
,labels
, and data
arrays. This is broadly the same as the raw format used by the angular chart.js library.
You will need to process your data into this structure in order to render it correctly.
For line charts an example is given below
For non-timeseries data - for example data in labelled categories, rather than use x and y, the format should be as follows:
for bars of different colours
for bars of the same colour, set the flag Use first colour for all bars
in the node configuration, and set labels for each column
and these can be mixed - you can have series and labels defined...
You can import this directly into the Maya dashboard to see how it works.
Source : Node-RED