Make dynamically generated Google Charts Responsive

Question

I have followed the examples to make Google Charts responsive using the code below:

$(document).ready( function () {
    //Make Chart(s) Responsive
    $(window).resize(function(){
        drawVisualization();
    });

This works great in my html prototypes however I am now generating my charts using PHP. As an example I may have to generate n charts so I iterate through a set of data in PHP generating the DIV the chart will reside in, the JSON data and so on.

My DIVs are generated to be unique such as:

<div id="visualization_**identifier**" style="height:200px;">

I then create a function per chart to take care of the rendering.drawing, I can if needed name it uniquely:

function drawVisualization_**identifier**()

This is all working however the jQuery code requires I call each drawVisualization_**identifier**() in turn to refresh the charts, is there a way I can dynamically create a list and refresh them?

I assume I can add a class to my vizualization divs and query for them with typical jQuery code (although I'm not entirely sure how) - if that can be done can I manipulate it in to calls to each drawVisualization_**identifier**() function to perform the refresh?

Something (very roughly!) along the lines of:

$(document).ready( function () {
    //Make Chart(s) Responsive
    $(window).resize(function(){
        foreach(get visualization div names){
            refreshVizualization('vizualization'+vizDivName);
        }
    });

Any help would be much appreciated, while I feel I'm getting there with jQuery and charts this one is making my head hurt. Seems odd that for as fantastic as Google Charts are there doesn't seem to be a "redraw on resize" capability.

Answer 1

Seem I have a tendency to have a bright idea just after giving up and posting my question. I realized that during my PHP chart generation I could also create (in PHP) a javaScript function to do the refresh then call that function from the jQuery resize. The PHP below follows the loop that creates my charts / divs / callback functions and seems to work beautifully.

#Generate Chart Refresh Function to call on Window Resize
print('<script>');
print('function drawVisualization() {');
foreach($entity as $chartid){
    print('   drawVisualization_'.$chartid["uniqueIDperChart"].'();');
}
print('};');
print('</script>');

So, if I have four charts the function will have four drawVizualization_uniqueID(); calls then the function drawVisualization() is called from the jQuery event tied to the window resize.