# Apexchart from csv file

**URL:** <https://discourse.nodered.org/t/apexchart-from-csv-file/84109>\
**Category:** Dashboard\
**Created:** [29 December 2023 10:15 UTC](https://discourse.nodered.org/t/apexchart-from-csv-file/84109 "2023-12-29T10:15:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![robertobuti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertobuti/32/81936_2.png) [@robertobuti](https://discourse.nodered.org/u/robertobuti)\
**Post date:** [29 December 2023 10:15 UTC](https://discourse.nodered.org/t/apexchart-from-csv-file/84109/1 "2023-12-29T10:15:18Z")

</div>

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....

```auto
[
    {
        "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](https://discourse.nodered.org/uploads/short-url/wlkYlHIRzIncnet0yygnywJYpSq.log) (648 Bytes)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 December 2023 10:26 UTC](https://discourse.nodered.org/t/apexchart-from-csv-file/84109/2 "2023-12-29T10:26:42Z")

</div>

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.

---

<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:** [12 January 2024 10:26 UTC](https://discourse.nodered.org/t/apexchart-from-csv-file/84109/3 "2024-01-12T10:26:53Z")

</div>

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