从CSV输入创建Google图表
Create Google Chart from CSV input
我正试图从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
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);
});
}
我认为您的部分问题可能是您使用的日期格式。根据文档,arrayToDataTable
无法处理DateTime格式;所有数据都必须是数字。
他们建议的解决方案是创建一个空表,并使用addColumn()
手动添加数据。
我可以做的快速测试就是将你的csv文件更改为:
Date,Weight
0,86.025
1,88.44836
3,84.04703
如果你得到一张图表,只是没有日期,你就知道这就是问题所在。
相关文章:
- 在gwt HTMLPanel中使用JavaScript运行Google图表
- Google图表HTML工具提示,其中包含javascript onclick事件
- 在一个C#页面上显示多个Google图表
- Javascript数组或Google图表视图.setColumns
- 将MySQL中的JSON导入Google图表
- 使用Google图表API和源于PHP-的值
- no-op if 语句会导致 Google 图表失败
- Google 图表 - 设置选择不会滚动到表格可视化中的选定行
- 如何获取先前创建的Google图表的实例
- 如何确保Google图表面板中的过滤饼图保持一致的切片颜色
- 绘制的节点和Google图表/可视化中的数据节点之间的关系
- Salesforce.com和Google图表API数据查询
- 在服务器端保存Google图表
- Google图表:轴#0的数据列不能为字符串类型
- Spring MVC与Google图表,创建javascript数据表的最佳方式是什么
- 使用Google图表只显示主要值
- 在Ajax上加载Google图表——成功
- 来自 C# 的 Google 图表 JavaScript 值
- 如何使用for循环动态地将行添加到Google图表
- 用于日期格式的 Google 图表范围过滤器控件