Well, you do have yourself a bit of a sticky wicket there. I've been
trying to think of a hack around the problem of grouping data within a
Dashboard, and I haven't been able to come up with any that are any better
than what you have here. There are a couple of things you can try:
1) if you don't mind showing your users the table, you can use pagination
to limit the number of results displayed at any one point in time:
var $tableWrapper = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
page: 'enable'
});
2) if you really don't want users to see the table, you can hide the div
that the table is drawn in. Usually, I would recommend doing this after
the chart has finished drawing (as they don't always draw correctly in
hidden divs), but in your case, since you don't want to show it ever, you
can hide it to start with.
What is really needed here is the ability to define a view with a grouping
function (or have a dashboard/chartwrapper function that does grouping).
On Thursday, March 8, 2012 10:52:28 AM UTC-5, Andrew wrote:
>
> Hi All,
>
> 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.
>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
> <title>
> Google Visualization API Sample
> </title>
> <script type="text/javascript" src="http://www.google.com/jsapi
> "></script>
> <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>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/L5iZ8hLSvG8J.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
