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}]
