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