Hello,
i'm beginner on nodered and really not a sw engineer, i need a little help to use apexchart on my dash board, i'm working for the moment with a simple example.
Here the flow i'm using.
[
{
"id": "884a673ddd60e8ec",
"type": "ui_template",
"z": "fb440a5f200684bb",
"group": "46cbac0e09c696e8",
"name": "",
"order": 0,
"width": "24",
"height": "10",
"format": "<html>\n \n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <!-- <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css\"> -->\n <!-- <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js\"></script> -->\n <!-- <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js\"></script> -->\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n</head>\n\n<body>\n <div id=\"chart\" style=\"width:900px\"></div>\n <script> \n var options = {\n series: [{\n name: \"Desktops\",\n data: [10, 41, 35, 51, 49, 62, 69, 91, 148]\n }],\n chart: {\n type: 'line',\n height: 350,\n zoom: {\n type: 'x',\n enabled: true,\n autoScaleYaxis: true\n },\n toolbar: {\n autoSelected: 'zoom'\n }\n },\n dataLabels: {\n enabled: false\n },\n stroke: {\n curve: 'smooth'\n },\n markers: {\n size: 0,\n },\n title: {\n text: 'Tank temperature',\n align: 'left'\n },\n grid: {\n row: {\n colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns\n opacity: 0.5\n },\n },\n xaxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],\n }\n };\n setTimeout(()=> {\n\n var chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n chart.render();\n },1000) \n </script>\n</body>\n\n</html>",
"storeOutMessages": false,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 480,
"y": 120,
"wires": [
[]
]
},
{
"id": "4f1f5d23f0bda5db",
"type": "inject",
"z": "fb440a5f200684bb",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": "1",
"topic": "",
"payload": "",
"payloadType": "date",
"x": 220,
"y": 120,
"wires": [
[
"884a673ddd60e8ec"
]
]
},
{
"id": "46cbac0e09c696e8",
"type": "ui_group",
"name": "Apexchart",
"tab": "27c6cdce.0f2ff2",
"order": 1,
"disp": true,
"width": "30",
"collapse": false
},
{
"id": "27c6cdce.0f2ff2",
"type": "ui_tab",
"name": "DA",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
But the toolbar are icons blue, also graph is are blue instead simple line, any idea where i'm wrong ?
thank in advance for any help / suggestion.
