107 lines
17 KiB
Markdown
107 lines
17 KiB
Markdown
|
# Node-RED-Dashboard Charts
|
||
|
|
|
||
|
|
## Live data
|
||
|
|
|
||
|
|
To display live data just wire up an input with a `msg.payload` that contains a number.
|
||
|
|
|
||
|
|
|
||
|
|
### Line charts
|
||
|
|
|
||
|
|
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:
|
||
|
|
|
||
|
|
{topic:"temperature", payload:22}
|
||
|
|
{topic:"humidity", payload:66}
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
{topic:"temperature", payload:22, timestamp:1520527095000}
|
||
|
|
|
||
|
|
### Bar, and other charts
|
||
|
|
|
||
|
|
If you want all the bars to be the same colour, then use the `label` property instead.
|
||
|
|
|
||
|
|
{label:"indoor temperature", payload:22}
|
||
|
|
{label:"outdoor temperature", payload:15}
|
||
|
|
|
||
|
|
You can have both a label and series property if you want.
|
||
|
|
|
||
|
|
## Stored data
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
### Line charts
|
||
|
|
|
||
|
|
For line charts an example is given below
|
||
|
|
|
||
|
|
[{
|
||
|
|
"series": ["A", "B", "C"],
|
||
|
|
"data": [
|
||
|
|
[{ "x": 1504029632890, "y": 5 },
|
||
|
|
{ "x": 1504029636001, "y": 4 },
|
||
|
|
{ "x": 1504029638656, "y": 2 }
|
||
|
|
],
|
||
|
|
[{ "x": 1504029633514, "y": 6 },
|
||
|
|
{ "x": 1504029636622, "y": 7 },
|
||
|
|
{ "x": 1504029639539, "y": 6 }
|
||
|
|
],
|
||
|
|
[{ "x": 1504029634400, "y": 7 },
|
||
|
|
{ "x": 1504029637959, "y": 7 },
|
||
|
|
{ "x": 1504029640317, "y": 7 }
|
||
|
|
]
|
||
|
|
],
|
||
|
|
"labels": [""]
|
||
|
|
}]
|
||
|
|
|
||
|
|
For non-timeseries data - for example data in labelled categories, rather than use x and y,
|
||
|
|
the format should be as follows:
|
||
|
|
|
||
|
|
[{
|
||
|
|
"series": ["X", "Y", "Z" ],
|
||
|
|
"data": [ [5,6,9,10], [3,8,5,10], [6,7,2,10] ],
|
||
|
|
"labels": [ "Jan", "Feb", "Mar", "Apr" ]
|
||
|
|
}]
|
||
|
|
|
||
|
|
### Bar and Pie charts
|
||
|
|
|
||
|
|
for bars of different colours
|
||
|
|
|
||
|
|
[{
|
||
|
|
"series": [ "X", "Y", "Z"],
|
||
|
|
"data": [ [5], [3], [6] ],
|
||
|
|
"labels": [ "Jan" ]
|
||
|
|
}]
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
[{
|
||
|
|
"series": [ "X" ],
|
||
|
|
"data": [ [5,6,9] ],
|
||
|
|
"labels": [ "Jan", "Feb", "Mar" ]
|
||
|
|
}]
|
||
|
|
|
||
|
|
and these can be mixed - you can have series and labels defined...
|
||
|
|
|
||
|
|
[{
|
||
|
|
"series": ["X", "Y", "Z" ],
|
||
|
|
"data": [ [5,6,9,10], [3,8,5,11], [6,7,2,12] ],
|
||
|
|
"labels": [ "Jan", "Feb", "Mar", "Apr" ]
|
||
|
|
}]
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
Here is an example you can import demonstrating many of these formats and capabilities
|
||
|
|
|
||
|
|
[{"id":"1c24be99.3dc2f1","type":"function","z":"df030567.d1ff38","name":"","func":"var m={};\nm.labels = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"];\nm.series = ['Series A', 'Series B', 'Series C'];\nm.data = [\n [65, 59, 80, 81, 56, 55, 40],\n [28, 48, 40, 19, 86, 27, 90],\n [38, 28, 20, 49, 45, 60, 20]\n ];\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":360,"wires":[["80476e4d.6f64a","f4e610a1.1c381","fe515729.789e58","3c681829.4ff7d8"]]},{"id":"80476e4d.6f64a","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"89749fb7.87f01","order":1,"width":0,"height":0,"label":"line chart","chartType":"line","legend":"false","xformat":"auto","interpolate":"linear","nodata":"No Data","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":560,"y":100,"wires":[[],[]]},{"id":"2583d993.df9cb6","type":"function","z":"df030567.d1ff38","name":"","func":"var chart = [{\n \"series\":[\"A\",\"B\",\"C\"],\n \"data\":[[{\"x\":1504029632890,\"y\":5},{\"x\":1504029636001,\"y\":4},{\"x\":1504029638656,\"y\":2}],[{\"x\":1504029633514,\"y\":6},{\"x\":1504029636622,\"y\":7},{\"x\":1504029639539,\"y\":6}],[{\"x\":1504029634400,\"y\":7},{\"x\":1504029637959,\"y\":9},{\"x\":1504029640317,\"y\":7}]],\n \"labels\":[\"\"]\n}];\nmsg.payload = chart;\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":200,"wires":[["80476e4d.6f64a"]]},{"id":"c4af128e.0eb42","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":1,"width":0,"height":0,"passthru":false,"label":"Time Line 1","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":200,"wires":[["2583d993.df9cb6"]]},{"id":"f4e610a1.1c381","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"89749fb7.87f01","order":2,"width":0,"height":0,"label":"bar chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"No Data","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":560,"y":160,"wires":[[],[]]},{"id":"ed9dcc7d.422ad","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":5,"width":0,"height":0,"passthru":false,"label":"array","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":130,"y":360,"wires":[["1c24be99.3dc2f1"]]},{"id":"fc7b7968.33bb08","type":"random","z":"df030567.d1ff38","name":"","low":"1","high":"10000000","inte":"true","x":320,"y":560,"wires":[["80476e4d.6f64a"]]},{"id":"12b813b5.e358bc","type":"inject","z":"df030567.d1ff38","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":560,"wires":[["fc7b7968.33bb08"]]},{"id":"c6549407.0c1348","type":"function","z":"df030567.d1ff38","name":"","func":"var m={};\nm.labels = [10,20,30,40,50,60,70];\nm.series = ['Series A', 'Series B', 'Series C', 'Series D'];\nm.data = [\n [65, 59, 80, 81, 56, 55, 40],\n [28, 48, 40, 19, 86, 27, 90],\n [38, 28, 20, 49, 45, 60, 20],\n [58, 18, 40, 29, 15, 30, 60]\n ];\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":400,"wires":[["80476e4d.6f64a","f4e610a1.1c381","fe515729.789e58","3c681829.4ff7d8"]]},{"id":"27cc2706.421b18","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":6,"width":0,"height":0,"passthru":false,"label":"array2","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":130,"y":400,"wires":[["c6549407.0c1348"]]},{"id":"7bcd06e3.5cbab8","type":"function","z":"df030567.d1ff38","name":"","func":"var chart = [{\n \"series\":[\"A\",\"B\",\"C\"],\n \"data\":[[{\"x\":1,\"y\":5},{\"x\":2,\"y\":4},{\"x\":3,\"y\":2}],[{\"x\":4,\"y\":6},{\"x\":5,\"y\":7},{\"x\":6,\"y\":6}],[{\"
|