How to draw AmCharts in UI dashboard

Hi,

I'm trying to implement Multiple Date Axes (an AmCharts demo) in Node-RED.

How can see the chart in UI Dashboard?

[{"id":"30aa77e5.610248","type":"template","z":"27943f58.9bd54","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n#chartdiv1 {\n  width: 100%;\n  height: 500px;\n}\n\n</style>\n<script src=\"https://cdn.amcharts.com/lib/4/core.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/4/charts.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/4/themes/animated.js\"></script>\n\n<!-- Resources \n\n-->\n\n<!-- Chart code -->\n<script>\n//TEMPELATE-CORE\nam4core.ready(function() {\n\n//TEMPELATE-THEME\nam4core.useTheme(am4themes_animated);\n// Themes end\n\n//TEMPELATE-CHART\nvar chart = am4core.create(\"chartdiv1\", am4charts.XYChart);\n// FUNCTION\n\n\n//TEMPELATE-\n\nchart.data = {{{data}}};\n\n\n//TEMPELATE-\nvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());\ndateAxis.renderer.grid.template.location = 0;\ndateAxis.renderer.labels.template.fill = am4core.color(\"#e59165\");\n\nvar dateAxis2 = chart.xAxes.push(new am4charts.DateAxis());\ndateAxis2.renderer.grid.template.location = 0;\ndateAxis2.renderer.labels.template.fill = am4core.color(\"#dfcc64\");\n\nvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\nvalueAxis.tooltip.disabled = true;\nvalueAxis.renderer.labels.template.fill = am4core.color(\"#e59165\");\n\nvalueAxis.renderer.minWidth = 60;\n\nvar valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());\nvalueAxis2.tooltip.disabled = true;\nvalueAxis2.renderer.labels.template.fill = am4core.color(\"#dfcc64\");\nvalueAxis2.renderer.minWidth = 60;\nvalueAxis2.syncWithAxis = valueAxis;\n//TEMPELATE-\nvar series = chart.series.push(new am4charts.LineSeries());\n//TEMPELATE-\nseries.name = \"2015\";\nseries.dataFields.dateX = \"date1\";\nseries.dataFields.valueY = \"price1\";\nseries.tooltipText = \"{valueY.value}\";\nseries.fill = am4core.color(\"#e59165\");\nseries.stroke = am4core.color(\"#e59165\");\n//series.strokeWidth = 3;\n\nvar series2 = chart.series.push(new am4charts.LineSeries());\nseries2.name = \"2017\";\nseries2.dataFields.dateX = \"date2\";\nseries2.dataFields.valueY = \"price2\";\nseries2.yAxis = valueAxis2;\nseries2.xAxis = dateAxis2;\nseries2.tooltipText = \"{valueY.value}\";\nseries2.fill = am4core.color(\"#dfcc64\");\nseries2.stroke = am4core.color(\"#dfcc64\");\n//series2.strokeWidth = 3;\n\nchart.cursor = new am4charts.XYCursor();\nchart.cursor.xAxis = dateAxis2;\n\nvar scrollbarX = new am4charts.XYChartScrollbar();\nscrollbarX.series.push(series);\nchart.scrollbarX = scrollbarX;\n\nchart.legend = new am4charts.Legend();\nchart.legend.parent = chart.plotContainer;\nchart.legend.zIndex = 100;\n\nvalueAxis2.renderer.grid.template.strokeOpacity = 0.07;\ndateAxis2.renderer.grid.template.strokeOpacity = 0.07;\ndateAxis.renderer.grid.template.strokeOpacity = 0.07;\nvalueAxis.renderer.grid.template.strokeOpacity = 0.07;\n\n}); // end am4core.ready()\n</script>\n\n<!-- HTML -->\n<div id=\"chartdiv1\"></div>\n","output":"str","x":900,"y":300,"wires":[["872c165f.ef5c78"]]},{"id":"a057e76f.32f0a8","type":"function","z":"27943f58.9bd54","name":"","func":"msg.data = [];\nvar price1 = 1000, price2 = 1200;\nvar quantity = 30000;\nfor (var i = 0; i < 360; i++) {\n  price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);\n  msg.data.push({ date1: new Date(2015, 0, i), price1: price1 });\n}\nfor (var j = 0; j < 360; j++) {\n  price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);\n  msg.data.push({ date2: new Date(2017, 0, j), price2: price2 });\n}\nmsg.data = JSON.stringify(msg.data);\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":710,"y":300,"wires":[["30aa77e5.610248"]]},{"id":"8c0e131.71b2ef","type":"debug","z":"27943f58.9bd54","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1330,"y":300,"wires":[]},{"id":"872c165f.ef5c78","type":"ui_template","z":"27943f58.9bd54","group":"9099d5b5.2a20f8","name":"","order":4,"width":"20","height":"19","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1120,"y":300,"wires":[["8c0e131.71b2ef"]]},{"id":"77e3a1f0.a63ef","type":"inject","z":"27943f58.9bd54","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"60","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":540,"y":300,"wires":[["a057e76f.32f0a8"]]},{"id":"9099d5b5.2a20f8","type":"ui_group","name":"newCharts","tab":"26a7378c.0f6c78","order":1,"disp":true,"width":"24","collapse":false},{"id":"26a7378c.0f6c78","type":"ui_tab","name":"newCharts","icon":"dashboard","disabled":false,"hidden":false}]

I got your example working by just changing the first field in the node config from msg.payload to msg.template

PS: The chart breaks in the following updates. Probably something bad with the regularly injected data.

r-3

PS: You may want to do some testing to speed up the loading of the dynamic libraries by using a second dashboard ui_template node dedicated to load the scripts.

Thanks @Andrei
msg.template worked for me as well.

I've not considered "Cannot read property 'indexOf' of undefined" yet. If I have the same issue, I will comment that on this topic.

But how do you use the second dashboard ui_template node for loading the scripts?

1 Like

oh, missing to reply this part, sorry.

You could do an experiment by transferring the loading of the libraries to a second ui_template, like below. I say "experiment" as I am not totally sure if this can give a real optimization in the loading time.

[{"id":"52c3537c.76ab3c","type":"ui_template","z":"79349fe4.52503","group":"9468173.5ffa0e8","name":"","order":1,"width":0,"height":0,"format":"<style>\n\n\n</style>\n<script src=\"https://cdn.amcharts.com/lib/4/core.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/4/charts.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/4/themes/animated.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":830,"y":140,"wires":[[]]},{"id":"9468173.5ffa0e8","type":"ui_group","name":"newCharts","tab":"819798b6.3e4e48","order":1,"disp":true,"width":"24","collapse":false},{"id":"819798b6.3e4e48","type":"ui_tab","name":"newCharts","icon":"dashboard","disabled":false,"hidden":false}]

Yes, I tested and it is a better idea to use a separate ui_template for libraries, specially when we use more than one chart in the same page. So I load the libraries once and use them for different charts.
Thanks,

2 Likes

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