redraw google chart

Question

I have a table chart rendered with the the google visualization API inside a resizable element. I need to redraw the table after the parent element is resized. After I resize the parent element, I can click a column header to resort the table and it will also redraw the table to fit the new size, but how can i do this programatically?

Answer 1

You can always call again the draw() function on your chart object.

// Global variables, as they are accessed by different functions.
var data;
var options;
var chart;

function drawVisualization() {
    // Create and populate the data table.
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Column');
    data.addColumn('number', 'Value');
    data.addRows([['A', 27.49], ['B', 27.81]]);

    options = {width: 600, height: 600};
    chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    // Here we draw the visualization by first time
    chart.draw(data, options);
}

function resize() {
    options = {width: 300, height: 300};
    // Here we re-draw
    chart.draw(data, options);
}