Saltar al contenido

Cómo utilizar Google Chart con datos de un csv

Solución:

La biblioteca jquery-csv proporciona la capacidad de traducir una cadena de csv en una matriz para ser utilizada por google.visualization.arrayToDataTable() (su ejemplo aquí). Para que esto funcione, agregue jquery.csv.js a su servidor (en el ejemplo a continuación, supongo que está en la misma carpeta que su HTML) y vincúlelo en su <head>. El siguiente es un script simple que puede agregar a su <head> Para empezar. Asumo un gráfico de dispersión, pero este proceso funciona para cualquiera de los gráficos aquí. También necesitará un <div> con id="chart" para que esto funcione.

// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

// this has to be a global function
function drawChart() {
   // grab the CSV
   $.get("example.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);

      // this view can select a subset of the data at a time
      var view = new google.visualization.DataView(data);
      view.setColumns([0,1]);

     // set chart options
     var options = {
        title: "A Chart from a CSV!",
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
        legend: 'none'
     };

     // create the chart object and draw it
     var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
     chart.draw(view, options);
  });
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *