How to export csv in CanvasJS in Javascript?

Question

I want to load a csv file to my html file to plot some data. I have figured out how to plot in html but the next challenge is to import data from a csv file. I am new to html and javascript and would appreciate inputs or even other modules aside from CanvasJS.

<!DOCTYPE HTML>
<html>
<head>
<meta charset ="UTF-8">
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: "DOE TEST Chart"
    },
    axisY:{
        includeZero: false
    },
    data: [{        
        type: "line",       
        dataPoints: dataPoints
    }]
});

$.get("file:////C:/Users/TestDev/Documents/html_files/js_plots/Sample/zpw.csv", getDataPointsFromCSV);

function getDataPointsFromCSV(csv) {
        var csvLines = points = [];
        csvLines = csv.split(/[\r?\n]\r|\n]+/);
        for (var i = 0; i < csvLines.length; i++) {
                if (csvLines[i].length > 0){
                        points = csvLines[i].split(",");
                        dataPoints.push({
                                label: points[0],
                                y: parseFloat(points[1])                            
                        });

                }
        }
        chart.render();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="../../canvasjs.min.js"></script>
</body>
</html>

You can't use the file:// protocol to get data from a file. If you could this would be a huge security vulnerability. — Patrick Roberts
– Patrick Roberts, Commented Apr 30, 2019 at 8:34
$.get("file:////C:/Users/TestDev/Documents/html_files/js_plots/Sample/zpw.csv" will not work — Hien Nguyen
– Hien Nguyen, Commented Apr 30, 2019 at 8:34
I apologize but I do not understand as to why. I am just a few days new to this. I just want to do some quick data visualization on my tool pc where the only software installed there is a browser. — wildfire
– wildfire, Commented Apr 30, 2019 at 8:40

hallie · Accepted Answer · 2019-05-31 19:05:22Z

0

Try moving the Sample folder containing the csv file into your project and use a relative url like "Sample/zpw.csv"

answered May 31, 2019 at 19:05

hallie

892 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishwas R · Accepted Answer · 2019-06-03 04:42:14Z

0

Due to security issues browsers doesn't allow you to read files from local filesystem. However, you can save your CSV in Google-Sheets and export it as CSV and use the link to the CSV in $.get("Google-Sheet-CSV-URL").

answered Jun 3, 2019 at 4:42

Vishwas R

3,4301 gold badge20 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to export csv in CanvasJS in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related