I am trying to take data from a local csv file and display it as a Google line chart within an html file that uses jQuery. I started an http server using Python 3.9, in the folder that my html file and csv data file are in. But when I open the html file, the chart isn't displayed. The command prompt that the server is running in shows Get requests for the html file as it's being accessed, but doesn't show requests for the csv data file after the html file is opened. Also, I don't get a CORS error when using Firefox, but I do if I use Edge. Yet, neither browser displays the line chart.
Below is a copy of the code in the html file:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// get the CSV file
$.get("localhost:8000/data.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
console.log(data);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([1,0]);
// set chart options
var options = {
title: 'Graph',
legend: { position: 'bottom' }
};
// create the chart object and draw it
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(view, options);
});
}
</script>
</head>
<body>
<div id="line_chart" style="width: 600px; height: 400px"></div>
</body>
</html>
The data.csv file contains:
55,0,5,6
60,1,8,10
65,2,0,7
70,3,6,2
55,4,6,5