# u-Plot charts simple live data example

**URL:** <https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453>\
**Category:** Dashboard\
**Created:** [10 May 2021 21:04 UTC](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453 "2021-05-10T21:04:33Z")\
**Posts on this page:** 4\
**Page:** 1

<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:** [10 May 2021 21:04 UTC](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453/1 "2021-05-10T21:04:33Z")

</div>

You'll need to download the needed files from here [GitHub - leeoniya/uPlot: 📈 A small, fast chart for time series, lines, areas, ohlc & bars](https://github.com/leeoniya/uPlot)

and then serve them from your static folder.  
If performance matters and you are ready for a bit of JavaScript struggle, It is the way to go.  
Here's the starting point

```auto
[{"id":"d03aad8c.fcdf9","type":"ui_template","z":"c0ddb509.b04f48","group":"304730.1de8e8d","name":"chart","order":1,"width":"15","height":"8","format":"<script src=\"/uplot/uPlot.iife.min.js\"></script>\n<div id=\"chart\"></div>\n<script>\ndata = [[],[],[],[]];\ntopics = [\"InternalTopicForTime\",\"first\",\"second\",\"third\"]\nopts = {\n\twidth: 790,\n\theight: 350,\n\ttitle: \"u-Plot Live\",\n\tscales: {\n\t\tx: {\n\t\t\ttime: true,\n\t\t\t\n\t\t},\n\t},\n\tms:1,\n\t\n\tcursor: {\n\t\tdataIdx: (self, seriesIdx, hoveredIdx) => {\n\t\t\tlet seriesData = self.data[seriesIdx];\n\t\t\tif (seriesData[hoveredIdx] == null) {\n\t\t\t\tlet nonNullLft = hoveredIdx,\n\t\t\t\t\tnonNullRgt = hoveredIdx,\n\t\t\t\t\ti;\n\t\t\t\ti = hoveredIdx;\n\t\t\t\twhile (nonNullLft == hoveredIdx && i-- > 0) if (seriesData[i] != null) nonNullLft = i;\n\n\t\t\t\ti = hoveredIdx;\n\t\t\t\twhile (nonNullRgt == hoveredIdx && i++ < seriesData.length)\n\t\t\t\t\tif (seriesData[i] != null) nonNullRgt = i;\n\n\t\t\t\treturn nonNullRgt - hoveredIdx > hoveredIdx - nonNullLft ? nonNullLft : nonNullRgt;\n\t\t\t}\n\t\t\treturn hoveredIdx;\n\t\t},\n\t},\n\tseries: [\n\t {\n\t\t\tvalue: '{HH}:{mm}:{ss}',\n\t\t},\n\t\t{\n\t\t\tstroke: \"red\",\n\t\t//\tfill: \"rgba(255,0,0,0.1)\",\n\t\t\n\t\t\tspanGaps: true,\n\t\t},\n\t\t{\n\t\t\tstroke: \"yellow\",\n\t\t//\tfill: \"rgba(255,255,0,0.1)\",\n\t\t\n\t\t\tspanGaps: true,\n\t\t},\n\t\t{\n\t\t\tstroke: \"blue\",\n\t//\t\tfill: \"rgba(0,0,255,0.1)\",\n\t\t\t\n\t\t\tspanGaps: true,\n\t\t},\n\t],\n\taxes: [\n\t\t{\n\t\t\tstroke: '#f5f5dc',\n\t\t\tvalues: '{HH}:{mm}',\n\n\t\t\tgrid: {\n\t\t\t\twidth: 1 / devicePixelRatio,\n\t\t\t\tstroke: '#f5f5dc40',\n\t\t\t},\n\t\t\tticks: {\n\t\t\t\twidth: 1 / devicePixelRatio,\n\t\t\t\tstroke: '#f5f5dc40',\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tstroke: '#f5f5dc',\n\t\t\t\n\t\t\tgrid: {\n\t\t\t\twidth: 1 / devicePixelRatio,\n\t\t\t\tstroke: '#f5f5dc40',\n\t\t\t},\n\t\t\tticks: {\n\t\t\t\twidth: 1 / devicePixelRatio,\n\t\t\t\tstroke: '#f5f5dc40',\n\t\t\t},\n\t\t},\n\t],\n};\nchart = new uPlot(opts, data, document.querySelector(\"#chart\"));\n\nfunction addChartPoint(val,topic,chart){\n let now = Date.now() \n let old = now - 1000 * 60 * 10\n topics.forEach((t,i) => {\n if(i == 0){\n data[i].push(now)\n \n }else{\n if(t == topic){\n data[i].push(val)\n }\n else{\n data[i].push(null)\n }\n }\n })\n if(data[0][0] < old){\n data.forEach(d => {\n d.shift() \n })\n }\n chart.setData(data);\n\n \n}\t\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n addChartPoint(msg.payload,msg.topic,chart) \n }\n });\n})(scope);\t\n\t\n\t\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":750,"y":880,"wires":[[]]},{"id":"8add092.e71a0f8","type":"ui_template","z":"c0ddb509.b04f48","group":"304730.1de8e8d","name":"CSS","order":2,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"/uplot/uPlot.min.css\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":750,"y":840,"wires":[[]]},{"id":"80084862.4b7958","type":"inject","z":"c0ddb509.b04f48","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"4","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":840,"wires":[["ce98f28c.2c44b","d1cbaf33.01dbd","199fd4f5.95db2b"]]},{"id":"ce98f28c.2c44b","type":"delay","z":"c0ddb509.b04f48","name":"","pauseType":"random","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1000","randomLast":"3000","randomUnits":"milliseconds","drop":false,"x":300,"y":880,"wires":[["1f5e593f.7a4a57"]]},{"id":"d1cbaf33.01dbd","type":"delay","z":"c0ddb509.b04f48","name":"","pauseType":"random","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"200","randomLast":"400","randomUnits":"milliseconds","drop":false,"x":300,"y":920,"wires":[["dff1d044.a229b"]]},{"id":"199fd4f5.95db2b","type":"change","z":"c0ddb509.b04f48","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"first","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":840,"wires":[["c605cc0d.8e445"]]},{"id":"1f5e593f.7a4a57","type":"change","z":"c0ddb509.b04f48","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"second","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":880,"wires":[["c605cc0d.8e445"]]},{"id":"dff1d044.a229b","type":"change","z":"c0ddb509.b04f48","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"third","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":920,"wires":[["c605cc0d.8e445"]]},{"id":"c605cc0d.8e445","type":"random","z":"c0ddb509.b04f48","name":"","low":1,"high":"5000","inte":"true","property":"payload","x":620,"y":880,"wires":[["d03aad8c.fcdf9"]]},{"id":"304730.1de8e8d","type":"ui_group","name":"Chart","tab":"ebf9c239.14c15","order":3,"disp":true,"width":"15","collapse":false},{"id":"ebf9c239.14c15","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [10 May 2021 23:22 UTC](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453/2 "2021-05-10T23:22:56Z")

</div>

I'm getting an unknown node type random:

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

---

<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:** [11 May 2021 00:10 UTC](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453/3 "2021-05-11T00:10:47Z")

</div>

you need to install [node-red-node-random (node) - Node-RED](https://flows.nodered.org/node/node-red-node-random)

---

<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:** [10 June 2021 00:11 UTC](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453/4 "2021-06-10T00:11:08Z")

</div>

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