How to not display the data table

Andrew

unread,

Mar 8, 2012, 10:52:28 AM3/8/12

to google-visua...@googlegroups.com

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.

<head>

<title>

Google Visualization API Sample

</title>

google.load('visualization', '1.1', {packages: ['controls']});

google.load('visualization', '1', {packages:['table']});

</script>

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>

<table>

</td>

</td>

</tr>

</table>

</div>

</body>

</head>

</html>

asgallant

unread,

Mar 8, 2012, 12:22:01 PM3/8/12

to google-visua...@googlegroups.com

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).

MadMax

unread,

Mar 9, 2012, 7:38:31 AM3/9/12

to Google Visualization API

I haven't checked you code for other errors, but try using:

<div style="display:none;" id="chart2"></div>

instead of

in your html. I've used it to hide other elements successfully.

Max
www.energymatters.com.au

Andrew

unread,

Mar 9, 2012, 11:11:06 AM3/9/12

to google-visua...@googlegroups.com

Max, thanks for the response. It appears that using display:none does work, but not very well. With about 50,000 records it takes about 25 seconds for the chart to appear. It also takes about 25 seconds when you choose something from one of the pickers. I'll keep searching for a solution.

Andrew

unread,

Mar 9, 2012, 11:18:28 AM3/9/12

to google-visua...@googlegroups.com

On Thursday, March 8, 2012 10:52:28 AM UTC-5, Andrew wrote:

Andrew

unread,

Mar 9, 2012, 11:18:50 AM3/9/12

to google-visua...@googlegroups.com

Thanks for the info. I tried using display:hidden and display:none but it is very slow. It appears as though it is drawing the table and then hiding it. I could be wrong about this. With about 50,000 records it takes about 25 seconds for the chart to appear. It also takes about 25 seconds when you choose something from one of the pickers. If I comment out the div tag the response time is very fast, but I get the error. I'll keep searching.

asgallant

unread,

Mar 9, 2012, 1:32:23 PM3/9/12

to google-visua...@googlegroups.com

The API is still inserting a 50000 row table into HTML, even if you can't see it. Maybe you would have luck setting the 'page' option to 'enable' for the table; that should knock it down to a 10 row table, which takes essentially no time to add.

Message has been deleted

Pradeep Shankar M

unread,

Apr 27, 2013, 5:13:43 AM4/27/13

to google-visua...@googlegroups.com

Please find my sample code here. I think it will solve your problem.

Reply all

Reply to author

Forward