# Real-time line chart time x-axis

**URL:** <https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009>\
**Category:** Dashboard\
**Created:** [15 November 2019 16:14 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009 "2019-11-15T16:14:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![davebanthorpe](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@davebanthorpe](https://discourse.nodered.org/u/davebanthorpe)\
**Post date:** [15 November 2019 16:14 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/1 "2019-11-15T16:14:10Z")

</div>

OK - so here is my issue. I am using a chart on a dashboard to display real-time data. I have 4 data sources, each of which are sampled at slightly different times and so I pass the data directly from each source to the chart as a separate payload as and when data arrives. I use a very simple function to create the payload to send to the chart (as below). The data displays fine. However, there are 2 issues:

1. Controlling the chart colours - the colours are assigned by data arrival time. So when the system is restarted, if sensor 2 arrives first it will get the Series1 colour. But sometimes it may be another sensor that samples first. How do I tell the chart which colour to use for that data?

2. Changing the x-axis - I am not sending x-axis data, rather the chart is using the timestamp automatically. This is fine as it is a time-series chart. However, using the filter on the chart to say "last 3 hours" makes no difference.

Here is the payload I send (sorry can't send whole JSON of flow due to complexity and privacy of customer solution).

```auto
var a = msg.payload;
var msg1 = {
    "topic": a.sensorID,
    "payload": a.sensorValue
};
return msg1;

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 November 2019 17:02 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/2 "2019-11-15T17:02:34Z")

</div>

for

1. use a ui\_control node to detect when a browser connects... use that to trigger a send of an array of empty data points but with the correct topics set - in the order you wish - so they always allocate the colours correctly.

2. not sure what you mean ? the chart won't update unless new data arrives so if nothing arrives for 4 hours the data shown will be 4 hours old. If you need to force last 3 hours then you will need to send (or resend) data to fill in the gaps. Or did you mean you want to change the width of the x axis dynamically ? Again this can be done by using ui\_control message into the node - [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

---

<div class="post-metadata">

**Author:** ![davebanthorpe](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@davebanthorpe](https://discourse.nodered.org/u/davebanthorpe)\
**Post date:** [15 November 2019 17:05 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/3 "2019-11-15T17:05:08Z")

</div>

thanks for #1 !

for #2, if I leave the data to run the graph shows a the length of time the solution has run as opposed to what is selected in the Chart settings (e.g. show last 3 hours only)

---

<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:** [15 November 2019 17:20 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/4 "2019-11-15T17:20:45Z")

</div>

Perhaps you are confused by the operation before there are three hours worth of data. It will show all the data there is along the x axis, but when it gets to three hours then it will stick at that, dropping old data off as new arrives.

---

<div class="post-metadata">

**Author:** ![davebanthorpe](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@davebanthorpe](https://discourse.nodered.org/u/davebanthorpe)\
**Post date:** [15 November 2019 17:36 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/5 "2019-11-15T17:36:29Z")

</div>

and therein is the problem 😉 it doesn't do that, it keeps all the old data so just grows and grows

---

<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:** [15 November 2019 17:55 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/6 "2019-11-15T17:55:20Z")

</div>

Show us a screenshot and the config of the node.  
Also post the startup log when you start node red in a terminal.

---

<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:** [19 November 2019 09:27 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/7 "2019-11-19T09:27:52Z")

</div>

Should I deduce that you have solved the problem?

---

<div class="post-metadata">

**Author:** ![davebanthorpe](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@davebanthorpe](https://discourse.nodered.org/u/davebanthorpe)\
**Post date:** [19 November 2019 09:56 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/8 "2019-11-19T09:56:47Z")

</div>

sorry - been off ill for a few days! Can't accecss the startup log as it is on an appliance where Node-Red is embedded as a service and I don't have access to the logs. Here is a screenshot of the node though:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/121e2e19093c8f2844bacedb2bb6b8ad1869222f.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:** [19 November 2019 10:06 UTC](https://discourse.nodered.org/t/real-time-line-chart-time-x-axis/18009/9 "2019-11-19T10:06:10Z")

</div>

> [@davebanthorpe](#):
>
> Can't accecss the startup log as it is on an appliance where Node-Red is embedded as a service and I don't have access to the logs.

Well that makes life rather difficult. What appliance is it?  
What version of node-red and node-red-dashboard is it running? Also what version of nodejs? Assuming you have access to a terminal then `node -v` will tell you that.

**[Edit]** Also a screenshot of the chart mis-behaving please.