'Cause that's what you used in your original post.
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.
[
{
"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
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.