0

I am pretty new to both Node-red and HTML, I hope I can get help on this forum. I have an HTML script in a core template node. Upon a GET request, the script renders a line graph from data array. The data is saved in a flow context array var by another node, and I need the HTML script node to read this data and plot it. Everything works fine on simulated data array that I generate "inside" the HTML script, but I could not figure out how to get the actual data from the flow context var (please see where the TODO is). Thanks in advance for any help.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var options =  {
    exportEnabled: true,
    animationEnabled: true,
    animationDuration: 200,
    theme: "light2",
    title :{
        text: "Simple Line Chart"
    },
    axisY: {
        includeZero: false
    },
    data: [{
        type: "spline",
        indexLabelFontSize: 16,
        dataPoints: []
    }]
};

var xVal = 0;
var yVal = 100;
var updateInterval = 2000;

var WaveData = [];
// TODO temporary random data
var createWaveData = function () {
    var srcData = flow.get('Pressure') || [];
    WaveData = srcData;
/*  WaveData = [];
    var count = 50;
    for ( var j = 0; j <count; j++) {
        yVal = yVal + Math.round(5 + Math.random() *(-5-5));
        WaveData.push(yVal);
    }*/
}

// when plotting next WaveData, let it start from x = 0
var updateChart = function (cnt) {
    createWaveData();
    options.data[0].dataPoints = [];
    for (var j = 0; j < cnt; j++) { 
        yVal = WaveData[j];
        options.data[0].dataPoints.push({y: yVal});
    }
    (new CanvasJS.Chart("chartContainer", options)).render();

};

setInterval(function(){ updateChart(WaveData.length) }, updateInterval); 

}

</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width:100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</body>
jsotola
  • 2,238
  • 1
  • 10
  • 22
user13160236
  • 1
  • 1
  • 5

1 Answers1

0

The short answer is, you don't. There is no way to directly access the Node-RED context from within your page.

But you can access it indirectly, you have 2 choices:

  1. Use the template node to include the current state of the context variable in the page when it's loaded via the http-in/http-reponse nodes. This will give you a snapshot of the data, but it will not update over time.

  2. Set up a connection back to Node-RED to refresh the value. There are 2 different ways to approach this.

    i. Add a second http-in/http-response flow that returns the content of the context variable and make an AJAX style call to it each time you want to refresh the chart.

    ii. Use the websocket-out node to set up a websocket connection to the page that can then send live updates to the page when ever the context variable is updated. This means the page will always use the latest data.

A combination of both these approaches will mean that you get the historical data when the page first loads and live updates.

You should also look at the node-red-dashboard collection of nodes, which may do this for you.

hardillb
  • 54,545
  • 11
  • 67
  • 105
  • appreciate the detailed answer, it is clear to me now. Can I make this HTML template node receive the data in msg.payload from another node? – user13160236 Apr 06 '20 at 17:43
  • OK. Just to clarify, I meant a Template node not the Dashboard UI Template. So what I need is something similar to this post https://stackoverflow.com/questions/42361699/how-to-send-msg-payload-from-function-node-to-template-node. I failed to figure out how to do the same in my script – user13160236 Apr 06 '20 at 18:13
  • In that case ask a new question and include what you've tried and somebody will help you fix it. Also https://stackoverflow.com/help/someone-answers – hardillb Apr 06 '20 at 19:06
  • As I mentioned in my first reply, you did answer the question sufficiently and in details. You are right about the subsequent question it requires a separate post. – user13160236 Apr 06 '20 at 19:31