Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Gráfico de barra vertical con la librería de Google Chart API

El concepto trata sobre:php,mysql
Autor:

Retornar

Nombre del archivo:menu.html

Comentarios
El objetivo de este concepto es implementar un gráfico de barra vertical empleando la librería Google Chart API.
Esta librería genera en forma dinámica una imagen con formato PNG. La imagen es un gráfico estadístico que
se configura con los parámetros que se pasan en la llamada a una página del servidor de google.
Veremos más adelante que parámetros son posibles y que representan.
El problema a resolver es un gráfico con tres barras verticales que representan la cantidad de usuarios con
edades comprendidas:
0 y 17
18 y 40
41 en adelante.
Nombre del archivo:creartabla.php

Comentarios
Borrado de la tabla usuarios si existe, creación y carga de datos de prueba.
Nombre del archivo:paginagrafico.php

Comentarios
Primero contamos la cantidad de usuarios con edades comprendidas entre:
0 y 17
18 y 40
41 en adelante.
$registros=mysql_query("select edad from usuarios",$conexion) or
  die("Error:".mysql_error());
$cont1=0;
$cont2=0;
$cont3=0; 
while ($reg=mysql_fetch_array($registros))
{
  if ($reg['edad']<18)
    $cont1++;
  else
    if ($reg['edad']<=40)
	  $cont2++;
	else
	  $cont3++;  
}
Una vez que tenemos los tres valores calculamos el porcentaje que le corresponde a cada contador, para esto
debemos obtener el mayor de los tres:
if ($cont1>$cont2 && $cont1>$cont3)
  $may=$cont1;
else
  if ($cont2>$cont3)
    $may=$cont2;
  else
    $may=$cont3;
$barra1=($cont1/$may)*100;
$barra2=($cont2/$may)*100;
$barra3=($cont3/$may)*100;
La página que debemos llamar de Google es:
http://chart.apis.google.com/chart
Para que retorne un gráfico PNG debemos pasarle una serie de parámetros en la cabecera de la llamada.
$graficoBarra="http://chart.apis.google.com/chart?cht=bvs&".
                                                 "chs=600x300&".
                                                 "chd=t:$barra1,$barra2,$barra3&".
                                                 "chf=bg,s,EEEEEE&".
                                                 "chtt=Cantidad+de+usuarios|por+edades&".
                                                 "chts=4096EE,16&".
                                                 "chbh=150,50&".
                                                 "chg=0,10&".
                                                 "chxt=x,y&".
                                                 "chxl=0:|<18 ($cont1)  |18 y 40 ($cont2)|>40 ($cont3)|1:|0|$may";
Veamos el significado de estos parámetros:
cht=bvs  (chart type) indicamos el tipo de gráfico estadístico, en este caso bar vertical.
chs=600x300   (chart size) ancho y alto en píxeles de la imagen.
chd=t:$barra1,$barra2,$barra3 (chart data) con el caracter t indicamos que se pasan los datos con formato
                                           de texto (los valores de cada dato deben estar comprendidos entre
                                           0 y 100)
Estos son los tres parámetros obligatorios para que el servidor de Google retorne un gráfico estadístico.
Los objetivos de los otros parámetros:
chf=bg,s,EEEEEE indicamos el color de relleno ((ch)art (f)ill) e indicamos (b)ack(g)round, (s)olid y el color.
chtt=Cantidad+de+usuarios|por+edades  (chart title) título del gráfico.
chts=4096EE,16  (chart title size) color y tamaño de fuente del título.
chbh=150,50 Indicamos el ancho de base de la barra y la cantidad de píxeles de separación.
chg=0,10 Indicamos si muestra lineas de punteados en x e y.
chxt=x,y Indicamos donde dispondremos etiquetas.
chxl=0:|<18 ($cont1)  |18 y 40 ($cont2)|>40 ($cont3)|1:|0|$may    Indicamos los valores de las etiquetas.

Por último como el sitio de Google retorna una imagen PNG debemos imprimirla en la página utilizando el
elemento HTML img:
<img src="<?php echo $graficoBarra ?>">

Retornar



Código Fuente Ya - 2015