Use msg.payload.data in template inside <script> tag

General
1

I'm starting working in dashboard.
I'm able to print out msg. payload vars inside html / div tags.

My question how I can use msg.paylod vars inside js script tags.
Looks like simple {{msg.payload.data[0]}} will not work.
I read the help for template but still not clear for me.

I'd like to achive this

<script>
// works fine
 //series: [3.4, 0, 3.5, 6.944 ],   
 //labels: ["Bat geladen", "Grid Verkauf", "PV Selbstverbrauch", "PV heute"],
   
// don't work
 series: {msg.payload.series},
 labels: {{msg.palette.labels}},

</script>

msg. payload
image

any suggestions are welcome.

2

is it the same issue as this ?

3

If it is the regular template (the orange node), then no, that wont work.

But the answer is on the forum - hundreds of times and in the mustache docs

In short, {{payload.data.0}}

If on the otherhand, you are refering to the ui-template node (the light blue node), then the built in help tells you to use scope and watch

Tons of examples on the forum too:

4

Yes @Steve we talk about the blue template :slight_smile:

sorry may I was misunderstandable. It is not about data it is about, how can I pass values (array) from payload.series + payload.labels to js script tag (apex chart option section) to achive this:

series: [3.4, 0, 3.5, 6.944 ],

as mention before msg.payload.series hold as array the values [3.4, 0, 3.5, 6.944 ].

Sorry I do not understand the scope thing.

5

that is exactly what the 3 examples I gave you do - that pass something from server side (node-red runtime) to the template in the client side (aka dashboard) - you have to determine what to do with the data.

Pick any one of the examples I offered and add alert(msg) inside the watch and you will see that data is being passed from Node-RED to Dashboard.

If you want a particular example based on apex - forum search reveals some clues

6

Thanks Steve, finally I figgured the issue out.

When checking the chart object in chrome console I found out the data already there but it looks like the chart renderer was starting before and did not update the chart.

Now I encapsulate all in the scope.#whatch and this did the job :slight_smile:

just in case it is valuable for some one:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="apex1"></div>
<script>
var options = {};

(function(scope) {
    scope.$watch('msg', function(msg) {
    // new message received
    if(msg) {
        var options = {
            chart: { type: 'donut',
            height: 350,
            foreColor: '#fff' },
            theme: { palette: 'palette1'},
            series: msg.payload.series, 
            labels: msg.payload.labels, 
            legend: {
            position: "left",
            verticalAlign: "middle",
            }
        };

        var chart = new ApexCharts(document.querySelector("#apex1"), options);
        chart.render();
        console.log(chart);
        }
    }); 
})(scope);  
    
</script>
1 Like
7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.