Google chart default size

Question

I have a Google chart that is set to 500px by 500px, yet returns 400px by 200px. I have looked at the div, and it shows 500x500. I have no reason for why the chart comes back at 400x200. the div shows 500x500, but the SVG rectangle box shows 400x200, making all of the images smaller.

Is there a setting I don't know?

<div class="span5"> <div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div> </div>     <script type="text/javascript">   var data, options, chart;   google.load("visualization", "1", {packages:["corechart"]});   google.setOnLoadCallback(drawChart);   function drawChart() {     data = google.visualization.arrayToDataTable([       ['Qual', 'Stat'],       ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],       ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],       ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],       ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],       ['Speed',    {{ $stats->attributes['sa_speed'] }}],       ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],       ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],       ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]     ]);      options = {       title: 'My Daily Activities'       ,chartArea:{left:0,top:0,width:"100%",height:"100%"}     };      chart = new google.visualization.PieChart(document.getElementById('chart_div'));     chart.draw(data, options);   }    function adjustChart(nm, vl) {     for (var r=0; r<data.D.length; r++) {       if (data.D[r].c[0].v == nm) {         data.D[r].c[1].v = parseInt(vl);         break;       }     }     chart.draw(data, options);   } </script> 

Answer 1

There are several ways to set the size of a chart.

The first is to set the size of the element that contains it. The chart will default to the width and height of the containing element (see Google Visualization documentation for default values of height/width).

The second is to not define the actual size of the element, and instead set the height/width of the chart to 500px each manually by adding those to your options:

options = {   title: 'My Daily Activities'   ,chartArea:{left:0,top:0,width:"100%",height:"100%"}   ,height: 500   ,width: 500 }; 

What you are actually doing in your code is setting the size of the chart plot itself (not of the overall chart element with the axes, labels, and legend). This will cause the chart plot area to become 500px by 500px if you point to the appropriate div as pointed out by @Dr.Molle in the comments.

Assuming you don't want that, your new options would be:

options = {   title: 'My Daily Activities'   ,height: 500   ,width: 500 };