Estoy tratando de tomar datos de un archivo csv local y mostrarlo como un gráfico de líneas de Google dentro de un archivo html que usa jQuery. Inicié un servidor http con Python 3.9, en la carpeta en la que se encuentran mi archivo html y mi archivo de datos csv. Pero cuando abro el archivo html, no se muestra el gráfico. El símbolo del sistema en el que se ejecuta el servidor muestra Obtener solicitudes para el archivo html a medida que se accede, pero no muestra solicitudes para el archivo de datos csv después de abrir el archivo html. Además, no recibo un error CORS cuando uso Firefox, pero sí si uso Edge. Sin embargo, ninguno de los navegadores muestra el gráfico de líneas.
A continuación se muestra una copia del código en el archivo html:
<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>El archivo data.csv contiene:
55,0,5,6 60,1,8,10 65,2,0,7 70,3,6,2 55,4,6,5