如何通过谷歌图表API透过谷歌图表显示数据? 我有多个图表都将具有相同的原始数据表,我创建了对此数据的视图以包括要包含和聚合的特定列,然后我将对数据进行分组,在某些情况下需要从视图或PIVOT数据分组数据。 我目前关注的订单是DataTable - >查看 - >聚合 - >小组 - 任何人都可以帮助他们如何实现这一目标或详细信息吗?我提供了一个小提琴
http://jsfiddle.net/louloumac/pjv64wL0/
/*
test case
create view on table to show only centain columns
1 & 2) aggregate total sources
3) aggregate total cash
4) pivot the table to show total sources per company:WHAT IS BEST WAY TO DO THIS?
|date | company 1 | company 2
|1/1/2016 11:00 | 3 | 2
|1/1/2016 12:00 | 1 | 0
*/
google.charts.load('current', {packages: ['corechart', 'bar','line','table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
//set column type to be number for continuous and string to be discrete for major axis
data.addColumn('datetime', 'start date');
data.addColumn('string', 'tick text');
data.addColumn('number', 'company');
data.addColumn('number', 'Source 1');
data.addColumn('number', 'Source 2');
data.addColumn('number', 'Total Cash');
data.addRows([
[new Date('2016-01-01 00:00'),'2015 WK 53', 1,1,2,230],
[new Date('2016-01-01 00:00'),'2015 WK 53', 1,0,1,100],
[new Date('2016-01-01 00:00'),'2015 WK 53', 2,1,1,100],
[new Date('2016-01-08 00:00'),'2016 WK 1', 1,1,2,230],
[new Date('2016-01-08 00:00'),'2016 WK 1', 1,1,2,230]
]);
//create view on data
var view = new google.visualization.DataView(data);
var table1 = new google.visualization.Table(document.getElementById('table1'));
table1.draw(view);
//set view columns test 1 & 2
view.setColumns([0,1,2,{type: 'number', label: 'Total Sources',
calc: function (dt, row) {
return dt.getValue(row, 3) + dt.getValue(row, 4);
}
}]);
var table2 = new google.visualization.Table(document.getElementById('table2'));
table2.draw(view);
//set view columns test 3
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,1,2,{type: 'number', label: 'Total Cash',
calc: function (dt, row) {
return dt.getValue(row, 5);
}
}]);
var table3 = new google.visualization.Table(document.getElementById('table3'));
table3.draw(view2);
//group by date & company aggregate source totals
var grouped_data_table2 = google.visualization.data.group(view, [0,2], [{ 'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number' }]);
var table3 = new google.visualization.Table(document.getElementById('table3'));
table3.draw(grouped_data_table2);
//group by date & company aggregate cash
var grouped_data_table3 = google.visualization.data.group(view2, [0,2], [{ 'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number' }]);
var table4 = new google.visualization.Table(document.getElementById('table4'));
table4.draw(grouped_data_table3);
/*
how do I pivot the table from the view or the grouped data?
I would like to use the pivoted table to draw the chart
*/
//example chart table below
var pivoteddata = new google.visualization.DataTable();
pivoteddata.addColumn('datetime', 'start date');
pivoteddata.addColumn('string', 'tick text');
pivoteddata.addColumn('number', 'company 1');
pivoteddata.addColumn('number', 'company 2');
pivoteddata.addRows([
[new Date('2016-01-01 00:00'),'2015 WK 53', 4,2],
[new Date('2016-01-08 00:00'),'2016 WK 1', 0,6]
]);
//mock table
var table5 = new google.visualization.Table(document.getElementById('table5'));
table5.draw(pivoteddata);
var viewc = new google.visualization.DataView(pivoteddata);
viewc.setColumns([0,2,3]);
//is there a better way to add ticks to hAxis?
var dates=pivoteddata.getDistinctValues(0);
var ticks=pivoteddata.getDistinctValues(1);
var newTicks=[];
for(i=0;i<ticks.length;i++){
newTicks.push({v: new Date(dates[i]), f: ticks[i]});
}
var chartoptions={
'width':'100%',
"hAxis": {
"ticks":newTicks
}
}
//draw chart with mock pivot data table
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(viewc, chartoptions);
}