Resize a chart on parent div resize

Question

Hello everyone, hopefully someone can help me with something that has been bugging me.

I've got a page that is based on a fluid grid system. I'm using the gvchart plug-in: http://www.ivellios.toron.pl/technikalia/2010/06/22/gvchart-plugin-jquery-with-google-charts/ to use generate Google charts from a table. Everything works fine except when the browser is resized elements begin to overlay as the chart has a set width in the JS e.g.:

jQuery('#myTable').gvChart({
    chartType: 'AreaChart',
    gvSettings: {
        vAxis: {title: 'No of players'},
        hAxis: {title: 'Month'},
        width: 600,
        height: 300
    }
});

So is there anyway to have it so when the browser is resized the chart is regenerated to the correct width of the parent element?

Many thanks

Answer 1

You can set the dimensions of the chart on resize event of window.

$(window).resize(function() {
    resetDimensions();
});

resetDimensions is the method where you set width and height of the graph.