从CSV输入创建Google图表

我正在尝试从CSV输入创建Google图表。从CSV输入创建Google图表

这里是我当前的代码（在教程中），遗憾的是不工作产生的结果是一个空表：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Google Chart Example</title> 
    <script src="https://www.google.com/jsapi"></script> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="jquery.csv-0.71.min.js"></script> 
    <script type='text/javascript'> 
     // wait till the DOM is loaded 
     $(function() { 
     // grab the CSV 
     $.get("post.csv", function(csvString) { 
      // display the contents of the CSV 
      $("#chart").html(csvString); 
     }); 
     }); 

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

    function drawChart() { 
    // grab the CSV 
    $.get("miez.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]); 
    var options = { 
    title: "Weight tracking", 
    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' 
    }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart')); 
chart.draw(view, options); 
    }); 
    } 
    </script> 

</head> 
<body> 
    <div id="chart"> 

    </div> 
</body> 
</html>

的CSV是相当简单的，有刚日期和重量。

Date,Weight 
2014-10-25 09:58:30 +0000,86.025 
2014-10-25 10:14:38 +0000,88.44836 
2014-10-25 13:08:13 +0000,84.04703

来源

2014-10-26 Adrian

的jquery-csv library提供了CSV的字符串翻译成阵列以由google.visualization.arrayToDataTable()（其例如here）中使用的能力。要做到这一点，请将jquery.csv.js添加到您的服务器（在下面的示例中，我假设它位于与HTML相同的文件夹中）并链接到您的服务器<head>。以下是一个简单的脚本，您可以将它添加到您的<head>以开始使用。我假设有一个散点图，但是这个过程适用于任何图表here。图表呈现的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); 
    }); 
}

来源

2014-10-26 18:37:19 void

感谢您的帮助。我现在得到一个“X值列不能是字符串类型”错误，仍然是一个空白页面。我试图从csv文件的顶部删除“Date，Weight”，没有帮助。 – Adrian 2014-10-26 19:20:27

我认为你的问题的一部分可能是你使用的日期格式。根据documentation,arrayToDataTable无法处理DateTime格式;所有数据必须是数字。

他们建议的解决方案是创建一个空表并使用addColumn()手动添加数据。

我快速的测试，你可以做的就是改变你的csv文件是：

Date,Weight 
0,86.025 
1,88.44836 
3,84.04703

如果你得到一个图表，只是不知道这是问题的日期。

来源

2014-11-05 18:22:51

从CSV输入创建Google图表

回答

相关问题