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.
On Thursday, March 8, 2012 12:22:01 PM UTC-5, 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>
>>
>
On Thursday, March 8, 2012 12:22:01 PM UTC-5, 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/-/MGeV9wmcnJcJ.
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.
