Create Chart from mySQL Data

the live data should just be the number so

msg.topic = "temperature";
msg.payload = Number(msg.payload);
return msg;

The problem is that the live data starts a new line, instead of 'picking up' the loaded data:

image

something must be slightly different then - and are you sure not other data point is sent as payload ?
When sending the setup you just need to send the array - no need for topic there.

Do you have any example that I could follow or test? To compare with mine.
Thanks

https://flows.nodered.org/flow/92920b4fd450bf92a3035e061947daa0

Can you post a debug showing the message you send to populate the chart please? Make sure all the objects are expanded.

function newValue(){
 msg.topic = "esp32/temperature";
 msg.payload = Number(msg.payload);
 return msg;
}

function valuesToArr(){
 var series =["esp32/temperature"];
 var labels = ["esp32/temperature"];
 var data = [];

 var i, len, string;

 for (i = 0, len = msg.payload.length, string = ""; i < len; i++) {
  data.push({"x":Date.parse(msg.payload[i].created_at), "y":Number(msg.payload[i].temp)});
 }

 data = [data];

 msg.payload = [{series, data, labels}];
 msg.topic = "esp32/temperature";

 return msg;
}

Output (when restart the nodered server):
image

1 Like

As an experiment try putting a 10 second delay node in series with the live data (I know that is not a valid final solution, just an experiement). I suspect what may be happening is that the first live value is getting added in before the historical data has been added, though not certain.
If that doesn't fix it then please do as I previously asked, which is to show us the debug output of the historical data actually being sent to the chart.

Delay does not work.
Also historic data is load on startup (0.1sec). Live data is coming each 5sec.
The debug from historical data.
image

Looking at the chart it seems that the first Live data point is 'connected' to the first point of historical data. But it should be connected to last point.

Ok I found the problem.
In the query it was "ORDER BY created_at DESC".
Even the plotting of the chart was correct, the first live data point was connecting with the actual date last point, that in this case was the first point.
Interesting that the plotting is done correctly but the connection between points gets messed up.

Seems to be a common ChartJS problem/topic.

Thanks for the support :smile:

1 Like

That was one of the reasons why I asked for a fully expanded debug output, in order to check the ordering of the timestamps. The first live sample draws a line from the last received data point to the new value. Since the last received data was from the earliest timestamp that is where it draws the line from. The behaviour you are seeing is as expected.

If you're working with a large database you earliest date may be out of the range you want shown. Reverse the data using a decremented loop to create an array to use in msg.payload.newLoop

Can you kindly suggest any guid to import data from mysql to Node-Red.

@rpr - Welcome to the forum. Based on your question, I would suggest you spen an hour and watch the Node-RED Essentials videos to get a feel for node-red.

You will have to create a flow to do this. You will need to use the mysql node (node-red-node-mysql) and send it a mySQL query to retreive the data and then decide what to do wth it.

2 Likes

Thank you Sir, Till now I have used node red to send data to kudal and now I am trying to retrieve it... Thanks for your help

Thank you Sir, I did what you said and it help me to retrieve data.
Unfortunately later i found i didn't need but still it will be useful in future so Thank you.

Your code is a great suggestion, before that, I couldn't figure out what to do to extract the data from the sql data string sent back and then how to format it to give the chart.

Thank you!