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.
1 answers
solution1
2 2019-10-09 00:21:29
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.