# Plotly Chart from Mustache template node

**URL:** <https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483>\
**Category:** Dashboard\
**Created:** [8 October 2019 20:52 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483 "2019-10-08T20:52:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aliadalal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aliadalal/32/8066_2.png) [@aliadalal](https://discourse.nodered.org/u/aliadalal)\
**Post date:** [8 October 2019 20:52 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483/1 "2019-10-08T20:52:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 October 2019 08:18 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483/2 "2019-10-09T08:18:11Z")

</div>

With a suggestion provided by Steve over there as well.

---

<div class="post-metadata">

**Author:** ![aliadalal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aliadalal/32/8066_2.png) [@aliadalal](https://discourse.nodered.org/u/aliadalal)\
**Post date:** [9 October 2019 11:16 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483/3 "2019-10-09T11:16:03Z")

</div>

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],

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [10 October 2019 03:13 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483/4 "2019-10-10T03:13:50Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 October 2019 17:42 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483/5 "2019-10-10T17:42:03Z")

</div>

There are some examples of using $watch here:

> **[Node-RED Dashboard Template Examples (AngularJS)](https://it.knightnet.org.uk/kb/nr-qa/dashboard-template-examples/)**
>
> Some examples of using AngularJS with the Node-RED Dashboard.
> Not all features of Angular are accessible via the Dashboard.

---

<div class="post-metadata">

**Author:** ![aliadalal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aliadalal/32/8066_2.png) [@aliadalal](https://discourse.nodered.org/u/aliadalal)\
**Post date:** [11 October 2019 12:27 UTC](https://discourse.nodered.org/t/plotly-chart-from-mustache-template-node/16483/6 "2019-10-11T12:27:09Z")

</div>

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