[visualization-api] How to not display the data table

Thu, 08 Mar 2012 07:53:55 -0800 

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/-/jpb7CzqakwMJ.
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.

Reply via email to