Plotly in node-red

Question

I am trying to generate a simple plotly chart from node red using template node. Plotly correctly plots if x and y are static values, but as I use payload to get data into the plot variables it does not print. I have checked and the data is correctly transferred. Please see the code. \

Code in Mustache node

The below code works and creates a chart correctly.

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>

var trace1 = {
  x:[1,2,3],//[{{payload.Temperature}}],
  y:[1,2,3],//[{{payload.Temperature}}],
  //mode: 'lines',
  connectgaps: true
};

var data = [trace1];

var layout = {
  title: 'Connect the Gaps Between Data',
  showlegend: true
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

</script>
</body>

The below code doesn't work and instead plotly shows just coordinates.

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>

var trace1 = {
  x:[{{payload.time}}],
  y:[{{payload.Temperature}}],
  mode: 'lines',
  connectgaps: true
};

var data = [trace1];

var layout = {
  title: 'Connect the Gaps Between Data',
  showlegend: true
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

</script>
</body>

NOTE: data as viewed in the debug window is ans follows

`

x:[Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:21 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:46:30 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:42:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:41:17 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:23 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:36:17 GMT-0400 (Eastern Daylight Time)],
  y:[26.76,27.76,27.51,27.11,26.76,27.15,26.75,27.9,27.77,27.23],

`

what am I doing wrong, thank you.

SteveR · Answer 1 · 2019-10-10T00:48:23.250

1

You need to look at how the dates are converted to locale strings... simply embedding those into javascript rendered code does not generate valid Javascript code. Take this code snippet that you put into the comments:

var trace1 = {
    x: [Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:21 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:46:30 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:42:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:41:17 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:23 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:36:17 GMT-0400 (Eastern Daylight Time)],
    y: [26.76,27.76,27.51,27.11,26.76,27.15,26.75,27.9,27.77,27.23],
    mode: 'lines',
    connectgaps: true
};

That property x is supposed to be an array of either date strings ...

    x: ["Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)", "Tue Oct 08 2019 12:47:28 GMT-0400 (Eastern Daylight Time)", ...etc... ],

... or an array of numbers representing epoch millis ...

    x: [1570553278000, 1570553248000, ...etc... ],

Did you use a database query to get those x values? If so, I would use some sql function in the query to output the internal unix time (sec.) * 1000 to get millis. Otherwise, you will have to do the conversion in your javascript code before the template node, using Date.parse("Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)") on each element in the array... very inefficient.

edited Oct 10 '19 at 00:48

answered Oct 09 '19 at 00:21

SteveR

1,015
8
12

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] – Ali Oct 09 '19 at 11:11
That's what I expected - the generated code is not valid JavaScript. Those bare date strings will NOT be interpreted as an array of date objects. – SteveR Oct 09 '19 at 14:23
I saw the conversion at https://stackoverflow.com/questions/5619202/converting-a-string-to-a-date-in-javascript Let me try. Thanks a lot. – Ali Oct 09 '19 at 15:15
I used the code on the above post ... it actually gives me this output Wed Sep 17 2014 00:00:00 GMT-0400 (Eastern Daylight Time) – Ali Oct 09 '19 at 17:06
which is the same? what would make it a valid javascript and how do convert it? I also tried W3
JavaScript new Date()

new Date() creates a new date object with the current date and time:

Sun Sep 08 2019 08:09:00 GMT-0400 (Eastern Daylight Time) Same result. What is avalid date object and how to I convert the strip to it? thanks – Ali Oct 09 '19 at 17:36
Since, I have tried various ways to make this work unfortunately it doesn't. Finally I converted data into integer (milliseconds) using .getTime() and this is what the debug log looks like var trace1 = { x:[1570655577000,1570655548000,1570655479000,1570655277000,1570655179000,1570654977000,1570654948000,1570654879000,1570654677000,1570654665000], y:[22.26,24.91,23.31,22.43,23.42,22.56,24.83,23.33,22.39,24.68], mode: 'lines-markers', connectgaps: true }; data seems fine however, plotly does not plot ... but if just cut and past from debug window it works ... – Ali Oct 10 '19 at 02:49
so if I replace x:[{{payload.time}}], y:[{{payload.Temperature}}], with debug log x:[1570655577000,1570655548000,1570655479000,1570655277000,1570655179000,1570654977000,1570654948000,1570654879000,1570654677000,1570654665000], y:[22.26,24.91,23.31,22.43,23.42,22.56,24.83,23.33,22.39,24.68], it works ... so for some reason plotly does not process the data in array variable but it does static values in mustache template ? ... Can somebody explain what might be going on? thanks – Ali Oct 10 '19 at 02:49

Plotly in node-red

1 Answers1

JavaScript new Date()