web-dev-qa-db-ja.com

csvからのデータでGoogleChartを使用する方法

次のようなcsvファイルがあります。

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

グーグルチャートを使用してそれの積み上げグラフをプロットしたいと思います（週は私のx（水平）値であり、values1とvalues2はyの2つのセットです）。残念ながら、そうする簡単な方法は見つかりませんでした。それはおそらく私がjsの完全な初心者であることに関係しています。

それを行う簡単な方法はありますか？

javascriptcsvgoogle-visualization
12
cpa

jquery-csvライブラリ は、csvの文字列をgoogle.visualization.arrayToDataTable()で使用される配列に変換する機能を提供します（例 ここ ）。これを機能させるには、jquery.csv.jsをサーバーに追加し（以下の例では、HTMLと同じフォルダーにあると想定しています）、<head>でリンクします。以下は、開始するために<head>に追加できる簡単なスクリプトです。散布図を想定していますが、このプロセスはどのグラフでも機能します ここ 。これを機能させるには、<div>とid="chart"も必要です。

// 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);
  });
}
14
Jon Page

どのサーバーサイドスクリプト言語で作業していますか（php、asp）？

1つのオプションは、Googleドライブに保存されたスプレッドシートからデータをインポートすることです。 ここを参照 PHPベースのGoogleドキュメントからのデータの保存と抽出の例）これは、次に、スプ​​レッドシートを更新できるようにすると、チャートは新しいデータを自動的にプロットします。

0
Ross Anthony

私はしばらく探していましたが、Googleグループディスカッションで解決策を見つけました。 https://groups.google.com/forum/#!topic/google-visualization-api/cnXYDr411tQ

私はそれを試しました、そしてそれはうまくいきます！

この場合、csvファイルのヘッダータイプを指定する必要があります。

var queryOptions = {
    csvColumns: ['number', 'number', 'number' /* Or whatever the columns in the CSV file are */],
    csvHasHeader: true /* This should be false if your CSV file doesn't have a header */
}
/* csvUrl is the path to your csv */    
var query = new google.visualization.Query(csvUrl, queryOptions);
query.send(handleQueryResponse);

function handleQueryResponse(response) {

    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();

    var chart = new google.visualization.ColumnChart(document.getElementById('your div'));
    // Draw your chart with the data table here.
    // chart.draw(view, queryOptions);
}
0
gurpreet bajwa