# One vs multiple lines on a chart

**URL:** <https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 November 2024 12:14 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384 "2024-11-23T12:14:20Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 November 2024 12:14 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/1 "2024-11-23T12:14:20Z")

</div>

If I have a dataset as an array:

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22b0750cd2aa30c4a89768fe7fff310587652439.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d01c5aeb8e0b0d1d561a04f20f3f451d5c6932d.png)

But these chart settings show nothing at all:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fbfb00a517d9916c87b1c6c28c0cad9f041f37f.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4dd58ead3dd1e8af550d8c03a76b975d8c5847a.png)

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?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 November 2024 16:43 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/2 "2024-11-23T16:43:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 November 2024 17:05 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/3 "2024-11-23T17:05:26Z")

</div>

I would definitely classify that as a bug

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 November 2024 17:06 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/4 "2024-11-23T17:06:37Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c07e1409d227edbe3c1796029b2797b708b290fe.png)

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/265aefbfdff3024a5bc0c1cb0fa16bec88c16ed9.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 November 2024 17:13 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/5 "2024-11-23T17:13:38Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b0a0c52e43a857244885ea49e83ca7e58fb8d122.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 November 2024 18:08 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/6 "2024-11-23T18:08:28Z")

</div>

> [@Colin](#):
>
> you could have pasted your data directly into the Inject node, configured for JSON.

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

---

<div class="post-metadata">

**Author:** ![duaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/duaw/32/20970_2.png) [@duaw](https://discourse.nodered.org/u/duaw)\
**Post date:** [24 November 2024 10:00 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/7 "2024-11-24T10:00:47Z")

</div>

This, too, asks for an **EASY** to create climograph !!!  
See [How to create a climograph?](https://discourse.nodered.org/t/how-to-create-a-climograph/93094)  
Regards, Uwe

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 December 2024 16:27 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/8 "2024-12-11T16:27:38Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/9924d52e9c5c521b6f0f606d73d8911a470a607c.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/59073effa8511b07302d6c646064f15119db584b.png)

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [12 December 2024 19:43 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/10 "2024-12-12T19:43:17Z")

</div>

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

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [12 December 2024 22:08 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/11 "2024-12-12T22:08:01Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 January 2025 22:08 UTC](https://discourse.nodered.org/t/one-vs-multiple-lines-on-a-chart/93384/12 "2025-01-11T22:08:43Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.