Amcharts in dashboard2

[Kundepuu]

I have asked before
[Amcharts chart dont show in DB2 - #2 by Kundepuu]
I get it work now someway, but dynamically cant get work.
In DB2 flow I have tested couple ways ( not all in flow).
Any help?

[
    {
        "id": "1b382109a867cbd6",
        "type": "tab",
        "label": "amcharts",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a189fa84258f3972",
        "type": "ui-template",
        "z": "1b382109a867cbd6",
        "d": true,
        "group": "2ba35b91109753ea",
        "page": "",
        "ui": "",
        "name": "test1",
        "order": 4,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<style>\n#chartdiv {\n  width: 100%;\n  height: 500px;\n}\n</style>\n\n<!-- Resources -->\n<script src=\"https://cdn.amcharts.com/lib/5/index.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/5/xy.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/5/themes/Animated.js\"></script>\n\n<!-- Chart code -->\n<script>\nam5.ready(function() {\n\n  // Create root element\n  var root = am5.Root.new(\"chartdiv\");\n\n  // Set themes\n  root.setThemes([\n    am5themes_Animated.new(root)\n  ]);\n\n  // Create chart\n  var chart = root.container.children.push(am5xy.XYChart.new(root, {\n    panX: true,\n    panY: true,\n    wheelX: \"panX\",\n    wheelY: \"zoomX\",\n    pinchZoomX: true,\n    paddingLeft:0,\n    paddingRight:1\n  }));\n\n  // Add cursor\n  var cursor = chart.set(\"cursor\", am5xy.XYCursor.new(root, {}));\n  cursor.lineY.set(\"visible\", false);\n\n  // Create axes\n  var xRenderer = am5xy.AxisRendererX.new(root, { \n    minGridDistance: 30, \n    minorGridEnabled: true\n  });\n\n  xRenderer.labels.template.setAll({\n    rotation: -90,\n    centerY: am5.p50,\n    centerX: am5.p100,\n    paddingRight: 15\n  });\n\n  xRenderer.grid.template.setAll({\n    location: 1\n  });\n\n  var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {\n    maxDeviation: 0.3,\n    categoryField: \"country\",\n    renderer: xRenderer,\n    tooltip: am5.Tooltip.new(root, {})\n  }));\n\n  var yRenderer = am5xy.AxisRendererY.new(root, {\n    strokeOpacity: 0.1\n  });\n\n  var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n    maxDeviation: 0.3,\n    renderer: yRenderer\n  }));\n\n  // Create series\n  var series = chart.series.push(am5xy.ColumnSeries.new(root, {\n    name: \"Series 1\",\n    xAxis: xAxis,\n    yAxis: yAxis,\n    valueYField: \"value\",\n    sequencedInterpolation: true,\n    categoryXField: \"country\",\n    tooltip: am5.Tooltip.new(root, {\n      labelText: \"{valueY}\"\n    })\n  }));\n\n  series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });\n  \n  series.columns.template.adapters.add(\"fill\", function (fill, target) {\n    return chart.get(\"colors\").getIndex(series.columns.indexOf(target));\n  });\n\n  series.columns.template.adapters.add(\"stroke\", function (stroke, target) {\n    return chart.get(\"colors\").getIndex(series.columns.indexOf(target));\n  });\n\n  \n// Set data\nvar data = [{\n      country: \"USA\",\n      value: 2025\n}, {\n      country: \"China\",\n      value: 1882\n}, {\n      country: \"Japan\",\n      value: 1809\n}, {\n      country: \"Germany\",\n      value: 1322\n}, {\n      country: \"UK\",\n      value: 1122\n}, {\n      country: \"France\",\n      value: 1114\n}, {\n      country: \"India\",\n      value: 984\n}, {\n      country: \"Spain\",\n      value: 711\n}, {\n      country: \"Netherlands\",\n      value: 665\n}, {\n      country: \"South Korea\",\n      value: 443\n}, {\n      country: \"Canada\",\n      value: 441\n}];\nxAxis.data.setAll(data);\nseries.data.setAll(data);\n\n// Make stuff animate on load\nseries.appear(1000);\nchart.appear(1000, 100);\n\n}); // end am5.ready()\n</script>\n\n<!-- HTML -->\n<div id=\"chartdiv\"></div>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 570,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "1ade28cdf962acd7",
        "type": "inject",
        "z": "1b382109a867cbd6",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "3",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 170,
        "y": 220,
        "wires": [
            [
                "fdb7ab3056e529a7"
            ]
        ]
    },
    {
        "id": "fdb7ab3056e529a7",
        "type": "function",
        "z": "1b382109a867cbd6",
        "name": "function 165",
        "func": "// Create an array of data with random values or specific values\nvar data = [\n    { country: \"USA\", value: Math.floor(Math.random() * 3000) },\n    { country: \"China\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Japan\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Germany\", value: Math.floor(Math.random() * 3000) },\n    { country: \"UK\", value: Math.floor(Math.random() * 3000) },\n    { country: \"France\", value: Math.floor(Math.random() * 3000) },\n    { country: \"India\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Spain\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Netherlands\", value: Math.floor(Math.random() * 3000) },\n    { country: \"South Korea\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Canada\", value: Math.floor(Math.random() * 3000) }\n];\n\n// Set the payload to the data array\nmsg.payload = data;\n\n// Return the modified message object\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 350,
        "y": 220,
        "wires": [
            [
                "ee2e9dd768f980e9"
            ]
        ]
    },
    {
        "id": "87df217a040ef372",
        "type": "ui-template",
        "z": "1b382109a867cbd6",
        "d": true,
        "group": "2ba35b91109753ea",
        "page": "",
        "ui": "",
        "name": "",
        "order": 3,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dynamic amCharts Example</title>\n    <style>\n        #chartdiv {\n            width: 100%;\n            height: 500px;\n        }\n    </style>\n    <script src=\"https://cdn.amcharts.com/lib/5/index.js\"></script>\n    <script src=\"https://cdn.amcharts.com/lib/5/xy.js\"></script>\n    <script src=\"https://cdn.amcharts.com/lib/5/themes/Animated.js\"></script>\n</head>\n<body>\n\n<div id=\"chartdiv\"></div>\n\n<script>\nam5.ready(function() {\n    var root = am5.Root.new(\"chartdiv\");\n    root.setThemes([am5themes_Animated.new(root)]);\n\n    var chart = root.container.children.push(am5xy.XYChart.new(root, {\n        panX: true,\n        panY: true,\n        wheelX: \"panX\",\n        wheelY: \"zoomX\",\n        pinchZoomX: true,\n        paddingLeft: 0,\n        paddingRight: 1\n    }));\n\n    var cursor = chart.set(\"cursor\", am5xy.XYCursor.new(root, {}));\n    cursor.lineY.set(\"visible\", false);\n\n    var xRenderer = am5xy.AxisRendererX.new(root, { \n        minGridDistance: 30, \n        minorGridEnabled: true\n    });\n\n    xRenderer.labels.template.setAll({\n        rotation: -90,\n        centerY: am5.p50,\n        centerX: am5.p100,\n        paddingRight: 15\n    });\n\n    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {\n        maxDeviation: 0.3,\n        categoryField: \"country\",\n        renderer: xRenderer,\n        tooltip: am5.Tooltip.new(root, {})\n    }));\n\n    var yRenderer = am5xy.AxisRendererY.new(root, {\n        strokeOpacity: 0.1\n    });\n\n    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n        maxDeviation: 0.3,\n        renderer: yRenderer\n    }));\n\n    var series = chart.series.push(am5xy.ColumnSeries.new(root, {\n        name: \"Series 1\",\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: \"value\",\n        sequencedInterpolation: true,\n        categoryXField: \"country\",\n        tooltip: am5.Tooltip.new(root, {\n            labelText: \"{valueY}\"\n        })\n    }));\n\n    series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });\n\n    // Initial Data\n    var data = [\n      { country: \"USA\", value: 2025 },\n      { country: \"China\", value: 1882 },\n      { country: \"Japan\", value: 1809 },\n      { country: \"Germany\", value: 1322 },\n      { country: \"UK\", value: 1122 }\n    ];\n    \n    xAxis.data.setAll(data);\n    series.data.setAll(data);\n\n    // Function to update data dynamically\n    function updateData() {\n        // Generate new random data for demonstration\n        var newData = data.map(item => ({\n            country: item.country,\n            value: Math.floor(Math.random() * 3000) // Random value for demonstration\n        }));\n\n        // Update axes and series data\n        xAxis.data.setAll(newData);\n        series.data.setAll(newData);\n\n        // Refresh the chart\n        series.appear(1000); // Optional animation on update\n    }\n\n    // Update data every 3 seconds\n    setInterval(updateData, 5000);\n    \n}); // end am5.ready()\n</script>\n\n</body>\n</html>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 580,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "e8fd8e9c844623d3",
        "type": "ui-template",
        "z": "1b382109a867cbd6",
        "d": true,
        "group": "2ba35b91109753ea",
        "page": "",
        "ui": "",
        "name": "test2",
        "order": 2,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dynamic amCharts Example</title>\n    <style>\n        #chartdiv {\n            width: 100%;\n            height: 500px;\n        }\n    </style>\n    <script src=\"https://cdn.amcharts.com/lib/5/index.js\"></script>\n    <script src=\"https://cdn.amcharts.com/lib/5/xy.js\"></script>\n    <script src=\"https://cdn.amcharts.com/lib/5/themes/Animated.js\"></script>\n</head>\n<body>\n\n<div id=\"chartdiv\"></div>\n\n<script>\nam5.ready(function() {\n    var root = am5.Root.new(\"chartdiv\");\n    root.setThemes([am5themes_Animated.new(root)]);\n\n    var chart = root.container.children.push(am5xy.XYChart.new(root, {\n        panX: true,\n        panY: true,\n        wheelX: \"panX\",\n        wheelY: \"zoomX\",\n        pinchZoomX: true,\n        paddingLeft: 0,\n        paddingRight: 1\n    }));\n\n    var cursor = chart.set(\"cursor\", am5xy.XYCursor.new(root, {}));\n    cursor.lineY.set(\"visible\", false);\n\n    var xRenderer = am5xy.AxisRendererX.new(root, { \n        minGridDistance: 30, \n        minorGridEnabled: true\n    });\n\n    xRenderer.labels.template.setAll({\n        rotation: -90,\n        centerY: am5.p50,\n        centerX: am5.p100,\n        paddingRight: 15\n    });\n\n    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {\n        maxDeviation: 0.3,\n        categoryField: \"country\",\n        renderer: xRenderer,\n        tooltip: am5.Tooltip.new(root, {})\n    }));\n\n    var yRenderer = am5xy.AxisRendererY.new(root, {\n        strokeOpacity: 0.1\n    });\n\n    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n        maxDeviation: 0.3,\n        renderer: yRenderer\n    }));\n\n    var series = chart.series.push(am5xy.ColumnSeries.new(root, {\n        name: \"Series 1\",\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: \"value\",\n        sequencedInterpolation: true,\n        categoryXField: \"country\",\n        tooltip: am5.Tooltip.new(root, {\n            labelText: \"{valueY}\"\n        })\n    }));\n\n    series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });\n\n    // Initial Data\n    var data = [\n      { country: \"USA\", value: 2025 },\n      { country: \"China\", value: 1882 },\n      { country: \"Japan\", value: 1809 },\n      { country: \"Germany\", value: 1322 },\n      { country: \"UK\", value: 1122 }\n    ];\n    \n    xAxis.data.setAll(data);\n    series.data.setAll(data);\n\n    // Function to update chart with new msg.payload\n    function updateChart(newData) {\n        // Assuming newData is passed in as msg.payload\n        xAxis.data.setAll(newData);\n        series.data.setAll(newData);\n        \n        // Optionally validate data if needed\n        series.invalidateRawData(); // Refreshes the series data\n    }\n\n    // Simulating dynamic updates every 3 seconds\n    setInterval(() => {\n        const newData = [\n            { country: \"USA\", value: Math.floor(Math.random() * 3000) },\n            { country: \"China\", value: Math.floor(Math.random() * 3000) },\n            { country: \"Japan\", value: Math.floor(Math.random() * 3000) },\n            { country: \"Germany\", value: Math.floor(Math.random() * 3000) },\n            { country: \"UK\", value: Math.floor(Math.random() * 3000) }\n        ];\n        \n        updateChart(newData); // Call update function with new data\n    }, 3000);\n    \n}); // end am5.ready()\n</script>\n\n</body>\n</html>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 570,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "ee2e9dd768f980e9",
        "type": "ui-template",
        "z": "1b382109a867cbd6",
        "group": "2ba35b91109753ea",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dynamic amCharts Example</title>\n    <style>\n        #chartdiv {\n            width: 100%;\n            height: 500px;\n        }\n    </style>\n    <script src=\"https://cdn.amcharts.com/lib/5/index.js\"></script>\n    <script src=\"https://cdn.amcharts.com/lib/5/xy.js\"></script>\n    <script src=\"https://cdn.amcharts.com/lib/5/themes/Animated.js\"></script>\n</head>\n<body>\n\n<div id=\"chartdiv\"></div>\n\n<script>\nam5.ready(function() {\n    var root = am5.Root.new(\"chartdiv\");\n    root.setThemes([am5themes_Animated.new(root)]);\n\n    var chart = root.container.children.push(am5xy.XYChart.new(root, {\n        panX: true,\n        panY: true,\n        wheelX: \"panX\",\n        wheelY: \"zoomX\",\n        pinchZoomX: true,\n        paddingLeft: 0,\n        paddingRight: 1\n    }));\n\n    var cursor = chart.set(\"cursor\", am5xy.XYCursor.new(root, {}));\n    cursor.lineY.set(\"visible\", false);\n\n    var xRenderer = am5xy.AxisRendererX.new(root, { \n        minGridDistance: 30, \n        minorGridEnabled: true\n    });\n\n    xRenderer.labels.template.setAll({\n        rotation: -90,\n        centerY: am5.p50,\n        centerX: am5.p100,\n        paddingRight: 15\n    });\n\n    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {\n        maxDeviation: 0.3,\n        categoryField: \"country\",\n        renderer: xRenderer,\n        tooltip: am5.Tooltip.new(root, {})\n    }));\n\n    var yRenderer = am5xy.AxisRendererY.new(root, {\n        strokeOpacity: 0.1\n    });\n\n    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n        maxDeviation: 0.3,\n        renderer: yRenderer\n    }));\n\n    var series = chart.series.push(am5xy.ColumnSeries.new(root, {\n        name: \"Series 1\",\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: \"value\",\n        sequencedInterpolation: true,\n        categoryXField: \"country\",\n        tooltip: am5.Tooltip.new(root, {\n            labelText: \"{valueY}\"\n        })\n    }));\n\n    series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });\n\n    // Initial Data (optional)\n    var initialData = [\n      { country: \"USA\", value: 2025 },\n      { country: \"China\", value: 1882 },\n      { country: \"Japan\", value: 1809 },\n      { country: \"Germany\", value: 1322 },\n      { country: \"UK\", value: 1122 }\n    ];\n    \n    // Set initial data to the chart\n    xAxis.data.setAll(initialData);\n    series.data.setAll(initialData);\n\nwindow.addEventListener('message', function(event) {\nif (event.data && event.data.payload) {\n// Update axes and series data with new payload\nxAxis.data.setAll(event.data.payload);\nseries.data.setAll(event.data.payload);\nseries.appear(1000); // Optional animation on update\nchart.appear(1000, 100); // Optional animation on chart appearance\n}\n});\n}); // end am5.ready()\n</script>\n\n</body>\n</html>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 580,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "2ba35b91109753ea",
        "type": "ui-group",
        "name": "CPT",
        "page": "d5dfac7da5a24b2d",
        "width": "12",
        "height": "6",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "d5dfac7da5a24b2d",
        "type": "ui-page",
        "name": "amcharts",
        "ui": "794decd9b411e0f9",
        "path": "/amcharts",
        "icon": "home",
        "layout": "notebook",
        "theme": "95e4703cc7218284",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "794decd9b411e0f9",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "95e4703cc7218284",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

[ralphwetzel]

Hi!
Like the other post, this here as well won't create a lot of feedback - I guess; there's simply not enough information given as baseline to support you.
Perhaps it might become better if you explain with additional detail what you intend to achieve, what parts are already operational - and where's the issue.

[Kundepuu]

I want send dynamically new data, but cant get it work db2 tempalte node.
Static data works and also if add timer into code to update it works too, but if I try to listen msg.payload it dont update.
In my flow I have attach some templates that work.
Try to test many ways and also asking AI, but not helping. There was mostly times no errors and sometimes amcharts library errors( when using watch).
Some try also show for example chart grid snd cursor but no data. Maybe amchart is not ready or something like that. I dont know anything how to fix those not ready things.
In flow you can test different templates.

[Steve-Mcl]

firstly, dashboard template should NOT have head or body. The dashboard framework provides all of that for you.

Next, look at the below example and re-work it for amcharts (it will be near identical in structure)

How to configure Echarts in Dashboard 2?

Here is a very basic working demo to get you moving. [chrome_3bl8y1grck] hook these 2 injects up to the input of your template [{"id":"2d2e714030317eee","type":"inject","z":"85fb8b6df2be7ac8","name":"","props":[{"p":"payload"},{"p":"payload.title","v":"Average per hour","vt":"str"},{"p":"payload.labels","v":"[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\",\"14:00\",\"15:00\",\"16:00\",\"17:00\",\"18:00\"]","vt":"json"},{"p":"payload.data","v":"[8600, 8750, 7800, 8700, 9…

[Steve-Mcl]

EDIT

There is an almost identical question raised today on SO : Amcharts 5 chart in node red dashboard2 template cant get updating from msg.payload data - Stack Overflow

The user name is different but the content of the VUE template is identical to that in the demo flow provided in the OP. Quite Odd!

END_EDIT

Here is a working version of the above - for amCharts

Demo

Template

<template>
    <div ref="chartdiv" style="width: 500px; height: 200px" />
</template>

<script type="text/javascript" src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<script>
    export default {
        data() {
            return {
                chart: null,
                series: null,
                xAxis: null,
                root: null
            }
        },
        watch: {
            msg: function () {
                if (this.msg.topic === "data") {
                    this.update(this.msg.payload, this.msg.payload)
                }
            }
        },
        beforeDestroy() {
            if (this.root) {
                this.root.dispose()
            }
        },
        mounted() {
            // because of Dashboard 2 architecture and dynamic loading of components,
            // we need to wait until all of the modules are loaded before initialising the chart
            // TODO: find a better way to handle this!
            let interval = setInterval(() => {
                if (window.am5 && window.am5themes_Animated && window.am5xy) {
                    clearInterval(interval)
                    this.init()
                }
            }, 100)
        },
        methods: {
            init: function () {
                const root = am5.Root.new(this.$refs.chartdiv)
                root.setThemes([am5themes_Animated.new(root)])

                const chart = root.container.children.push(am5xy.XYChart.new(root, {
                    panX: true,
                    panY: true,
                    wheelX: "panX",
                    wheelY: "zoomX",
                    pinchZoomX: true,
                    paddingLeft: 0,
                    paddingRight: 1
                }))

                const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}))
                cursor.lineY.set("visible", false)

                const xRenderer = am5xy.AxisRendererX.new(root, {
                    minGridDistance: 30,
                    minorGridEnabled: true
                })

                xRenderer.labels.template.setAll({
                    rotation: -90,
                    centerY: am5.p50,
                    centerX: am5.p100,
                    paddingRight: 15
                })

                const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                    maxDeviation: 0.3,
                    categoryField: "country",
                    renderer: xRenderer,
                    tooltip: am5.Tooltip.new(root, {})
                }))

                const yRenderer = am5xy.AxisRendererY.new(root, {
                    strokeOpacity: 0.1
                })

                const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                    maxDeviation: 0.3,
                    renderer: yRenderer
                }))

                const series = chart.series.push(am5xy.ColumnSeries.new(root, {
                    name: "Series 1",
                    xAxis: xAxis,
                    yAxis: yAxis,
                    valueYField: "value",
                    sequencedInterpolation: true,
                    categoryXField: "country",
                    tooltip: am5.Tooltip.new(root, {
                        labelText: "{valueY}"
                    })
                }))

                series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 })

                const initialData = [ ] // Initial Data (optional)
                // save refs
                this.chart = chart
                this.xAxis = xAxis
                this.series = series
                this.root = root
                this.chart.appear(1000, 100) // Optional animation on chart appearance

                // perform update
                this.update(initialData)
            },
            update: function (data) {
                if (this.root && data) {
                    // Update axes and series data with new payload
                    this.series.data.setAll(data)
                    this.xAxis.data.setAll(data)
                    this.series.appear(200) // Optional animation on update
                }
            }
        }
    }
