# How to Plot line chart of real time data

**URL:** <https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167>\
**Category:** General\
**Created:** [1 February 2021 12:10 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167 "2021-02-01T12:10:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [1 February 2021 12:10 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/1 "2021-02-01T12:10:04Z")

</div>

I am new to node red and i am trying to plot line chart of real time data, but nothing is display on chart

My flow.

```auto
[{"id":"5c0f3e4b.7b304","type":"tab","label":"Vibration_Dashboard","disabled":false,"info":""},{"id":"b6aa9d6f.49572","type":"debug","z":"5c0f3e4b.7b304","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":590,"y":360,"wires":[]},{"id":"99cd2832.db55f8","type":"inject","z":"5c0f3e4b.7b304","name":"","props":[{"p":"payload"},{"p":"object","v":"","vt":"str"}],"repeat":"4","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{'x':'23','y':4}]","payloadType":"str","x":100,"y":260,"wires":[["259e195b.bcdd76"]]},{"id":"d8f752e4.11982","type":"function","z":"5c0f3e4b.7b304","name":"","func":"var msg1={}\nvar msg2={}\nvar point={}\nvar buffer=msg.payload.split(\",\");\nmsg1.payload=parseInt(buffer[0]);\nmsg2.payload=parseInt(buffer[1]);\n\n\nmsg.payload=[];\nvar values= [];\n\n\n point.x=parseInt(buffer[0])\n point.y=parseInt(buffer[1])\n values.push(point);\n\nmsg.action = \"load\"; \n\nmsg.payload=\n[{data:values}];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":60,"wires":[["7fa64770.c07018"]]},{"id":"259e195b.bcdd76","type":"change","z":"5c0f3e4b.7b304","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"[","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"]","fromt":"str","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":200,"wires":[["e567e5f8.0a5048"]]},{"id":"e567e5f8.0a5048","type":"change","z":"5c0f3e4b.7b304","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"{","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"}","fromt":"str","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":240,"wires":[["893f85f1.204518"]]},{"id":"893f85f1.204518","type":"change","z":"5c0f3e4b.7b304","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"'x'","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":":","fromt":"str","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":280,"wires":[["d9406f80.3dc26"]]},{"id":"d9406f80.3dc26","type":"change","z":"5c0f3e4b.7b304","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"'y'","fromt":"str","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":320,"wires":[["8c742b93.9e3798"]]},{"id":"8c742b93.9e3798","type":"change","z":"5c0f3e4b.7b304","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"'","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"'","fromt":"str","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":380,"wires":[["d8f752e4.11982","b6aa9d6f.49572"]]},{"id":"7fa64770.c07018","type":"ui_template","z":"5c0f3e4b.7b304","group":"95c16e78.88cee","name":"HiChart","order":0,"width":"0","height":"0","format":"\n<html>\n <head>\n <title>Highcharts Tutorial</title>\n <script src = \"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\">\n </script>\n <script src = \"https://code.highcharts.com/highcharts.js\"></script> \n </head>\n \n <body>\n <div id = \"container\" style = \"width: 550px; height: 400px; margin: 0 auto\"></div>\n <script language = \"JavaScript\">\n $(document).ready(function() {\n var chart = {\n type: 'spline',\n animation: Highcharts.svg, // don't animate in IE < IE 10.\n marginRight: 10,\n \n events: {\n load: function () {\n // set up the updating of the chart each second\n var series = this.series[0];\n \n setInterval(function () {\n \n for (var j = 0; j < msg.payload.length; j++)\n {\n \n var data1 = msg.payload[j].data;\n \n \n x: data1[j].x\n y: data1[j].y\n series.addPoint([x, y], true, true);\n \n \n \n }\n \n }, 1000);\n }\n }\n };\n var title = {\n text: 'Live random data' \n }; \n var xAxis = {\n type: 'number',\n tickPixelInterval: 150\n };\n var yAxis = {\n type: 'number',\n title: {\n text: 'Value'\n },\n plotLines: [{\n value: 0,\n width: 1,\n color: '#808080'\n }]\n };\n /// var tooltip = {\n //formatter: function () {\n //return '<b>' + this.series.name + '</b><br/>' +\n // Highcharts.numberFormat(this.x) + '<br/>' +\n //Highcharts.numberFormat(this.y);\n // }\n ///};\n var plotOptions = {\n area: {\n pointStart: 1940,\n marker: {\n enabled: false,\n symbol: 'circle',\n radius: 2,\n \n states: {\n hover: {\n enabled: true\n }\n }\n }\n }\n };\n var legend = {\n enabled: false\n };\n var exporting = {\n enabled: false\n };\n var series = [{\n name: 'Random data',\n data: (function () {\n // generate an array of random data\n \n \n var data=[];\n for (var j = 0; j < msg.payload.length; j++)\n {\n \n var data1 = msg.payload[j].data;\n data.push({\n x: data1[j].x\n y: data1[j].y\n\t\t\t\t \n\t\t\t\t \n });\n \n return data;\n }\n }()) \n }]; \n \n var json = {}; \n json.chart = chart; \n json.title = title; \n json.tooltip = tooltip;\n json.xAxis = xAxis;\n json.yAxis = yAxis; \n json.legend = legend; \n json.exporting = exporting; \n json.series = series;\n json.plotOptions = plotOptions;\n \n Highcharts.setOptions({\n global: {\n useUTC: false\n }\n });\n $('#container').highcharts(json);\n });\n </script>\n </body>\n \n</html>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":580,"y":200,"wires":[["b6aa9d6f.49572"]]},{"id":"95c16e78.88cee","type":"ui_group","name":"Group 1","tab":"e1f4390.2c4a7c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"e1f4390.2c4a7c8","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [1 February 2021 12:35 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/2 "2021-02-01T12:35:33Z")

</div>

put a `debug` node on the output of the `function` node and look at the results.

Is it what should go into the chart??

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [1 February 2021 12:50 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/3 "2021-02-01T12:50:25Z")

</div>

Here is the output of debug node.

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [1 February 2021 12:59 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/4 "2021-02-01T12:59:05Z")

</div>

Here is another thread where you can find how to use `highcharts` library and present it inside `ui_template` node. [Plot a time series using highcharts](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429)

Examine the code inside the `ui_template` node first and see the difference with your code. Adjust your code to get the library correctly working and if there will be no errors in browser console, you are ready to go to adjust the incoming messages to match the needs for the chart library to be able to show what you are trying to plot.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [1 February 2021 13:15 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/5 "2021-02-01T13:15:55Z")

</div>

What does the data look like if you click on the arrows?

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [1 February 2021 14:04 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/6 "2021-02-01T14:04:46Z")

</div>

i am stuck in Hichart template code. how to pass values to x and y axis in Highchart template code?

This is my function code

var point={}  
var buffer=msg.payload.split(",");  
var values= ;

point.x=parseInt(buffer[0])  
point.y=parseInt(buffer[1])  
values.push(point);

msg.payload=  
[{data:values}];

return msg;

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [2 February 2021 04:42 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/7 "2021-02-02T04:42:23Z")

</div>

which arrows?

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [2 February 2021 06:26 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/8 "2021-02-02T06:26:57Z")

</div>

![Debug_Node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b828b1e6239eaf0be49281b54d323b12db3f682a.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:** [2 February 2021 09:56 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/9 "2021-02-02T09:56:31Z")

</div>

You said you want to plot it in real time. Are the x and y you show to be drawn as separate lines on the chart (so one line showing how x changes over time and another showing how y changes over time)? or are you trying to draw a line showing x against y where neither of those is time?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [2 February 2021 10:04 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/10 "2021-02-02T10:04:00Z")

</div>

This is a double thread which one do we answer on?

> [@Vibration\_sensor](https://discourse.nodered.org/t/vibration-sensor/40148):
>
> I want to plot a line chart of vibration sensor Data. Following is my flow. How can i plot a real time line chat using node red where x-axis will be frequency and y-axis will be amplitude. [{"id":"5c0f3e4b.7b304","type":"tab","label":"Vibration\_Dashboard","disabled":false,"info":""},{"id":"b6aa9d6f.49572","type":"debug","z":"5c0f3e4b.7b304","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":590…

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [2 February 2021 10:12 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/11 "2021-02-02T10:12:29Z")

</div>

i am trying to draw x vs y.

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [2 February 2021 10:12 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/12 "2021-02-02T10:12:55Z")

</div>

on this Topic

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [2 February 2021 10:15 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/13 "2021-02-02T10:15:30Z")

</div>

As mentioned on other topic you can have two lines over time.  
e.g.

```auto
[{"id":"33bf91f5.fd2cee","type":"inject","z":"d758c823.606a8","name":"","props":[{"p":"payload"},{"p":"object","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{'x':'23','y':4}]","payloadType":"str","x":140,"y":100,"wires":[["5e220f06.7d46e"]]},{"id":"5e220f06.7d46e","type":"change","z":"d758c823.606a8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"'","fromt":"str","to":"\"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":200,"y":160,"wires":[["c69d12e6.691b08"]]},{"id":"c69d12e6.691b08","type":"json","z":"d758c823.606a8","name":"","property":"payload","action":"","pretty":false,"x":390,"y":160,"wires":[["13dee0b6.4091af"]]},{"id":"13dee0b6.4091af","type":"change","z":"d758c823.606a8","name":"","rules":[{"t":"set","p":"hold.freq","pt":"msg","to":"payload[0].x","tot":"msg"},{"t":"set","p":"hold.amp","pt":"msg","to":"payload[0].y","tot":"msg"},{"t":"move","p":"hold","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":160,"wires":[["6a3d3694.4aee6"]]},{"id":"6a3d3694.4aee6","type":"split","z":"d758c823.606a8","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":130,"y":220,"wires":[["1301ad43.8a390b","72542461.b63994"]]},{"id":"1301ad43.8a390b","type":"ui_chart","z":"d758c823.606a8","name":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":310,"y":220,"wires":[[]]},{"id":"72542461.b63994","type":"debug","z":"d758c823.606a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":290,"y":280,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","z":"","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"6","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [2 February 2021 10:34 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/14 "2021-02-02T10:34:29Z")

</div>

Thank you @E1cid for the reply.  
How to plot the same data x vs y using line chart.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 February 2021 11:29 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/15 "2021-02-02T11:29:02Z")

</div>

I don't think that it is what you are actually trying to do, but here's an example of line presented x vs y without time component involved.

```auto
[{"id":"1076704a.386908","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":0,"width":0,"height":0,"passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","icon":"","payload":"[]","payloadType":"json","topic":"reset","x":450,"y":240,"wires":[["d936016b.7da5f"]]},{"id":"f84ec1a3.50318","type":"ui_chart","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":0,"width":"9","height":"9","label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#339e7a","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":830,"y":380,"wires":[[]]},{"id":"9251a607.5109c","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":280,"wires":[["46dd99bd.680638"]]},{"id":"d936016b.7da5f","type":"function","z":"7ee51301.a9185c","name":"prepare data for chart","func":"\nvar chartdata = context.get(\"chartdata\") || []\n\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n context.set(\"chartdata\",[]);\n msg.payload = []\n return msg\n}\n\nchartdata.push(msg.payload)\n\n// limit data collection length\nif(chartdata.length > 1440){\n chartdata.shift()\n}\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\nmsg.payload = [{\n\"series\": [\"A\"],\n\"xAxisID\": 'custom-x-axis',\n\"yAxisID\": 'custom-y-axis',\n\"data\": [chartdata],\n\"labels\": [\"\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":640,"y":280,"wires":[["f84ec1a3.50318"]]},{"id":"ec9e71e8.8842e","type":"function","z":"7ee51301.a9185c","name":"modify chart options","func":"msg.ui_control = {\n options: {\n legend: {\n display: false\n },\n scales: {\n xAxes: [{\n type: 'linear',\n id: 'custom-x-axis',\n position:'bottom',\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n }\n }],\n yAxes: [{\n id: 'custom-y-axis',\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n }\n }]\n }\n }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":460,"y":380,"wires":[["f84ec1a3.50318"]]},{"id":"d689bde.df3354","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":380,"wires":[["ec9e71e8.8842e"]]},{"id":"46dd99bd.680638","type":"function","z":"7ee51301.a9185c","name":"random data","func":"msg.payload = {\n x:Math.floor(Math.random()*50)-25,y:Math.floor(Math.random()*50)-25\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":280,"wires":[["d936016b.7da5f"]]},{"id":"4afa3d95.6fd494","type":"comment","z":"7ee51301.a9185c","name":"Change chart x axis to be type linear","info":"","x":500,"y":340,"wires":[]},{"id":"c7a27394.057878","type":"ui_group","name":"CHART","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"9","collapse":false},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [2 February 2021 13:07 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/16 "2021-02-02T13:07:33Z")

</div>

Thank you for reply @hotNipi. It really helped 😇

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [4 February 2021 07:40 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/17 "2021-02-04T07:40:24Z")

</div>

This works fine. But when i set the x axis range from 0-511 it plotted the graph as follows.

 ![Plot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a70383d7a23f97744d45ec0b867a8ce26504bbff.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 February 2021 07:48 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/18 "2021-02-04T07:48:53Z")

</div>

That may be correct result but not what you are trying to achieve. It is hard to advise anything that way. Maybe you can show an image or something about how the chart should look like?

---

<div class="post-metadata">

**Author:** ![kajal](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kajal](https://discourse.nodered.org/u/kajal)\
**Post date:** [4 February 2021 11:52 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/19 "2021-02-04T11:52:28Z")

</div>

Here is the example. X axis will be values ranging from 0-511 not time.

 ![format](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2d598ab2a8b0b9a4ca4440a3e82d57234330152.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [4 February 2021 12:13 UTC](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167/20 "2021-02-04T12:13:54Z")

</div>

That could not be done in realtime as soon as x value is less than previous the line would move backward.

[Next page](https://discourse.nodered.org/t/how-to-plot-line-chart-of-real-time-data/40167.md?page=2)