Plotly Chart from Mustache template node

Dashboard
1

Please refer to the https://stackoverflow.com/questions/58290852/plotly-in-node-red
unable to get this right.
Thanks

2

With a suggestion provided by Steve over there as well.

3

This is my response to SteveR ... the output in the window appears to be an array ... and is also consistent with what I have read about mustache format.

Hi Steve, I have checked the output in the debug window, its also consistent with node-red mustache doc. here is a sample output in the debug window.

var trace1 = {
x: [Wed Oct 09 2019 07:02:58 GMT-0400 (Eastern Daylight Time),Wed Oct 09 2019 07:01:19 GMT-0400 (Eastern Daylight Time),Wed Oct 09 2019 06:57:57 GMT-0400 (Eastern Daylight Time)],
y:[65.2,65.9,65.1],

4

I think there is a better approach that what you are trying to do... but it involves using the Angular scope to watch for a msg containing your data, which then calls the `plotly.newPlot(...) method to render the data.

I've done it in the past, but I'm having trouble finding a working example. If you can post a flows with just a couple nodes (inject data -> change or function -> ui_template) that shows what you have tried, I'll see if I can get it working...

5

There are some examples of using $watch here:

6

Thanks, I have not used Angular. But I'll dig in to find out ...
Here is the function node that gets data from MySQL node

var records = msg.payload;

var TH = { "time": , "Temperature" : , "Humidity" : };

for (var i =0; i < records.length; i++) {
var lastseen = new Date(records[i].receivedAt);
TH.Temperature.push( records[i].dataField2 );
TH.Humidity.push( records[i].dataField3 );

lastseenpayload=lastseen.getTime(); // converted to integer as I could not get date obj to work.
TH.time.push( lastseenpayload );

}

msg.payload = TH;

return msg;

Template node