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>

Doroteya

the div inside your code is not the div where the chart will be drawn(it's #qual_div), are you sure that #chart_div does have a size of 500x500. For me your code works fine with a 500x500 div, the size will be applied correctly to the svg – Bevin

If the answer below worked for you, please click the check mark below the up/down-vote arrows in the answer so that other people can see that this solved your issue. If my answer was not clear enough, or if you are still having issues, please add a comment to the answer explaining what that issue is/what isn't clear. – Dukie

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
};

Dukie

But how will this reflect on window resize? By default my garphs are displayed in 400X200 px. I don't want to set the width/height in options at it may go out of bounds on window resize. How do I deal with this? – Antimonous

@Antimonous Any solution for the width problem? – Cupping

Answer 2

So setting the height and width as in jmac's answer works, but if you want it responsive there is some additional things I had to do.

But just to back up a second the reason I am having this problem in the 1st place is: The div that this chart is displaying in is not visible when the page loads.

As Seen here the hidden Chart Width is Wrong 400 by 200: jsfiddle.net/muc7ejn3/6/

As Seen here the hidden Chart Width is Correct: jsfiddle.net/muc7ejn3/7/

Another way to do it is just to Un-hide the Chart right before chart.draw() is called, then Hide it again, something like:

tempShowChart();
chart.draw(view, options);
hideChartAgain();

This doesn't handle window being resized.

Maestoso

is that an answer or another question? – Tamera

this is an answer to why is google chart showing up at 400px by 200px question. I didn't feel the accepted answer was good enough because it forces you to specify a fixed pixel width and height. My solution, you can specify 50% width on the div and it will adjust, or use bootstrap Columns and it will adjust etc... – Maestoso

Answer 3

I have the same case that the rendered graph has a size of 400 x 200px

After being rendered the svg is wrapped inside 3 divs

<div id="gantt-chart" class="svelte-ql38wl">

  <div style="position: relative; width: 400px; height: 200px;">

    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">

      <svg width="400" height="200"><defs></defs><g><rect x="0" y="0" width="400" height="200" fill="#ffffff"></svg>

    </div>
  </div>
</div>

1. own container set with chart = new google.visualization.Gantt(document.getElementById('gantt-chart'));
2. generated outer wrapper div - width & height set > where? seems to be synced with the svg size
3. generated inner wrapper div - chart area?
4. svg

The inner wrapper div looks like the chart area. Unfortunately changing the values in the options has no effet - always stays 'left: 0px; top: 0px; width: 100%; height: 100%;'

NOTICE I'm drawing a Google Gantt Chart - looks like not all charts have the same possible settings. I find the chartArea option under e.g. 'Column Charts', but it's not listed with 'Gantt Charts'

The main chart documentation says

You can specify the chart size in two places:

1. Specifying the size in HTML - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.
2. Specifying the size as a chart option - If the chart size is in the JavaScript, you can copy and paste, or serialize, save, and restore the JavaScript and have the chart resized consistently.

If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.

Since it looks like the chart size can only be set as a number for pixels (with the gantt chart again - I saw other examples where it seemed to be possible to set percentage...) in my case these settings helped

1. set css of container div + generated children
2. programmatically set height of chart via js

#gantt-chart {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: auto;
}

#gantt-chart div {
        margin: auto; /* centers chart inside container div with display:flex*/
}

let trackHeight = 30

let options = {
  height: dataTable.getNumberOfRows() * trackHeight + 50
  // width adaps to container div with 100% width
}

Boodle