如何使用谷歌图表与数据从CSV(How to use Google Chart with data

我有一个CSV文件看起来像：

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

我想用绘制图表谷歌它的叠式图（一周是我的x（水平）值和值1和values2是两个组的y的）。不幸的是，我没有找到任何简单的方法来做到这一点。这可能涉及到我是在JS一个完整的小白。

有没有简单的方法来做到这一点？

Answer 1:

所述的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);
  });
}

Answer 2:

什么服务器端脚本语言，你在（PHP，ASP）的工作？

一种选择是从保存在谷歌云端硬盘中的电子表格中导入数据时，看到这里保存和谷歌文档中提取数据的基于PHP的例子。这样将使您更新电子表格和图表会自动绘制新的数据。

Answer 3:

我一直在寻找了一段时间，发现在谷歌小组讨论解决方案。 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);
}

文章来源: How to use Google Chart with data from a csv