Google Chart not 100% of div width - Contains Event Listeners to Redraw Chart from Proxy Table

user_7763687 0
Viewed 102

I have implemented the suggestions per @WhiteHat in this post Google Chart not taking up 100% of space

My <div> is 100% width however my chart still renders at only 400px wide. See image. enter image description here

I have the following chart options set.

        "chartType": "ComboChart",
        "containerId": "chartnull_G3G",   
        "view": {"columns":[2,3]}, 
        "options": {
           "chartArea": { "left": "auto", "right": "auto", "top": 50, "bottom": "auto", "width": "80%", "height": "60%", "backgroundColor": "white" },
           "width": "100%",
           "height": 500    
         }

My program flow contains the following steps.

//proxyTable_default and comboChart_default simply creates the content for the chart - this works without problem

var proxyTable = new google.visualization.ChartWrapper(proxyTable_default(element_suffix));
var chart = new google.visualization.ChartWrapper(comboChart_default(null, element_suffix, json.comboChart.options));

addListenersComboChart();

window.addEventListener('resize', function () { proxyTable.draw(); }, false);

proxyTable.setDataTable(proxyView)
proxyTable.draw();

Here's my listener and redraw functions which are referenced above.

function addListenersComboChart() {
    google.visualization.events.addListener(proxyTable, 'ready', function () {
        redrawComboChart(element_suffix, json.comboChart);
    });
}

function redrawComboChart(element_suffix, comboChart) {
    //Do many steps to calculate the finalView_forChart - this works without problem
    chart.setDataTable(finalView_forChart);
    chart.draw();
}

I cannot post my full codebase because it's 1000+ lines long. Everything works ok until the chart does not draw 100% wide. What am I missing?

As always, I appreciate the feedback.

google-visualization charts javascript
1 Answers

@Whitehat is correct. The div was hidden until after the .draw() was called. lib_loadingStatus() unhides the div

BEFORE

proxyTable.setDataTable(proxyView);
proxyTable.draw();    
lib_loadingStatus(element_suffix, "done"); //This code unhides the chart <div>

AFTER

proxyTable.setDataTable(proxyView);    
lib_loadingStatus(element_suffix, "done"); //This code unhides the chart <div>    
proxyTable.draw();

The chart now draws full size. Thank you so much @WhiteHat (Saves the day again!)

user_77636870
Related