Google chart width

Question

I have the following code for creategoogle graphs:

google.load("visualization", "1", {packages:["corechart"]}); var options = { .... }; var data = google.visualization.arrayToDataTable([ ... ]); var chart = new google.visualization.BubbleChart(document.getElementById('consumer_s1')); chart.draw(data, options); 

In the documentation for BubbleChart, Google says: "default-width: width of the containing element." I have this container:

 <div class="responsive" id="consumer_s1"> 

from

 .responsive{ height: 100%; width: 100%; } 

But when I create the chart, in Firebug I see that Googlechart created these elements:

 <div style="position: relative; width: 400px; height: 200px;" dir="ltr"> <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="Un grafico."> <svg width="400" height="200" style="overflow: hidden;" aria-label="Un grafico." aria-hidden="true"> ...... 

Why does the first div created have this value for height and width?

Answer 1

Example:

 function drawChart1() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 800, 'height': 600, chartArea: {left: 0, top: 0, width: "100%", height: "100%"} }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } 

BUT one important thing : if the loading of diagrams is in a hidden area, for example, in tabs, the size always drops to 400x200, so keep this in mind. In this case, to correctly initialize the diagrams, first click on this tab OR any special button with the drawChart1 ... action.

Answer 2

I had a similar problem with resizing a window. My fix:

 var container = document.getElementById("consumer_s1").firstChild.firstChild; container.style.width = "100%"; 

Answer 3

Do you have a width in your GoogleChart settings? Something like that:

 var options = { ... width: 400, height: 200, ... }; 

You can force the size chart here. I do not know if it works with%.

Answer 4

I decided to use .. http://codepen.io/shoogledesigns/pen/BfLkA

There are html directives:

 <div class="grid"> <div class="col-1-2"> <div id="chart_div1" class="chart"></div> </div> <div class="col-1-2"> <div id="chart_div2" class="chart"></div> </div> </div> 

And js code:

 google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart1); function drawChart1() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); chart.draw(data, options); } google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart2); function drawChart2() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div2')); chart.draw(data, options); } $(window).resize(function(){ drawChart1(); drawChart2(); });