[英]Automatically Combine Values using Google Charts
I currently have a dataset called test.csv with the columns: 我目前有一个名为test.csv的数据集,其中包含以下列:
location time
It consists of a number of records, which may be for the same location. 它由许多记录组成,这些记录可能位于同一位置。 ie. 即。 there may be two records where the location is Paris but the time is different and I wish to add them and then plot them as one. 可能有两个记录,其中位置是巴黎,但时间不同,我希望添加它们,然后将它们绘制为一个。
I wish to combine the values of time for all where the value of location is the same when plotting to a bar chart using Google Chart. 我希望在使用Google Chart绘制条形图时,将所有位置值相同的时间值组合起来。 Currently I have written this, but am unsure how to continue: 目前我写了这个,但不确定如何继续:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<title>Google Graph and CSV</title>
<meta name="description" content="test">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> // load the visualisation API
google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>
<script type="text/javascript">
function drawVisualization() {
$.get("test.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
title: 'Room Occupancy for',
titleTextStyle : {color: 'grey', fontSize: 16},
bar: {groupWidth: "95%"},
legend: { position: "none" },
width:400,
height:600,
}
});
crt_ertdlyYY.draw();
});
}
google.setOnLoadCallback(drawVisualization)
</script>
<div id="crt_ertdlyYY"></div>
This produces the following visualisation: Output of code 这会产生以下可视化: 代码输出
use the group() method to aggregate the total for each location 使用group()方法聚合每个位置的总计
var aggData = google.visualization.data.group(
data,
[0],
[{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number',
label: 'Total'
}]
);
then use the grouped data on the chart 然后使用图表上的分组数据
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'crt_ertdlyYY',
dataTable: aggData, // <-- use agg data
options:{
title: 'Room Occupancy for',
titleTextStyle : {color: 'grey', fontSize: 16},
bar: {groupWidth: "95%"},
legend: { position: "none" },
width:400,
height:600,
}
});
EDIT 编辑
a modifier
function can be used to combine locations with different cases modifier
函数可用于组合具有不同情况的位置
var aggData = google.visualization.data.group(
data,
[{
column: 0,
modifier: function (value) {
return value.toUpperCase();
},
type: 'string',
label: 'Location'
}],
[{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number',
label: 'Total'
}]
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.