Data displayed on chart

Hello!
I need some help wiith some changes, is there a way to always display the values that were collected on my chart? So I would see every value without hovering over the point.

Another thing, can I change de name polling to something else?

Captura de tela 2024-08-02 170700

Are you using node-red-dashboard, AKA Dashboard 1 or @flowfuse/node-red-dashboard AKA Dashboard 2 (so called to avoid confusion :grinning: )?

In node-red-dashboard, the "polling" which is shown when you mouse-over a data point comes from msg.topic. You can use a change node to make this more meaningful.

I don't think that you can make the "tooltip" display all the time for all points, usually that would result in a confusing mess. But maybe something could be done with CSS?

You could put a table below the chart and list the data points there.

I'm using Dashboard 3.6.5, I don't really know if thats 1 or 2, but I suspect is this: node-red-dashboard.
I kind of new with red node, how do I use the change node with the chart to change the msg.topic?
I tried to inject a msg.topic with the name I want, but it did not work.

I don't know anything about your Node-red flow except for the bit shown in your image above.
You do seem to have a lot of different wires leading in to the chart node.

There are two different ways to use the chart node, either sending one data item at a time or else sending the data for an entire chart (eg historical data extracted from a database)

It is important to realise that data in Node-red is handled one message at a time, without reference to other messages.
So when you inject msg.topic = 'FRANGOS' that does arrive at the chart node, but as soon as the node has done what it can with the message, it is discarded.
topic does not retain it's value like a variable in a traditional programming language.
When the next message arrives, it either has it's own meg.topic or else a reference to msg.topic gets no value.
Every message has to carry with it all of the data it needs.

Sorry, it's not easy to explain but it is vital to understand this. Every message is handled entirely by itself.

So your function node which is sending {"topic": "polling", "payload": 890} has to change the topic for every message it sends - msg.topic = 'FRANGO'
Or you have to insert a change node into the wire from function to chart which changes msg.topic.

ps Frango is Brasilian Portuguese for chicken?

If you are interested in a little customization, go through this post.

