I,m very new to the visualization API and can't figure out how to not display the data table without getting an error message. I have about 50,000 records which is way too many to display. I can comment out the div tag for the table but then I get the error that one of the participants failed to draw. The code I am using is below. Thanks for any and all help.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
google.load('visualization', '1', {packages:['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Date','Gender','Avg/Score','Age','Rounds/Year','Comp Ball','Comp Swing Speed'],
['2008','male','85-93','-34','12','S-AD333', 65],
['2008','female','85-93','-34','12','S-AD333', 86],
['2008','male','85-93','-34','12','S-AD333', 98],
['2008','male','85-93','51-65','12','S-AD333', 101],
['2008','male','85-93','51-65','12','S-AD333', 115],
['2008','female','106-','51-65','48','S-AD333', 97]
]);
var $pieChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': 500,
'height': 300,
},
//group the data for the pie chart
'dataTable' : google.visualization.data.group(data, [1],
[{'column': 1, 'aggregation': google.visualization.data.count, 'type': 'number'}])
});
$pieChart.draw();
$tableWrapper = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2'
});
var $genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'gender_filter',
'options': {
'filterColumnIndex': '1',
'useFormattedValue' : true,
'ui': {
'allowTyping': false,
'allowMultiple': false,
'labelStacking': 'vertical'
}
}
});
var $compBallPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'compBall_filter',
'options': {
'filterColumnIndex': '5',
'useFormattedValue' : true,
'ui': {
'allowTyping': false,
'allowMultiple': true,
'labelStacking': 'vertical'
}
}
});
var $avgScorePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'avgScore_filter',
'options': {
'filterColumnIndex': '2',
'useFormattedValue' : true,
'ui': {
'allowTyping': false,
'allowMultiple': true,
'labelStacking': 'vertical'
}
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([$genderPicker,$compBallPicker,$avgScorePicker], [ $tableWrapper]).
draw(data);
google.visualization.events.addListener($genderPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
$pieChart.setDataTable( google.visualization.data.group(
// get the filtered results
$tableWrapper.getDataTable(),
[1],
[{'column': 1, 'aggregation': google.visualization.data.count, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
$pieChart.draw();
});
google.visualization.events.addListener($compBallPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
$pieChart.setDataTable( google.visualization.data.group(
// get the filtered results
$tableWrapper.getDataTable(),
[1],
[{'column': 1, 'aggregation': google.visualization.data.count, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
$pieChart.draw();
});
google.visualization.events.addListener($avgScorePicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
$pieChart.setDataTable( google.visualization.data.group(
// get the filtered results
$tableWrapper.getDataTable(),
[1],
[{'column': 1, 'aggregation': google.visualization.data.count, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
$pieChart.draw();
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 200px; font-size: 0.9em;'>
<div id="gender_filter"></div>
<div id="compBall_filter"></div>
<div id="avgScore_filter"></div>
</td>
<td style='width: 900px'>
<div style="float: left;" id="chart1"></div>
<!--<div style="float: left;" id="chart2"></div>-->
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
</body>
</head>
</html>