First, all ready event handlers should be created before making any related
draw calls - otherwise, the chart might draw and throw its ready event
before the event handler is created.
In your specific case, setting the ready event handler on the Dashboard is
insufficient, because you don't draw the other charts until after the
Dashboard is done drawing. By virtue of having multiple charts driven off
of another chart that ties into the Dashboard, there is no single ready
event that you can rely on to let you know that all of the charts are done
- you have to create event handlers for every chart individually. Things
get even more complicated when you take into account that interacting with
the controls will cause redraws, and each chart will have to be visible for
its redraw, or they will get messed up again. Have I mentioned that this
hidden div bug is my absolute, all-time favorite bug in the API?
Here's a skeleton framework for doing this:
google.visualization.events.addListener(dummyTable, 'ready', function () {
// track which sections are hidden
var sectionsHidden = {
section1: $('.section1').hasClass('hidden'),
section2: $('.section2').hasClass('hidden'),
section3: $('.section3').hasClass('hidden')
};
// track all charts
var chartsReady = {
Chart1: false,
Chart5: false,
Chart6: false,
Chart7: false,
Chart8: false,
Chart9: false,
Chart10: false,
Chart11: false,
Chart12: false,
Chart13: false,
Chart14: false,
Chart15: false,
Chart16: false,
Chart17: false,
Chart18: false
}
function chartReady (chart) {
// this chart is ready
chartsReady[chart] = true;
var allReady = true;
for (var x in chartsReady) {
if (!chartsReady[x]) {
// if any chart is not ready, back out
allReady = false;
break;
}
}
if (allReady) {
// if all charts are ready, re-hide sections as necessary
for (var x in sectionsHidden) {
if (sectionsHidden[x]) {
$('.' + x).addClass('hidden');
}
}
}
}
// unhide all sections
$('.section1').removeClass('hidden');
$('.section2').removeClass('hidden');
$('.section3').removeClass('hidden');
var dt = dummyTable.getDataTable();
var filterView1 = new google.visualization.DataView(dt);
filterView1.setRows(dt.getFilteredRows([{'column': 2, 'value':
'City/Town/Place*'}]));
var view1 = new google.visualization.DataView(filterView1);
view1.setRows(filterView1.getSortedRows(3));
Chart1.setDataTable(view1);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart1');
});
Chart1.draw();
var view5 = new google.visualization.DataView(dt);
view5.setRows(dt.getSortedRows(21));
Chart5.setDataTable(view5);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart5');
});
Chart5.draw();
var view6 = new google.visualization.DataView(dt);
view6.setRows(dt.getSortedRows(4));
Chart6.setDataTable(view6);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart6');
});
Chart6.draw();
var view7 = new google.visualization.DataView(dt);
view7.setRows(dt.getSortedRows(5));
Chart7.setDataTable(view7);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart7');
});
Chart7.draw();
var view8 = new google.visualization.DataView(dt);
view8.setRows(dt.getSortedRows(7));
Chart8.setDataTable(view8);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart8');
});
Chart8.draw();
var view9 = new google.visualization.DataView(dt);
view9.setRows(dt.getSortedRows(14));
Chart9.setDataTable(view9);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart9');
});
Chart9.draw();
var view10 = new google.visualization.DataView(dt);
view10.setRows(dt.getSortedRows(24));
Chart10.setDataTable(view10);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart10');
});
Chart10.draw();
var view11 = new google.visualization.DataView(dt);
view11.setRows(dt.getSortedRows(35));
Chart11.setDataTable(view11);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart11');
});
Chart11.draw();
var view12 = new google.visualization.DataView(dt);
view12.setRows(dt.getSortedRows(27));
Chart12.setDataTable(view12);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart12');
});
Chart12.draw();
var view13 = new google.visualization.DataView(dt);
view13.setRows(dt.getSortedRows(28));
Chart13.setDataTable(view13);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart13');
});
Chart13.draw();
var view14 = new google.visualization.DataView(dt);
view14.setRows(dt.getSortedRows(32));
Chart14.setDataTable(view14);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart14');
});
Chart14.draw();
var view15 = new google.visualization.DataView(dt);
view15.setRows(dt.getSortedRows(32));
Chart15.setDataTable(view15);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart15');
});
Chart15.draw();
var view16 = new google.visualization.DataView(dt);
view16.setRows(dt.getSortedRows(36));
Chart16.setDataTable(view16);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart16');
});
Chart16.draw();
var view17 = new google.visualization.DataView(dt);
view17.setRows(dt.getSortedRows(40));
Chart17.setDataTable(view17);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart17');
});
Chart17.draw();
var view18 = new google.visualization.DataView(dt);
view18.setRows(dt.getSortedRows(43));
Chart18.setDataTable(view18);
google.visualization.addOneTimeListener(Chart1, 'ready', function () {
chartReady('Chart18');
});
Chart18.draw();
});
You'll have to test it and it will probably require some tweaking to get
exactly right.
On Monday, August 25, 2014 11:51:35 AM UTC-4, AM wrote:
>
> Hi Andrew,
>
> I posted the wrong link. Here it is:
>
>
> http://www.towncharts.com/California/Demographics/Acalanes-Ridge-CDP-CA-Demographics-data-workingOn.html
>
> The new event handler is on line 380.
>
> Thanks for any help.
>
>
>
> On Monday, August 25, 2014 5:40:30 AM UTC-7, Andrew Gallant wrote:
>>
>> I looked over the code, but I could not find that event handler - where
>> did you put it?
>>
>> On Sunday, August 24, 2014 6:51:24 PM UTC-4, AM wrote:
>>>
>>> Thanks Andrew. I followed your direction, removed the code that was
>>> hiding the DIVs, and then added an event handler on the toolbar 'ready'
>>> event where I hide the divs I don't want to show. Here is the code:
>>>
>>> var dashboard = new
>>> google.visualization.Dashboard(document.getElementById('dummy_table_div'));
>>> dashboard.bind([categoryPicker1],[dummyTable,Chart4]).draw(data1);
>>> google.visualization.events.addListener(dashboard,'ready',function(){
>>> console.log('Charts were drawn!'); // charts cannot yet be seen on
>>> the screen, though, on breakpoint
>>> $('.section2').addClass('hidden');
>>> $('.section3').addClass('hidden');
>>> });
>>>
>>> This still doesn't fix the problem - you can see the problem at
>>> http://www.towncharts.com/California/Demographics/Acalanes-Ridge-CDP-CA-Demographics-data.html
>>> Just select the 3rd option (singles) in the Demographics menu item.
>>>
>>> thanks,
>>> anthony
>>>
>>>
>>> On Wednesday, August 20, 2014 6:04:53 PM UTC-7, Andrew Gallant wrote:
>>>>
>>>> This is caused by drawing charts inside hidden divs, which breaks the
>>>> Visualization API's internal dimension detection algorithms. The solution
>>>> is to draw the charts before hiding them, or to draw the charts when their
>>>> containers are first opened.
>>>>
>>>> On Wednesday, August 20, 2014 8:59:28 PM UTC-4, AM wrote:
>>>>>
>>>>> I've been creating pages with a lot of Google Charts.
>>>>>
>>>>> To make the pages more manageable I put groups of charts together into
>>>>> Div tags. Then I have a menu that shows or hides the various groups of
>>>>> charts (i.e. Div tags). When I show charts that were hidden they show up
>>>>> with their legends garbled.
>>>>>
>>>>> Here is an example:
>>>>> http://www.towncharts.com/Alabama/Demographics/Abanda-CDP-AL-Demographics-data-garbled.html
>>>>>
>>>>> Check the first menu item, "Demographics" which is a drop down. Just
>>>>> pick Section 3.
>>>>>
>>>>> Is this something that I can rectify with a setting of some type? Has
>>>>> anyone seen this before?
>>>>>
>>>>> Thanks for any help!
>>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
