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>