¿Cómo puedo colocar un gráfico de Google en una página web?

estoy usando Google Chart. El posicionamiento me elude. No he localizado esa parte en la documentación. Simplemente quiero crear un gráfico de Google dentro de un div con la esquina superior izquierda posicionada en (x, y) en el div. Puntos extra para ayudar a controlar las dimensiones.¿Cómo puedo colocar un gráfico de Google en una página web?

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     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_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

Si miro en el html en 'tiempo de ejecución' usando una herramienta como Firebug veo:

rect x="161" y="96" width="579" height="309"

pero no lo hice elegir cualquiera de esos valores.

Fuente

2012-09-03 zehelvion

Cualquier código de ejemplo? –

Ok, seguí adelante y agregué algunos :) – zehelvion

Por ejemplo, para colocar el gráfico en (0,0) dentro del DIV, se suman a las opciones de gráficos:

var options = { 
      ..., 
      chartArea:{left:0,top:0,width:"50%",height:"50%"} 
}

y ajustar el ancho y la altura que desea; las opciones completas son here.

Fuente

2012-09-04 00:17:17

Acabo de volver a comprobarlo y funcionó muy bien, ¡gracias! – zehelvion

OK, es necesario añadir un poco de HTML adicional:

<body> 
    <div style="position:relative;width:100%"> 
     <div id="chart_div" style="position:absolute;right:0px;top:0px;width: 400px; height: 300px;"></div> 
    </div> 
</body>

La altura del gráfico puede ser controlado por la anchura y altura de la div. La colocación puede ser controlada cambiando, derecho, superior, de cambiar a la izquierda/parte inferior, etc.

Es posible que desee flotar el chart_div, o utilizar cualquier otro método de posicionamiento.

Dependiendo de sus necesidades, esto puede ser suficiente: Si no es así, que me haga saber.

Fuente

2012-09-03 22:47:47

¿Cómo puedo colocar un gráfico de Google en una página web?

Respuesta

Cuestiones relacionadas