[{"id":"a511ccb853b13640","type":"group","z":"f0ae706f0b39513f","name":"","style":{"label":true},"nodes":["8c9886312704c689","94892351e8e1ca4f","dae53b72edc705e4","7ec1374684484253","9747d50d74971dc9"],"x":184,"y":19,"w":732,"h":262},{"id":"8c9886312704c689","type":"inject","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","props":[{"p":"payload"},{"p":"charttitle","v":"Title Goes here","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Yield\",\"type\":\"line\",\"data\":[{\"x\":\"2022-05\",\"y\":97.92},{\"x\":\"2022-06\",\"y\":98.52},{\"x\":\"2022-07\",\"y\":98.88},{\"x\":\"2022-08\",\"y\":98.66},{\"x\":\"2022-10\",\"y\":99.47},{\"x\":\"2022-11\",\"y\":98.32},{\"x\":\"2022-12\",\"y\":98.89},{\"x\":\"2023-01\",\"y\":98.7},{\"x\":\"2023-02\",\"y\":99.91},{\"x\":\"2023-03\",\"y\":98.72},{\"x\":\"2023-04\",\"y\":96.91},{\"x\":\"2023-05\",\"y\":96.2},{\"x\":\"2023-06\",\"y\":100.1},{\"x\":\"2023-07\",\"y\":98.83}]},{\"name\":\"Total Cases\",\"type\":\"column\",\"data\":[{\"x\":\"2022-05\",\"y\":6993},{\"x\":\"2022-06\",\"y\":8585},{\"x\":\"2022-07\",\"y\":9532},{\"x\":\"2022-08\",\"y\":8062},{\"x\":\"2022-10\",\"y\":7761},{\"x\":\"2022-11\",\"y\":7778},{\"x\":\"2022-12\",\"y\":4740},{\"x\":\"2023-01\",\"y\":6763},{\"x\":\"2023-02\",\"y\":5095},{\"x\":\"2023-03\",\"y\":8025},{\"x\":\"2023-04\",\"y\":6913},{\"x\":\"2023-05\",\"y\":5207},{\"x\":\"2023-06\",\"y\":6297},{\"x\":\"2023-07\",\"y\":8582}]},{\"name\":\"Loss Qty\",\"type\":\"area\",\"data\":[{\"x\":\"2022-05\",\"y\":-1602.6},{\"x\":\"2022-06\",\"y\":-1391},{\"x\":\"2022-07\",\"y\":-1162.4},{\"x\":\"2022-08\",\"y\":-1180.4},{\"x\":\"2022-10\",\"y\":-443.2},{\"x\":\"2022-11\",\"y\":-1435.6},{\"x\":\"2022-12\",\"y\":-572},{\"x\":\"2023-01\",\"y\":-959.6},{\"x\":\"2023-02\",\"y\":-49},{\"x\":\"2023-03\",\"y\":-1126},{\"x\":\"2023-04\",\"y\":-2381.83},{\"x\":\"2023-05\",\"y\":-2218.92},{\"x\":\"2023-06\",\"y\":65.26},{\"x\":\"2023-07\",\"y\":-1098.57}]}]","payloadType":"json","x":280,"y":240,"wires":[["94892351e8e1ca4f"]]},{"id":"94892351e8e1ca4f","type":"ui_template","z":"f0ae706f0b39513f","g":"a511ccb853b13640","group":"a2d9ac75438797b7","name":"Apex-Chart with Multiple Y Axis","order":1,"width":30,"height":8,"format":" <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n<div id=\"chart\"></div>\n\n<script>\n\n(function(scope)\n                {scope.$watch('msg', function(msg)\n                    {if (msg){var options =\n                        {series: msg.payload,\n                        chart:{type: 'area',stacked: true,height: 355,background:'#000',zoom:\n                                {type: 'x',enabled: true,autoScaleYaxis: true},\n                            toolbar:{autoSelected: 'zoom'}},\n                        dataLabels: {enabled: true,enabledOnSeries: [0,1],formatter: function (val, opts) {return val},},\n                        markers:{size: 2,},\n                        theme: {mode: 'dark'},\n                        colors: ['#FA2E2E', '#FF9800', '#546E7A', '#E91E63', '#FF9800'],\n                \n                title: {text: msg.charttitle,align: 'center',margin: 10,offsetX: 0,offsetY: -10,floating: false,style: {fontSize:30,fontWeight: 'bold',fontFamily: undefined,color: 'yellow'},},\n                stroke:{width: [8,0,2],curve: ['smooth', 'smooth', 'smooth']},\n                yaxis:[\n                {labels:{formatter: function (val){return val.toFixed(1);},},title: { text: \"Title-1\", style: {color: \"#FA2E2E\"}},},\n                {labels:{formatter: function (val){return val.toFixed(0);},},title: { text: \"Title-2\", style: {color: \"#FF9800\"}},},\n                {labels:{formatter: function (val){return val.toFixed(1);},},title: { text: \"Title-3\", style: {color: \"#546E7A\"}},},],\n\n                xaxis: {lines: {show: false,},type: 'gradient',datetimeUTC: false,labels: {format: 'dd/MMM HH:mm',},},\n                tooltip: {enabled: true,style: {fontSize: '12px',fontFamily: undefined},x: {show: true,format: 'dd/MMM HH:mm',},\n                row: {colors: undefined,opacity: 0.5},\n                column: {colors: undefined,opacity: 0.5},\n                padding: {top: 0,right: 0,bottom: 0,left: 0},},\n                    grid: {show: true,borderColor: '#ffffff',strokeDashArray: 0,position: 'back',\n                    xaxis: {lines: {show: false}},   \n                    yaxis: {lines: {show: false}},\n                    row: {colors: undefined,opacity: 0.5},  \n                    column: {colors: undefined,opacity: 0.5},  \n                    padding: {top: 0,right: 0,bottom: 0,left: 0},}};\n\n\nsetTimeout( ()=> {if(scope.chart){scope.chart.updateOptions(options)}else {scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);scope.chart.render();}}, 1000)}});})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":760,"y":120,"wires":[[]]},{"id":"dae53b72edc705e4","type":"ui_button","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","group":"a2d9ac75438797b7","order":2,"width":"3","height":"1","passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":120,"wires":[["9747d50d74971dc9"]]},{"id":"7ec1374684484253","type":"ui_button","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","group":"a2d9ac75438797b7","order":3,"width":"3","height":"1","passthru":false,"label":"Clear","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"[]","payloadType":"json","topic":"topic","topicType":"msg","x":260,"y":60,"wires":[["94892351e8e1ca4f"]]},{"id":"9747d50d74971dc9","type":"change","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"name\":\"Series-1\",\"type\":\"line\",\"data\":[{\"x\":\"2022-05\",\"y\":97.92},{\"x\":\"2022-06\",\"y\":98.52},{\"x\":\"2022-07\",\"y\":98.88},{\"x\":\"2022-08\",\"y\":98.66},{\"x\":\"2022-10\",\"y\":99.47},{\"x\":\"2022-11\",\"y\":98.32},{\"x\":\"2022-12\",\"y\":98.89},{\"x\":\"2023-01\",\"y\":98.7},{\"x\":\"2023-02\",\"y\":99.91},{\"x\":\"2023-03\",\"y\":98.72},{\"x\":\"2023-04\",\"y\":96.91},{\"x\":\"2023-05\",\"y\":96.2},{\"x\":\"2023-06\",\"y\":100.1},{\"x\":\"2023-07\",\"y\":98.83}]},{\"name\":\"Series-2\",\"type\":\"column\",\"data\":[{\"x\":\"2022-05\",\"y\":6993},{\"x\":\"2022-06\",\"y\":8585},{\"x\":\"2022-07\",\"y\":9532},{\"x\":\"2022-08\",\"y\":8062},{\"x\":\"2022-10\",\"y\":7761},{\"x\":\"2022-11\",\"y\":7778},{\"x\":\"2022-12\",\"y\":4740},{\"x\":\"2023-01\",\"y\":6763},{\"x\":\"2023-02\",\"y\":5095},{\"x\":\"2023-03\",\"y\":8025},{\"x\":\"2023-04\",\"y\":6913},{\"x\":\"2023-05\",\"y\":5207},{\"x\":\"2023-06\",\"y\":6297},{\"x\":\"2023-07\",\"y\":8582}]},{\"name\":\"Series-3\",\"type\":\"area\",\"data\":[{\"x\":\"2022-05\",\"y\":-1602.6},{\"x\":\"2022-06\",\"y\":-1391},{\"x\":\"2022-07\",\"y\":-1162.4},{\"x\":\"2022-08\",\"y\":-1180.4},{\"x\":\"2022-10\",\"y\":-443.2},{\"x\":\"2022-11\",\"y\":-1435.6},{\"x\":\"2022-12\",\"y\":-572},{\"x\":\"2023-01\",\"y\":-959.6},{\"x\":\"2023-02\",\"y\":-49},{\"x\":\"2023-03\",\"y\":-1126},{\"x\":\"2023-04\",\"y\":-2381.83},{\"x\":\"2023-05\",\"y\":-2218.92},{\"x\":\"2023-06\",\"y\":65.26},{\"x\":\"2023-07\",\"y\":-1098.57}]}]","tot":"json"},{"t":"set","p":"charttitle","pt":"msg","to":"Place Chart Title Here","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":120,"wires":[["94892351e8e1ca4f"]]},{"id":"a2d9ac75438797b7","type":"ui_group","name":"CHART","tab":"0a734ef04f43c77a","order":2,"disp":false,"width":"30","collapse":false,"className":""},{"id":"0a734ef04f43c77a","type":"ui_tab","name":"APEX","icon":"dashboard","order":18,"disabled":false,"hidden":false}]

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