google-visualization - examples - google charts label

Tamaño predeterminado de Google chart

Question

Tengo un gráfico de Google que se establece en 500px por 500px, pero devuelve 400px por 200px. He mirado el div, y muestra 500x500. No tengo ninguna razón por la que el gráfico vuelva a 400x200. la div muestra 500x500, pero la caja del rectángulo SVG muestra 400x200, haciendo todas las imágenes más pequeñas.

¿Hay un ajuste que no sé?

<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

Así que configurar la altura y el ancho como en la respuesta de jmac funciona, pero si quieres que responda, hay algunas cosas adicionales que tuve que hacer.

Pero solo para retroceder un segundo, la razón por la que tengo este problema en primer lugar es: La división en la que se muestra este gráfico no se ve cuando se carga la página.

Como se ve aquí, el ancho del gráfico oculto es incorrecto 400 por 200: jsfiddle.net/muc7ejn3/6/

Como se ve aquí, el ancho oculto de la gráfica es correcto : jsfiddle.net/muc7ejn3/7/

Otra forma de hacerlo es simplemente Des-ocultar el gráfico justo antes de llamar a chart.draw (), luego esconderlo nuevamente, algo como:

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

Esto no controla el tamaño de la ventana.

Answer 2

Hay varias formas de establecer el tamaño de un gráfico.

El primero es establecer el tamaño del elemento que lo contiene. El gráfico se ajustará por defecto al ancho y alto del elemento que lo contiene ( consulte la documentación de Visualización de Google para conocer los valores predeterminados de alto / ancho ).

La segunda es no definir el tamaño real del elemento y, en su lugar, establecer el alto / ancho del gráfico a 500px cada uno manualmente agregando esos a sus opciones:

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

Lo que realmente está haciendo en su código es establecer el tamaño del gráfico del gráfico (no del elemento del gráfico general con los ejes, las etiquetas y la leyenda). Esto hará que el área del gráfico del gráfico se convierta en 500 px por 500 px si apunta a la división apropiada como lo indica @ Dr.Molle en los comentarios.

Suponiendo que no quieres eso, tus nuevas opciones serían:

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