2013-01-08 10 views
9

Ho un file CSV che si presenta così:Come utilizzare Google Tabella con i dati da un file CSV

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

Vorrei tracciare un grafico in pila di usando Google Chart (Settimana essendo miei x (orizzontale) valori e valori1 e valori2 essendo i due set di y). Sfortunatamente, non ho trovato nessun modo semplice per farlo. Questo probabilmente si riferisce al fatto che sono un noob completo in js.

C'è un modo semplice per farlo?

risposta

12

jquery-csv library fornisce la capacità di tradurre una stringa di csv in una matrice da utilizzare da google.visualization.arrayToDataTable() (il loro esempio here). Per fare in modo che funzioni, aggiungi jquery.csv.js al tuo server (nell'esempio seguente presumo sia nella stessa cartella del tuo HTML) e collegalo ad esso nel tuo <head>. Quello che segue è uno script semplice che puoi aggiungere al tuo <head> per iniziare. Presumo un grafico a dispersione, ma questo processo funziona per uno qualsiasi dei grafici here. Avrai anche bisogno di un <div> con id="chart" affinché funzioni.

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

Quale linguaggio di scripting lato server stai lavorando (php, asp)?

Un'opzione potrebbe essere quella di importare i dati da un foglio di calcolo salvato in Google Drive, see here per un esempio basato su PHP di salvataggio ed estrazione di dati da Google Docs. Ciò consentirebbe quindi di aggiornare il foglio di calcolo e il grafico traccia automaticamente i nuovi dati.

+1

Voglio farlo interamente lato client (il server deve solo servire il file html e il csv) ... – cpa

Problemi correlati