Template node in UI Dashboard does not show ECharts?

Dashboard
1

I am trying to use EChart javascript component in the template node of UI Dashboard. The simple test code is as follows. The EChart component does not display in Web UI.
Is the problem due to the usage of ng-style or something else?

Test Start 
<script type="text/javascript">
    var dom = document.getElementById("divChart");
    var myChart =null;
    myChart = echarts.init(dom);
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
Test End
2

Are you seeing any errors in the browser dev console?

3

presumably you have loaded he echarts library via another global template ?

4

It should work if you :

1- Load the echarts library. If you are not loading it somewhere in you flow just add a new UI_template node with below config. You need to specify the right path to you static folder in Node-RED where you store the file / library echarts.min.js.

r-01

2- Add the missing div element in you ui_template:

<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divChart" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    var dom = document.getElementById("divChart");
    var myChart =null;
    myChart = echarts.init(dom);
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
</body>

Voila !

r-02
r-02.png727Ă—442 9.23 KB

1 Like
5

The problem is in the UI Template node from "node-red-dashboard", as in the attaced image.
The EChart object seems to be created correctly.

node
node.png1152Ă—860 44.1 KB

6

Thanks Andrei.
I tryied again with: style="width: 300px;height:200px;"
then the Echart can be shown for my testing. So, the original problem was related to CSS style.

1 Like
7

hi. do you know how to set echart value by msg.payload?