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

**URL:** https://discourse.nodered.org/t/how-to-get-e-charts-to-display-in-node-red-with-sql-query/77801
**Category:** General
**Tags:** node-red-dashboard
**Created:** [21 April 2023 16:57 UTC](https://discourse.nodered.org/t/how-to-get-e-charts-to-display-in-node-red-with-sql-query/77801 "2023-04-21T16:57:45Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![RedNod](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RedNod](https://discourse.nodered.org/u/RedNod)
#### Post date: [21 April 2023 16:57 UTC](https://discourse.nodered.org/t/how-to-get-e-charts-to-display-in-node-red-with-sql-query/77801/1 "2023-04-21T16:57:45Z")

</div>

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.

```auto
<!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>

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [20 June 2023 16:58 UTC](https://discourse.nodered.org/t/how-to-get-e-charts-to-display-in-node-red-with-sql-query/77801/2 "2023-06-20T16:58:21Z")

</div>

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