Apexchart from csv file

Dashboard
1

Hello,
i have used apexchart with builtin array data and it's very nice, but i need use CSV file for data (to start very simple with timestamp on X axis and temperature values on Y axis). But i'm unable to load data from script, code work if placed on web server, but not by itself or inside template node.
How to solve ? i'm not expert sw engineer, looking around web no example to use apex with external data file / array, consider the file could be large....

[
    {
        "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\n  <script src=\"https://code.jquery.com/jquery-3.7.1.js\" integrity=\"sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=\"\n    crossorigin=\"anonymous\"></script>\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js\"></script>\n</head>\n\n<body>\n  <div id=\"chart\" style=\"width:900px\"></div>\n\n\n  <script>\n    $( document ).ready(function() {\n\n    var data_csv;\n\n    var data_x=[];\n    var data_y=[];\n    $.ajax({\n      type: \"GET\",  \n      url: \"temp_1.csv\",\n      dataType: \"text\",       \n      success: function(response)  \n      {\n        data_csv = $.csv.toArrays(response);\n\n        lavora_csv(data_csv)\n        \n      }   \n    });\n\n\n    function lavora_csv(data_csv){\n\n      if(typeof(data_csv[0]) === 'undefined') {\n        return null;\n      } else {\n        $.each(data_csv, function( index, row ) {\n\n          \n          data_x.push(row[0]);\n          data_y.push(row[1]);\n\n         \n\n        });\n\n        console.log(data_x);\n        console.log(data_y);\n\n      }\n\n\n    }\n\n\n\n\n    var options = {\n          series: [{\n            name: \"Desktops\",\n            data: data_y\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: data_x,\n        }\n        };\n  setTimeout(()=> {\n\n    var chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n    chart.render();\n  },1000) \n    \n    \n  });\n  \n\n\n\n\n  </script>\n</body>\n\n</html>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 600,
        "y": 1520,
        "wires": [
            []
        ]
    },
    {
        "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
    }
]

Any suggestion will be welcome.
thanks
temp_1.csv.log (648 Bytes)

2

In your script you are using $.ajax to GET temp_1.csv\ but are you serving that file from Node-RED (i.e. do you have http-in -> file-read -> http-response flow?

NOTE: You dont actually need to serve the file or request it - you could simply pass the data to the frontend via a node msg input to the ui-template node.

Read the built in help for the ui-template node. It tells you how to listen for messages using the scope object. then you can simply send the data in msg.payload directly to the template.

1 Like
3

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