One vs multiple lines on a chart

Dashboard
1

If I have a dataset as an array:

[{"timestamp":"2024-04-28T08:38:08.000Z","temperature":103.8,"humidity":55},{"timestamp":"2024-06-04T08:01:50.000Z","temperature":102.8,"humidity":92.8},{"timestamp":"2024-07-06T16:35:03.000Z","temperature":90.98,"humidity":80.98},{"timestamp":"2024-09-09T18:09:12.000Z","temperature":109.72,"humidity":74}]

(This is derived from an SQL query SELECT timestamp, temperature, humidity FROM test; )

These chart settings show humidity and temperature as two lines:

image
image668×529 28.3 KB

image
image442×286 11.5 KB

But these chart settings show nothing at all:

image
image569×509 25.4 KB

image
image438×280 2.69 KB

Why?
["temperature"] is a perfectly acceptable array, it just happens to only have one element.

Is this a limitation of chart.js, or a non-positive feature of Dashboard 2?

2

Could you post a test flow injecting that data, along with the two charts so we can more easily replicate it?

3

I would definitely classify that as a bug

4

image
image1133×279 32.1 KB

[{"id":"c54a9a7206f024de","type":"ui-chart","z":"542f82cdc92ce2bf","group":"a7ca491de32cf7c7","name":"Two lines","label":"Two Lines","order":1,"chartType":"line","category":"[\"temperature\", \"humidity\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"timestamp","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"temperature","yAxisPropertyType":"property","ymin":"50","ymax":"150","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"bezier","x":460,"y":140,"wires":[[]]},{"id":"f21925dbdf482c09","type":"inject","z":"542f82cdc92ce2bf","name":"Go","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":180,"wires":[["9d1b20d73b5a295c"]]},{"id":"9d1b20d73b5a295c","type":"template","z":"542f82cdc92ce2bf","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[\n{\"timestamp\":\"2024-04-28T08:38:08.000Z\",\"temperature\":103.8,\"humidity\":55},\n{\"timestamp\":\"2024-06-04T08:01:50.000Z\",\"temperature\":102.8,\"humidity\":92.8},\n{\"timestamp\":\"2024-07-06T16:35:03.000Z\",\"temperature\":90.98,\"humidity\":80.98},\n{\"timestamp\":\"2024-09-09T18:09:12.000Z\",\"temperature\":109.72,\"humidity\":74}\n]","output":"json","x":260,"y":180,"wires":[["c54a9a7206f024de","25f6ae9829478bc4","04d7f79762d5e74e","ac2ea679a801c621"]]},{"id":"25f6ae9829478bc4","type":"ui-chart","z":"542f82cdc92ce2bf","group":"a7ca491de32cf7c7","name":"One line U/S","label":"One Line (broken)","order":1,"chartType":"line","category":"[\"humidity\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"timestamp","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"temperature","yAxisPropertyType":"property","ymin":"50","ymax":"150","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"bezier","x":470,"y":180,"wires":[[]]},{"id":"04d7f79762d5e74e","type":"ui-chart","z":"542f82cdc92ce2bf","group":"a7ca491de32cf7c7","name":"One line ","label":"One Line ","order":1,"chartType":"line","category":"humidity","categoryType":"str","xAxisLabel":"","xAxisProperty":"timestamp","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"humidity","yAxisPropertyType":"property","ymin":"50","ymax":"150","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"bezier","x":460,"y":80,"wires":[[]]},{"id":"052d26b81b10c1e8","type":"comment","z":"542f82cdc92ce2bf","name":"2 lines, Series as a text array","info":"","x":680,"y":140,"wires":[]},{"id":"6bcb6941c79bfb16","type":"comment","z":"542f82cdc92ce2bf","name":"1 line, Series as array does not work","info":"","x":700,"y":180,"wires":[]},{"id":"5eb983304cd3fc21","type":"comment","z":"542f82cdc92ce2bf","name":"One line. Series as text","info":"","x":660,"y":80,"wires":[]},{"id":"ac2ea679a801c621","type":"debug","z":"542f82cdc92ce2bf","name":"debug 68","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":460,"y":240,"wires":[]},{"id":"b08f20ad3fdba1d5","type":"inject","z":"542f82cdc92ce2bf","name":"Clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":110,"y":80,"wires":[["04d7f79762d5e74e","c54a9a7206f024de","25f6ae9829478bc4"]]},{"id":"a7ca491de32cf7c7","type":"ui-group","name":"Charts","page":"07463b165f437f23","width":"12","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"07463b165f437f23","type":"ui-page","name":"Demo","ui":"a3e614cd9df4ae2e","path":"/demo","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":-1,"className":"","visible":"true","disabled":"false"},{"id":"a3e614cd9df4ae2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

image
image1409×408 32.8 KB

5

I can confirm that I am seeing this too.

For future reference, in case you did not know, you could have pasted your data directly into the Inject node, configured for JSON.

image
image528×259 10.9 KB

6

Yes but it's easier to copy and paste from a template into vi for a more friendly editing experience.

7

This, too, asks for an EASY to create climograph !!!
See How to create a climograph?
Regards, Uwe

8

A related problem:
I can set Series to msg.series & pass an array ["temperature", "humidity"]
These are used as the labels on the chart but all of the data points get plotted as a single "temperature" line.

image
image461×324 23.4 KB

image
image551×126 7.72 KB

[{"id":"0a4dabe7a9723512","type":"ui-chart","z":"542f82cdc92ce2bf","group":"a7ca491de32cf7c7","name":"Two lines","label":"Two Lines","order":2,"chartType":"line","category":"series","categoryType":"msg","xAxisLabel":"","xAxisProperty":"timestamp","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"50","ymax":"150","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"bezier","x":460,"y":320,"wires":[[]]},{"id":"0e0cc6e1e49808dd","type":"debug","z":"542f82cdc92ce2bf","name":"Complete message","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":490,"y":360,"wires":[]},{"id":"963f0bdafd40f2e7","type":"inject","z":"542f82cdc92ce2bf","name":"","props":[{"p":"series","v":"[\"temperature\", \"humidity\"]","vt":"json"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[ {\"timestamp\":\"2024-04-28T08:38:08.000Z\", \"key\":\"temperature\", \"value\": 103.8}, {\"timestamp\":\"2024-06-04T08:01:50.000Z\", \"key\":\"temperature\", \"value\": 102.8}, {\"timestamp\":\"2024-07-06T16:35:03.000Z\", \"key\":\"temperature\", \"value\": 90.98}, {\"timestamp\":\"2024-09-09T18:09:12.000Z\", \"key\":\"temperature\", \"value\": 109.72}, {\"timestamp\":\"2024-04-28T08:38:08.000Z\", \"key\":\"humidity\", \"value\": 55}, {\"timestamp\":\"2024-06-04T08:01:50.000Z\", \"key\":\"humidity\", \"value\": 92.8}, {\"timestamp\":\"2024-07-06T16:35:03.000Z\", \"key\":\"humidity\", \"value\": 80.98}, {\"timestamp\":\"2024-09-09T18:09:12.000Z\", \"key\":\"humidity\", \"value\": 74} ]","payloadType":"json","x":110,"y":320,"wires":[["0a4dabe7a9723512","0e0cc6e1e49808dd"]]},{"id":"a7ca491de32cf7c7","type":"ui-group","name":"Charts","page":"07463b165f437f23","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"07463b165f437f23","type":"ui-page","name":"Demo","ui":"a3e614cd9df4ae2e","path":"/demo","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"a3e614cd9df4ae2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
10

Is it a time stamp issue this works for me.
Has a UI button to randomly generate temp/hum

[{"id":"fa73bb19a55f998d","type":"function","z":"f46e673cf1af3886","name":"temp & hu rando","func":"msg.payload = [{ ts: new Date().toISOString(), temperature: Math.floor(Math.random() * 32), humidity: Math.floor(Math.random() * 100) }]\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":278,"y":520,"wires":[["40bdf73f3254753d","86866da77b2dd185"]],"l":false},{"id":"40bdf73f3254753d","type":"ui-chart","z":"f46e673cf1af3886","group":"6c8f43b2f408eafe","name":"rando room Temp & Humidity","label":"rando room Temp & Humidity","order":7,"chartType":"line","category":" [\"temperature\", \"humidity\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"ts","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"HH:mm","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"0","ymax":"100","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":"3","showLegend":true,"removeOlder":"12","removeOlderUnit":"3600","removeOlderPoints":"1000","colors":["#d72714","#4098ce","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":false,"gridColor":["#e5e5e5"],"gridColorDefault":false,"width":6,"height":8,"className":"","interpolation":"linear","x":335,"y":520,"wires":[[]],"l":false},{"id":"86866da77b2dd185","type":"debug","z":"f46e673cf1af3886","name":"debug 390","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":335,"y":480,"wires":[],"l":false},{"id":"466a3aaf829e2e27","type":"ui-button","z":"f46e673cf1af3886","group":"6c8f43b2f408eafe","name":"Rando","label":"Rando","order":1,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"mdi-home-thermometer-outline","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":225,"y":520,"wires":[["fa73bb19a55f998d"]],"l":false},{"id":"6c8f43b2f408eafe","type":"ui-group","name":"Bar Chart - X Properties","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts Example","ui":"42751b5153d87eac","path":"/charts-example","icon":"chart-box-outline","layout":"notebook","theme":"5075a7d8e4947586","order":5,"className":"","visible":"true","disabled":"false"},{"id":"42751b5153d87eac","type":"ui-base","name":"baseNode","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"icon"},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
11

Thanks for the suggestion @iiLaw but:
Your example is real-time data while mine uses stored data.
You have Series hard coded as ["temperature", "humidity"] while mine is taking this array from msg.series.
Every message in your example contains both temperature and humidity values, while mine has elements containing one or the other. (Which is certainly eccentric given that it's stored data, so it could be presented differently.)