ECharts: set up/save input array

'Cause that's what you used in your original post. :wink:

I had specific values specified in the template (basically for testing) because I couldn't figure out how to inject them via msg (from a function node). Does it make any difference that the values are specified even though we're injecting them?

Just to clarify, I have this chart template and function node. Still not able to generate the chart.

image

[
    {
        "id": "731be69f02893ae2",
        "type": "ui_template",
        "z": "7f68a92fe68f3630",
        "group": "20d55a3df46c721c",
        "name": "bar 2",
        "order": 11,
        "width": "4",
        "height": "8",
        "format": "<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js\"></script>\n<body>\n    <!-- prepare a DOM container with width and height -->\n    <div id=\"divBar2\" style=\"width: 400px;height:320px;\"></div>\n\n<script type=\"text/javascript\">\n    var dom = document.getElementById(\"divBar2\");\n    var myChart =null;\n    myChart = echarts.init(dom);\n    option = null;\n\n    let profit = [[\"2\",1],[ \"3\",-1],[ \"4\",2.5],[ \"5\",1.5]]\n    \n    profit.forEach(element => {xAxisData = [...xAxisData, element[0]]\n                        seriesData = [...seriesData, element[1]]\n                       }\n           ) \n\n    let seriesData = []\n    let xAxisData = []\n    \n    msg.payload = [seriesData, xAxisData]\n\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            // Do something when msg arrives\n            title = msg.topic\n            option.title.text = title\n            option.series[0].data = msg.payload[0]\n            option.xAxis.data = msg.payload[1]\n            myChart.setOption(option, true)\n        }\n    })\n\noption = {\n    \ntitle: {\n    text: title\n  },\n  \n  grid: {\n    top:    30,\n    bottom: 30,\n    left:   '6%',\n    right:  '4%'\n  },\n  \n  xAxis: {\n    type: 'category'\n    data: xAxisData // ['1', '1.5', '2', '2.5', '3']\n  },\n\n  yAxis: {\n  type: 'value'      \n   splitLine: {lineStyle: {color:'#434651'}}     \n  },\n  \n  series: [\n    {\n      type: 'bar',\n      data: seriesData // [2, 3, -1, 1.5, -0.5],\n      itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'},\n    }\n      \n    }\n  ]\n};\n    if (option && typeof option === \"object\") \n    { \n        myChart.setOption(option, true); \n    }    \n</script>\n</body>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1048.0130615234375,
        "y": 281.0104064941406,
        "wires": [
            []
        ]
    },
    {
        "id": "73e8ac0b6df50b8c",
        "type": "function",
        "z": "7f68a92fe68f3630",
        "name": "function 10",
        "func": "\nmsg.payload = [[2,\"1\"],[ -1, \"1.5\"],[ 3, \"2\"],[  -2,\"2.5\"]]\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 880,
        "y": 280,
        "wires": [
            [
                "731be69f02893ae2"
            ]
        ]
    },
    {
        "id": "20d55a3df46c721c",
        "type": "ui_group",
        "name": "CENTER",
        "tab": "5e2e41aa.9826b",
        "order": 1,
        "disp": false,
        "width": "16",
        "collapse": false,
        "className": ""
    },
    {
        "id": "5e2e41aa.9826b",
        "type": "ui_tab",
        "name": "ANALYTICS",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

This works when eCharts gets loaded

[{"id":"731be69f02893ae2","type":"ui_template","z":"59fefa2a0cb3be7a","group":"20d55a3df46c721c","name":"bar 2","order":1,"width":16,"height":8,"format":"<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js\"></script>\n\n<body>\n    <!-- prepare a DOM container with width and height -->\n    <div id = \"divBar2\" style = \"width: 400px; height: 320px;\"></div>\n\n<script type=\"text/javascript\">\n\n    (function(scope) {\n        const dom = document.getElementById(\"divBar2\")\n\n        let myChart = null\n        myChart = echarts.init(dom)\n\n        let option = {}\n        let title = 'Bar Chart'\n\n       scope.$watch('msg', function(msg) {\n              // No error checking for properties\n            if(msg) {\n                let chartData = getData(msg.payload)\n                // Do something when msg arrives\n                title = msg.topic\n                option.title.text = title\n                \n                option.series[0].data = chartData[0]\n                option.xAxis.data = chartData[1]\n                \n                myChart.setOption(option, true)\n            \n            }\n        })\n\n        function getData(data) {\n            let seriesData = []\n            let xAxisData = []\n            data.forEach(element => { xAxisData = [...xAxisData, element[0]]\n                                      seriesData = [...seriesData, element[1]]\n                                    }\n                        )\n    \n            return [seriesData, xAxisData]\n\n        }\n\n        option = {\n            title: {\n                text: '',\n            },\n\n            grid: {\n                top: 30,\n                bottom: 30,\n                left: '6%',\n                right: '4%'\n            },\n\n            xAxis: {\n                type: 'category',\n                data: 0, // ['1', '1.5', '2', '2.5', '3']\n            },\n\n            yAxis: {\n                type: 'value' ,\n                splitLine: {lineStyle: {color:'#434651'}}\n            },\n\n            series: [\n                        {\n                            type: 'bar',\n                            data: 0 ,// [2, 3, -1, 1.5, -0.5],\n                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'}},\n                    \n                        }\n\n\n                    ]\n        }\n\n\n        if (option && typeof option === \"object\") {\n            myChart.setOption(option, true)\n\n        }\n\n    })(scope)\n    \n</script>\n</body>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1070,"y":360,"wires":[["d3ed4b214f2bcd52"]],"info":"<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js\"></script>\r\n<body>\r\n    <!-- prepare a DOM container with width and height -->\r\n    <div id=\"divBar2\" style=\"width: 400px;height:320px;\"></div>\r\n\r\n<script>\r\n\r\n(function(scope) {\r\n    const dom = document.getElementById(\"divBar2\");\r\n    let myChart = null;\r\n    //myChart = echarts.init(dom);\r\n    let option = null;\r\n    let title = 'Bar Chart'\r\n    /*\r\n  function getData(data) {\r\n    let seriesData = []\r\n    let xAxisData = []\r\n    data.forEach(element => { xAxisData = [...xAxisData, element[0]]\r\n                              seriesData = [...seriesData, element[1]]\r\n                            }\r\n                )\r\n    \r\n    return [seriesData, xAxisData]\r\n\r\n  }\r\n*/\r\n       scope.$watch('msg', function(msg) {\r\n              // No error checking for properties\r\n        if(msg) {\r\n            // Do something when msg arrives\r\n            //title = msg.topic\r\n            //option.title.text = title\r\n            scope.send(msg)\r\n            \r\n            //const chartData = getData(msg.payload)\r\n\r\n            //scope.send({chartData})\r\n\r\n            //option.series[0].data = chartData[0]\r\n            //option.xAxis.data = chartData[1]\r\n\r\n            //myChart.setOption(option, true)\r\n        }\r\n    })\r\n\r\n})(scope)\r\n\r\n/*\r\noption = {\r\n    \r\ntitle: {\r\n    text: title,\r\n  },\r\n  \r\n  grid: {\r\n    top:    30,\r\n    bottom: 30,\r\n    left:   '6%',\r\n    right:  '4%'\r\n  },\r\n  \r\n  xAxis: {\r\n    type: 'category',\r\n    data: 0, // ['1', '1.5', '2', '2.5', '3']\r\n  },\r\n\r\n  yAxis: {\r\n  type: 'value'  ,    \r\n   splitLine: {lineStyle: {color:'#434651'}}     \r\n  },\r\n  \r\n  series: [\r\n    {\r\n      type: 'bar',\r\n      data: 0 ,// [2, 3, -1, 1.5, -0.5],\r\n      itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'},\r\n    }\r\n      \r\n    }\r\n  ]\r\n};\r\n    if (option && typeof option === \"object\") \r\n    { \r\n        myChart.setOption(option, true); \r\n    }   \r\n */\r\n</script>\r\n</body>"},{"id":"73e8ac0b6df50b8c","type":"function","z":"59fefa2a0cb3be7a","name":"function 10","func":"\nmsg.payload = [[2,\"1\"],[ -1, \"1.5\"],[ 3, \"2\"],[  -2,\"2.5\"]]\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":901.9869384765625,"y":358.9895935058594,"wires":[["731be69f02893ae2","742f0eac83ca48ab"]]},{"id":"13ab9d58abbe6774","type":"inject","z":"59fefa2a0cb3be7a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Another Bar Chart Title","payload":"[[\"2\",1],[ \"3\",-1],[ \"4\",2.5],[ \"5\",1.5]]","payloadType":"jsonata","x":650,"y":360,"wires":[["73e8ac0b6df50b8c"]]},{"id":"742f0eac83ca48ab","type":"debug","z":"59fefa2a0cb3be7a","name":"debug 22","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1080,"y":300,"wires":[]},{"id":"d3ed4b214f2bcd52","type":"debug","z":"59fefa2a0cb3be7a","name":"Bar Chart Send","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1280,"y":360,"wires":[]},{"id":"20d55a3df46c721c","type":"ui_group","name":"CENTER","tab":"5e2e41aa.9826b","order":1,"disp":false,"width":"16","collapse":false,"className":""},{"id":"5e2e41aa.9826b","type":"ui_tab","name":"ANALYTICS","icon":"dashboard","order":14,"disabled":false,"hidden":false}]

Thank you!

Hello again,
I had a single bar chart data set "%" with an input array that looked like: [["2",1],[ "3",-1],[ "4",2.5],[ "5",1.5]]. I need to add two more data sets "$" and "#" (i.e. total of 3) on the same chart. This is my working config; again struggling to figure out how to input the multiple series data. Thanks in advance.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

<body>
    <!-- prepare a DOM container with width and height -->
    <div id = "divBar2" style = "width: 510px; height: 320px;"></div>

<script type="text/javascript">

    (function(scope) {
        const dom = document.getElementById("divBar2")

        let myChart = null
        myChart = echarts.init(dom)

        let option = {}
        let title = 'Bar Chart'

       scope.$watch('msg', function(msg) {
              // No error checking for properties
            if(msg) {
                let chartData = getData(msg.payload)
                // Do something when msg arrives
                title = msg.topic
                option.title.text = title
                
                option.series[0].data = chartData[0]
                option.xAxis.data = chartData[1]
                
                myChart.setOption(option, true)
            
            }
        })

        function getData(data) {
            let seriesData = []
            let xAxisData = []
            data.forEach(element => { xAxisData = [...xAxisData, element[0]]
                                      seriesData = [...seriesData, element[1]]
                                    }
                        )
    
            return [seriesData, xAxisData]

        }

        option = {
            title: {
                text: '',
            },

            grid: {
                top: 40,
                bottom: 30,
                left: '2%',
                right: '2%'
            },

            xAxis: {
                type: 'category',
                data: 0, 
                axisLabel: {formatter: '{value} %'}
            },

            yAxis: [
              {
                type: 'value',
                show: false,
                min: -3,
                max: 3,
                splitLine: { show: false}
              },
            
              {
                type: 'value' ,
                show: false,
                min: -100,
                max: 100,
                position: 'right',
                offset: -10,
                splitLine: { show: false}
              },
               
              {
                type: 'value',
                show: false,
                min: 0,
                splitLine: { show: false}
              }              
            ],

            series: [
                        {
                            type: 'bar',
                            name: '%',
                            data: 0 ,
                            barWidth: 25,
                            markPoint: { data: [{ type: 'max', name: 'Max' }]},
                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.3)'}},
                    
                        },
                        {                        
                            name: '$',
                            type: 'bar',
                            yAxisIndex: 1,
                            barWidth: 25,
                            markPoint: { data: [{ type: 'max', name: 'Max' }]},
                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'}},
                            data: [70, -80, 33, 90]
                        },
                        {
                            name: '#',
                            type: 'line',
                            yAxisIndex: 2,
                            lineStyle: {color:'#2962ff', width: 1},
                            data: [90, 80, 133, 100]
                        }                        

                    ]
        }


        if (option && typeof option === "object") {
            myChart.setOption(option, true)

        }

    })(scope)
    
</script>
</body>

How are you planning on sending the data in msg.payload. I take it that the problem is getting this data into the graph because

option.xAxis.data = <xAxis.data>
option.series[0] = <percentage.data>
option.series[1] = <dollar.data>
option.series[2] = <hash.data>

will get the graph to display

The best way to send the data is

[
 {
  "xAxis": data1,
  "value": [
             series0Data1,
             series1Data1,
             series2Data1
           ]
 },
 {
  "xAxis": data2,
  "value": [
             series0Data2,
             series1Data2,
             series2Data2
           ]
 },
]

etc.

Yes, I tried duplicating the approach for single series but couldn't figure out how. As far as format, I can send something like this: [[A,1,2,3 ],[ B,1,2,3],[C,1,2,3],[ D,1,2,3]] where A,B,C,D is the xAxis and then the corresponding values for the 3 charts - i.e. the xAxis is shared by all charts.

Simplistic but it works

        scope.$watch('msg', function(msg) {
            // No error checking for properties

            if(msg) {
                let chartData = formatChartData(msg.payload)
                
                // Do something when msg arrives
                title = msg.topic
                option.title.text = title
                
                option.xAxis.data = chartData[0]
                option.series[0].data = chartData[1][0]
                option.series[1].data = chartData[1][1]
                option.series[2].data = chartData[1][2]

                myChart.setOption(option, true)
            
            }
        })

        function formatChartData(data) {
            let seriesData = [[],[],[]]
            let xAxisData = []
            data.forEach(element => { 
                    xAxisData.push(element[0])
                    seriesData[0].push(element[1])
                    seriesData[1].push(element[2])
                    seriesData[2].push(element[3])
                })

            return [xAxisData, seriesData]

        }

Would you mind showing how this goes into existing chart template?

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

<body>
    <!-- prepare a DOM container with width and height -->
    <div id = "divBar2" style = "width: 510px; height: 320px;"></div>

<script type="text/javascript">

    (function(scope) {
        const dom = document.getElementById("divBar2")

        let myChart = null
        myChart = echarts.init(dom)

        let option = {}
        let title = 'Bar Chart'

       scope.$watch('msg', function(msg) {
              // No error checking for properties
            if(msg) {
                let chartData = getData(msg.payload)
                // Do something when msg arrives
                title = msg.topic
                option.title.text = title
                
                option.series[0].data = chartData[0]
                option.xAxis.data = chartData[1]
                
                myChart.setOption(option, true)
            
            }
        })

        function getData(data) {
            let seriesData = []
            let xAxisData = []
            data.forEach(element => { xAxisData = [...xAxisData, element[0]]
                                      seriesData = [...seriesData, element[1]]
                                    }
                        )
    
            return [seriesData, xAxisData]

        }

        option = {
            title: {
                text: '',
            },

            grid: {
                top: 40,
                bottom: 30,
                left: '2%',
                right: '2%'
            },

            xAxis: {
                type: 'category',
                data: 0, 
                axisLabel: {formatter: '{value} %'}
            },

            yAxis: [
              {
                type: 'value',
                show: false,
                min: -3,
                max: 3,
                splitLine: { show: false}
              },
            
              {
                type: 'value' ,
                show: false,
                min: -100,
                max: 100,
                position: 'right',
                offset: -10,
                splitLine: { show: false}
              },
               
              {
                type: 'value',
                show: false,
                min: 0,
                splitLine: { show: false}
              }              
            ],

            series: [
                        {
                            type: 'bar',
                            name: '%',
                            data: 0 ,
                            barWidth: 25,
                            markPoint: { data: [{ type: 'max', name: 'Max' }]},
                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.3)'}},
                    
                        },
                        {                        
                            name: '$',
                            type: 'bar',
                            yAxisIndex: 1,
                            barWidth: 25,
                            markPoint: { data: [{ type: 'max', name: 'Max' }]},
                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'}},
                            data: [70, -80, 33, 90]
                        },
                        {
                            name: 'Q',
                            type: 'line',
                            yAxisIndex: 2,
                            lineStyle: {color:'#2962ff', width: 1},
                            data: [90, 80, 133, 100]
                        }                        

                    ]
        }


        if (option && typeof option === "object") {
            myChart.setOption(option, true)

        }

    })(scope)
    
