Gráficos de Barras (HTML-Graphs)
En este ejemplo, vamos a crear gráficos estadísticos de barras con una herramienta gratuita: HTML-Graphs.
Aclaración: Los gráficos resultantes no son elegantes y llamativos como los de fusioncharts. Pero se pueden lograr pequeños gráficos y no require el Falsh Player de Adobe.
Puede tomárselo como solución para Gráficos Estadísticos para Celulares. Se logran gráficos pequeños y entendibles y no requiere ningún plugin extra.
Al final del tutorial encontrarán el código fuente del ejemplo, y los enlaces a los ejemplos.
Empezamos requiriendo el archivo “graphs.inc.php”:
require_once 'grafico_lib/graphs.inc.php';
Luego creamos una variable ($values) en donde asignaremos los valores de cada barra del gráfico. Los valores van separados por comas. Cada valor indica una barra en el gráfico.
$values = "110,59,55,85,29,58";
Ahora creamos otra variable ($labels) que contendrá los labels del gráfico (nombre de cada barra).
Como en este ejemplo tenemos 6 valores, entonces asignamos 1 label para cada valor (la letra a se corresponde al valor 110).
$labels = "a, b, c, d, e, f";
Ahora creamos una instancia de la clase BAR_GRAPH, y le pasamos por parámetro el valor “vBar”, con dicho valor indicamos que deseamos un gráfico Vertical. (Para un gráfico Horizontal, solo tendremos que pasar como parámetro el valor “hBar”)
$graph = new BAR_GRAPH("vBar");
Luego de esto, asignamos los valores y los labels para el gráfico, llamando a las funciones del objeto graph.
$graph->values = $values; $graph->labels = $labels;
Con esto, ya estamos en condiciones de graficar. Solo queda asignar algunas propiedades para el gráfico, como los colores, tamaño de la fuente de los textos, colores del texto, altura de las barras, etc.
A continuación veremos algunas de esas propiedades (que por cierto, no son muchas). Ustedes pueden ir probando y adaptarlo a sus necesidades.
Ancho y Altura de las barras:
$graph->barWidth = 15; $graph->barLength = 1.3;
Tamaño de fuentes: de los nombres de cada barra, de los valores y de los porcentajes (en ese orden):
$graph->labelSize = 12; $graph->absValuesSize = 12; $graph->percValuesSize = 12;
Color de fondo del gráico, color de las barras, y color de fondo de las barras:
$graph->graphBGColor = "#CBCBCB"; $graph->barColors = "#8DAC39"; $graph->barBGColor = "#C2E074";
Esas son algunas de las propiedades que podemos asignar al gráfico.
En el código fuente encontrarán estas y otras propiedades comentadas.
Por último, sólo nos queda graficar:
echo $graph->create();
Como aclaré antes, si desean un gráfico de barras Horizontal:
$graph = new BAR_GRAPH("hBar");
Ejemplos y Código Fuente:
Gráfico de Barras Vertical | Gráfico de Barras Horizontal | Código Fuente
Entradas Aleatorias
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
No hay comentarios todavía.
Deja un Comentario