Good Evening,
Im trying to get the chartRangeFilter to show some aggregated data in his
chart right now my code looks like this:
// Load the Visualization API
google.load('visualization', '1.0', {'packages':['controls']});
//Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
function drawDashboard(){
var data = new google.visualization.DataTable();
var called = false;
data.addColumn('string', 'MyRace');
data.addColumn('string', 'EnemyRace');
data.addColumn('string', 'Map');
data.addColumn('number', 'GameLength');
data.addColumn('number', 'WinOrLose');
data.addColumn('date', 'Datum');
data.addRows([
['Zerg','Zerg','Map1', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Terran','Map5', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map4', 15.8 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map1', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map3', 13.4 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map2', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Zerg','Map4', 11.9 , 0, new Date(2013, 12,
30)],['Zerg','Terran','Map3', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Protoss','Map5', 12.3 , 1, new Date(2013, 12,
30)],['Zerg','Zerg','Map1', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Terran','Map1', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map5', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Zerg','Map2', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Terran','Map1', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map2', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map2', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map4', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map3', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Zerg','Map5', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Terran','Map4', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map1', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Zerg','Map2', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map2', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Protoss','Map1', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map3', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Terran','Map2', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map4', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map3', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Zerg','Map5', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map4', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Terran','Map1', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Terran','Map5', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Protoss','Map2', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Zerg','Map1', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Zerg','Map3', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Protoss','Map2', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map4', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Terran','Map3', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map5', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map4', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Zerg','Map1', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map5', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Terran','Map2', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Terran','Map1', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Protoss','Map3', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Zerg','Map2', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Zerg','Map4', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Protoss','Map3', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map5', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Terran','Map4', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map1', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map5', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Zerg','Map2', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map1', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Terran','Map3', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map2', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Protoss','Map4', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Protoss','Map3', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Zerg','Map3', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map4', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Terran','Map1', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Terran','Map5', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Protoss','Map2', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Protoss','Map2', 10.2 , 0, new Date(2013, 12, 30)],
['Zerg','Zerg','Map3', 10.2 , 1, new Date(2013, 12,
30)],['Zerg','Zerg','Map2', 10.2 , 1, new Date(2013, 12, 30)],
['Zerg','Terran','Map4', 10.2 , 0, new Date(2013, 12,
30)],['Zerg','Zerg','Map1', 10.2 , 0, new Date(2013, 12, 30)]
]);
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard_div'));
function percent(arr){
var sum = 0;
for(var i=0;i<arr.length;i++){
sum=sum+arr[i];
}
return sum/arr.length;
}
tableWrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'Table_div'
});
var GL = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'GL_div',
'options': {
'filterColumnIndex': '3',
'ui': {
'chartType': 'ComboChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'},
'seriesType': 'bars'
},
'chartView': google.visualization.data.group(data, [3],
[{'column': 4, 'aggregation': google.visualization.data.count, 'type':
'number'}])
}
}
});
var MyRace = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'MyRace_div',
'options': {
'filterColumnIndex': '0'
}
});
var Datum = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'Datum_div',
'options': {
'filterColumnIndex': '5'
}
});
google.visualization.events.addListener(dashboard, 'ready',
function() {
//redraw the barchart with grouped data
//console.log("redraw grouped");
var dt=tableWrapper.getDataTable();
var grouped_dt = google.visualization.data.group(dt, [1],
[{'column': 4, 'aggregation': percent, 'type': 'number', 'name':
'Winratio'}]);
var formatter = new
google.visualization.NumberFormat({pattern:'##.#%'});
formatter.format(grouped_dt,1);
var mainChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart_div',
options: {
title: 'Winratios gegen die verschiedenen Rassen',
width: 400,
height: 300,
backgroundColor: '#232326',
titleTextStyle: {color: '#99999b'},
vAxis: {
textStyle: {color: '#99999b'}
},
hAxis: {textStyle: {color: '#99999b'}, ticks:
[0,0.2,0.4,0.6,0.8,1] },
legend: 'none'
},
//view columns from the grouped datatable
'view': {'columns': [0, 1]},
'dataTable':grouped_dt
});
mainChart.draw();
});
dashboard.bind([MyRace,GL,Datum],[tableWrapper]);
dashboard.draw(data);
}
The Problem is, that instead of drawing the ChartRangeFilter I get the
following Error:
All series on a given axis must be of the same data type
I don't understand why. The aggregated data is of the value number and even
the values I group by are of the type number.
Would be very nice if someone could help me, as I wasn't able to find the
reason at all.
Greetings
Max
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
