Possibility to delete the collected values in a fully configurable charts in a dashboard template node

[Jackcat]

Hello Node-Red Community,

I have a problem that I have been struggling with for a few days now and would like your advice.

I wanted to create a chart with X and Y axis labels in the dashboard. After ruling out the possibility of using a normal "chart node", I came across colinl's post "Using Chart.js to show fully configurable charts in a dashboard template node" (https://flows.nodered.org/flow/c3dc75c47323a2754f5285225bce64b5) in the Node-Red forum.

With the help of a "dropdown-node" I could read in values from different sources, under the topic "Sin".

My problem is the following:

When I change the selection in the "dropdown", the values of the new source are shown before the values of the old sources.

Unfortunately I have no experience with Java and only little experience with Node-Red.

Is there any way to insert a function in the code provided in the forum or perhaps change a value dynamically with a flow.object so that all the old values are removed in the diagram and only the new values are shown?

Thank you.

[Steve-Mcl]

This demo should get you started...

Problem with X/Y graph with ui_graph

Here is a scatter demo using chart.js... [4CJBilIHJz] [{"id":"acbdb34e9e6d9720","type":"change","z":"553814a2.1248ec","name":"random x/y","rules":[{"t":"set","p":"payload","pt":"msg","to":"(\t $minimum := 1;\t $maximum := 100;\t $x := $round(($random() * ($maximum-$minimum)) + $minimum, 0);\t $y := $round(($random() * ($maximum-$minimum)) + $minimum, 0);\t {\t \"x\": $x,\t \"y\": $y\t }\t)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":fals…

PS: AFAIK, there is no reason the built in chart cannot be used

[Colin]

@Jackcat

I came across colinl's post "Using Chart.js to show fully configurable charts in a dashboard template node"

Wow, that was nearly 6 years ago! I am amazed it is that long ago. I am pretty sure the current dashboard chart node will do anything that flow did.

[Jackcat]

Thank you for the feedback,

using the "normal" "chart-node" does allow you to delete all displayed values by sending "", but not to display axis labels. I know I could also just display the axis label above the chart as the chart label, but that doesn't look scientific enough.
I have therefore resorted to the code from "colinl". Since this enables axis labelling with time information on the X-axis.
Unfortunately I can't see through the code to find out on my own what I have to insert in what place in order to also delete all values with a "", as with the "normal" "chart-node".

Thanks for the help.

[Steve-Mcl]

@Jackcat

Unfortunately I can't see through the code to find out on my own what I have to insert in what place in order to also delete all values with a "", as with the "normal" "chart-node"

The demo i posted a link to does that when the "CLEAR" button is pressed. In case you cannot see the wood for the trees...

1. the CLEAR button sends an empty array [] in msg.payload with a msg.topic of set
2. In the template named scatter, the msg is seen to have a topic of set so then uses the payload (which if you remember is an empty array []) to set the chart data.

        if(msg.topic == "set") {
          myChart.data.datasets[0].data = [...msg.payload];
          myChart.update();
        }

Or to simplify, it could have been a separate "clear" action e.g...

        if(msg.topic == "clear") {
          myChart.data.datasets[0].data = [];
          myChart.update();
        }