How to get e charts to display in Node Red with SQL query

General
1

Hi , I am new to NR and struggling to get a simple e chart to display in node red with an sql query.
I am not sure what I am doing wrong in the template.

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="chart1" style="width: 400px; height: 200px;"></div>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

    <script>
        (function(scope) {
    var timer = setInterval(function() {
    if (!window.echarts) return;
    clearInterval(timer);
     
    var myData;
     
    var chart1 = document.getElementById('chart1');
    var myChart = echarts.init(chart1);
        scope.$watch('msg', function (msg) { //watch for an incoming NR msg
        if (msg) {
        myData = msg.payload;
    myChart.setOption( 
        //add e chart
        { 
        xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7']
        },
        yAxis: {
        type: 'value' ,
        min: 500, max: 10000 ,
        axisLine: { onZero: false }
        },
        series: [
        {
        data: [myData.payload[0].rd, myData.payload[1].rd , myData.payload[2].rd , myData.payload[3].rd , myData.payload[4].rd , myData.payload[5].rd , myData.payload[6].rd] ,
        type: 'bar',
        smooth: true
        }
        ]
        });
        };
        });
        }, 100);
        })(scope);

    </script>
</body>

</html>
2

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