Comment utiliser Google Chart avec des données provenant d'un csv

J'ai un fichier csv qui ressemble à ça:

week,value1,value2
1,2,3
2,7,9

Je voudrais tracer un graphique empilé de l'aide de google graphique (semaine de mon x (horizontal) les valeurs et les values1 et values2 l'ensemble de y). Malheureusement, je ne trouve pas de moyen facile de le faire. Que, probablement, se rapporte à moi d'être un noob complet en js.

Est-il un moyen simple de le faire?

source d'informationauteur cpa

  1. 13

    La jquery-csv bibliothèque offre la possibilité de traduire une chaîne de csv dans un tableau pour être utilisé par google.visualization.arrayToDataTable() (leur exemple ici). Pour ce faire, ajouter jquery.csv.js sur votre serveur (dans l'exemple ci-dessous je suppose que c'est dans le même dossier que votre fichier HTML) et un lien à votre <head>. Ce qui suit est un simple script, vous pouvez ajouter à votre <head> pour commencer. Je suppose un graphique en nuages de points, mais ce processus fonctionne pour l'une des cartes ici. Vous aurez également besoin d'un <div> avec id="chart" pour que cela fonctionne.

    //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);
  });
}
  2. 0

    Ce serveur langage de script côté êtes-vous à travailler dans (php, asp)?

    Une option pourrait être d'importer les données à partir d'une feuille de calcul enregistré dans Google Drive, voir ici pour un PHP exemple de l'épargne et de l'extraction de données à partir de Google Docs. Cela permettra ensuite à vous de mettre à jour la feuille de calcul et le tableau serait automatiquement tracer les nouvelles données.