</script>
</body>

This is the actual data, where "0" is the X axis

image

This works and produces a chart, whether it is a correct chart - you will have to check against what you expected

<script type="text/javascript">

    (function(scope) {
        const dom = document.getElementById("divBar2")

        let myChart = null
        myChart = echarts.init(dom)

        let option = {}
        let title = 'Bar Chart'

        // Assuming msg.payload is
        // [[xAxisData, series01Data,series02Data, series03Data], ...]

        scope.$watch('msg', function(msg) {
            // No error checking for properties

            if(msg) {
                let chartData = formatChartData(msg.payload)
                
                // Do something when msg arrives
                title = msg.topic
                option.title.text = title
                
                option.xAxis.data = chartData[0]
                option.series[0].data = chartData[1][0]
                option.series[1].data = chartData[1][1]
                option.series[2].data = chartData[1][2]

                myChart.setOption(option, true)
            
            }
        })

        function formatChartData(data) {
            let seriesData = [[],[],[]]
            let xAxisData = []
            data.forEach(element => { 
                    xAxisData.push(element[0])
                    seriesData[0].push(parseFloat(element[1]))
                    seriesData[1].push(parseFloat(element[2]))
                    seriesData[2].push(parseFloat(element[3]))
                })

            return [xAxisData, seriesData]

        }


        option = {
            title: {
                text: '',
            },

            grid: {
                top: 40,
                bottom: 30,
                left: '2%',
                right: '2%'
            },

            xAxis: {
                type: 'category',
                data: 0, 
                axisLabel: {formatter: '{value} %'}
            },

            yAxis: [
              {
                type: 'value',
                show: false,
                min: -2000,
                max: 2000,
                splitLine: { show: false}
              },
            
              {
                type: 'value' ,
                show: false,
                min: -3,
                max: 3,
                position: 'right',
                offset: -10,
                splitLine: { show: false}
              },
               
              {
                type: 'value',
                show: false,
                min: -3000,
                splitLine: { show: false}
              }              
            ],

            series: [
                        {
                            type: 'bar',
                            name: '%',
                            barWidth: 25,
                            markPoint: { data: [{ type: 'max', name: 'Max' }]},
                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.3)'}},
                            data: '',
                    
                        },
                        {   type: 'bar',                     
                            name: '$',
                            yAxisIndex: 1,
                            barWidth: 25,
                            markPoint: { data: [{ type: 'max', name: 'Max' }]},
                            itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'}},
                            data: '',
                        },
                        {
                            name: '#',
                            type: 'line',
                            yAxisIndex: 2,
                            lineStyle: {color:'#2962ff', width: 1},
                            data: '',
                        }                        

                    ]
        }


        if (option && typeof option === "object") {
            myChart.setOption(option, true)

        }

    })(scope)
    
</script>

Thank you so much!

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