# How to draw AmCharts in UI dashboard

**URL:** <https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998>\
**Category:** General\
**Created:** [4 March 2021 10:25 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998 "2021-03-04T10:25:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![A.K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a.k/32/37844_2.png) [@A.K](https://discourse.nodered.org/u/A.K)\
**Post date:** [4 March 2021 10:25 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998/1 "2021-03-04T10:25:57Z")

</div>

Hi,

I'm trying to implement [Multiple Date Axes](https://www.amcharts.com/demos/multiple-date-axes/) (an AmCharts demo) in Node-RED.

How can see the chart in UI Dashboard?

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [4 March 2021 11:08 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998/2 "2021-03-04T11:08:31Z")

</div>

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

 ![r-1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d8559ea3adf34090af50b06f9122bb2787798ac.jpeg)

 ![r-2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5ccea8da8bbb31e2beca0fe6d9d27c84f89ece12.jpeg)

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

![r-3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99e294d1167f7ca4bf798e1055c482e08eefa23d.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![A.K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a.k/32/37844_2.png) [@A.K](https://discourse.nodered.org/u/A.K)\
**Post date:** [4 March 2021 12:48 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998/3 "2021-03-04T12:48:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [8 March 2021 14:01 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998/4 "2021-03-08T14:01:58Z")

</div>

> [@A.K](#):
>
> But how do you use the second dashboard ui\_template node for loading the scripts?

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.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![A.K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a.k/32/37844_2.png) [@A.K](https://discourse.nodered.org/u/A.K)\
**Post date:** [9 March 2021 09:41 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998/5 "2021-03-09T09:41:49Z")

</div>

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,

---

<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:** [23 March 2021 09:42 UTC](https://discourse.nodered.org/t/how-to-draw-amcharts-in-ui-dashboard/41998/6 "2021-03-23T09:42:01Z")

</div>

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