</script>

Demo flow

[{"id":"1ade28cdf962acd7","type":"inject","z":"1b382109a867cbd6","name":"Every 3 sec","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":true,"onceDelay":"0.5","topic":"","payload":"","payloadType":"date","x":250,"y":140,"wires":[["fdb7ab3056e529a7"]]},{"id":"fdb7ab3056e529a7","type":"function","z":"1b382109a867cbd6","name":"random data","func":"// Create an array of data with random values or specific values\nvar data = [\n    { country: \"USA\", value: Math.floor(Math.random() * 3000) },\n    { country: \"China\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Japan\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Germany\", value: Math.floor(Math.random() * 3000) },\n    { country: \"UK\", value: Math.floor(Math.random() * 3000) },\n    { country: \"France\", value: Math.floor(Math.random() * 3000) },\n    { country: \"India\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Spain\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Netherlands\", value: Math.floor(Math.random() * 3000) },\n    { country: \"South Korea\", value: Math.floor(Math.random() * 3000) },\n    { country: \"Canada\", value: Math.floor(Math.random() * 3000) }\n];\n\n// Set the payload to the data array\nmsg.payload = data;\nmsg.topic = \"data\"\n\n// Return the modified message object\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":220,"wires":[["ee2e9dd768f980e9"]]},{"id":"ee2e9dd768f980e9","type":"ui-template","z":"1b382109a867cbd6","group":"2ba35b91109753ea","page":"","ui":"","name":"DB 2 ui-template with amChart","order":1,"width":0,"height":0,"head":"","format":"<template>\n    <div ref=\"chartdiv\" style=\"width: 500px; height: 200px\" />\n</template>\n\n<script type=\"text/javascript\" src=\"https://cdn.amcharts.com/lib/5/index.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.amcharts.com/lib/5/xy.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.amcharts.com/lib/5/themes/Animated.js\"></script>\n\n<script>\n    export default {\n        data() {\n            return {\n                chart: null,\n                series: null,\n                xAxis: null,\n                root: null\n            }\n        },\n        watch: {\n            msg: function () {\n                if (this.msg.topic === \"data\") {\n                    this.update(this.msg.payload, this.msg.payload)\n                }\n            }\n        },\n        beforeDestroy() {\n            if (this.root) {\n                this.root.dispose()\n            }\n        },\n        mounted() {\n            // because of Dashboard 2 architecture and dynamic loading of components,\n            // we need to wait until all of the modules are loaded before initialising the chart\n            // TODO: find a better way to handle this!\n            let interval = setInterval(() => {\n                if (window.am5 && window.am5themes_Animated && window.am5xy) {\n                    clearInterval(interval)\n                    this.init()\n                }\n            }, 100)\n        },\n        methods: {\n            init: function () {\n                const root = am5.Root.new(this.$refs.chartdiv)\n                root.setThemes([am5themes_Animated.new(root)])\n\n                const chart = root.container.children.push(am5xy.XYChart.new(root, {\n                    panX: true,\n                    panY: true,\n                    wheelX: \"panX\",\n                    wheelY: \"zoomX\",\n                    pinchZoomX: true,\n                    paddingLeft: 0,\n                    paddingRight: 1\n                }))\n\n                const cursor = chart.set(\"cursor\", am5xy.XYCursor.new(root, {}))\n                cursor.lineY.set(\"visible\", false)\n\n                const xRenderer = am5xy.AxisRendererX.new(root, {\n                    minGridDistance: 30,\n                    minorGridEnabled: true\n                })\n\n                xRenderer.labels.template.setAll({\n                    rotation: -90,\n                    centerY: am5.p50,\n                    centerX: am5.p100,\n                    paddingRight: 15\n                })\n\n                const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {\n                    maxDeviation: 0.3,\n                    categoryField: \"country\",\n                    renderer: xRenderer,\n                    tooltip: am5.Tooltip.new(root, {})\n                }))\n\n                const yRenderer = am5xy.AxisRendererY.new(root, {\n                    strokeOpacity: 0.1\n                })\n\n                const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n                    maxDeviation: 0.3,\n                    renderer: yRenderer\n                }))\n\n                const series = chart.series.push(am5xy.ColumnSeries.new(root, {\n                    name: \"Series 1\",\n                    xAxis: xAxis,\n                    yAxis: yAxis,\n                    valueYField: \"value\",\n                    sequencedInterpolation: true,\n                    categoryXField: \"country\",\n                    tooltip: am5.Tooltip.new(root, {\n                        labelText: \"{valueY}\"\n                    })\n                }))\n\n                series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 })\n\n                const initialData = [ ] // Initial Data (optional)\n                // save refs\n                this.chart = chart\n                this.xAxis = xAxis\n                this.series = series\n                this.root = root\n                this.chart.appear(1000, 100) // Optional animation on chart appearance\n\n                // perform update\n                this.update(initialData)\n            },\n            update: function (data) {\n                if (this.root && data) {\n                    // Update axes and series data with new payload\n                    this.series.data.setAll(data)\n                    this.xAxis.data.setAll(data)\n                    this.series.appear(200) // Optional animation on update\n                }\n            }\n        }\n    }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":310,"y":300,"wires":[[]]},{"id":"2ba35b91109753ea","type":"ui-group","name":"CPT","page":"d5dfac7da5a24b2d","width":"12","height":"6","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d5dfac7da5a24b2d","type":"ui-page","name":"amcharts","ui":"22ea43815413e748","path":"/amcharts","icon":"home","layout":"notebook","theme":"95e4703cc7218284","order":4,"className":"","visible":"true","disabled":"false"},{"id":"22ea43815413e748","type":"ui-base","name":"base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"95e4703cc7218284","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[Kundepuu]

Thank you very much!