Use the following code:
$tableWrapper = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'page': 'enable',
'pageSize': '1'
});
Then, <div style="display: none;" id="chart2"></div> in HTML part.
Thank you.
On Thursday, March 8, 2012 10:52:01 PM UTC+5:30, asgallant wrote:
>
> 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/-/LoL8H65RNo0J.
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.
