Gráficos Dinámicos

Gráficos Dinámicos

Una tarea, a la que más tarde o más temprano vamos a tener que enfrentarnos a lo largo de nuestra carrera profesional, es la creación de gráficos a partir de datos.

Cuando hablo de gráficas nos referimos refiero a todo tipo de imágenes que sirvan para representar datos, como gráficas de barras, de líneas de progreso, de torta, etc.

¿Para qué sirven?

Cuando estamos desarrollando un sistema y manipulamos una buena cantidad de datos, es necesario incorporar gráficos.

Los gráficos sirven para resumir de mejor manera esta información y así facilitar su entendimiento.

Para lograr este propósito hay una serie de librerías y herramientas de distinto tipo que nos otorgan diferentes resultados dependiendo de lo que necesitemos.

Google Charts

Es un API de Google que permite crear gráficos estadísticos de manera sencilla con PHP, estos gráficos se pueden crear accediendo a un URL con los parámetros adecuados.

Entre los gráficos disponibles se encuentran: Line chart, Sparkline, Bar chart, Pie chart, Venn diagram, Scatter plot, Radar chart, Map, Google-o-meter, QR codes.

Google Charts

Para utilizar esta clase primero descargamos la librería y copiamos el archivo GoogChart.class.php el cual contiene la clase que necesitamos, luego incluimos este archivo al inicio de nuestros scripts.

<?phpinclude 'GoogChart.class.php';$chart = new GoogChart();

Google Charts

A continuación creamos un array con los datos que deseamos graficar, el siguiente paso es crear el array con los colores a utilizar:$color = array( '#99C754','#54C7C5','#999999', );

Finalmente utilizamos el método setChartAttrs donde pasamos como parámetros el tipo de gráfico, el título, un array con los datos a graficar, las dimensiones del gráfico y finalmente un array con los colores a utilizar en el gráfico.

Grafico de torta<?phpinclude 'GoogChart.class.php';$chart = new GoogChart();$data = array( 'Explorer' => 29, 'Chrome' => 35, 'Firefox' => 28.5, 'Safari' => 2, );$color = array( '#99C754','#54C7C5','#999999', );$chart->setChartAttrs( array( 'type' => 'pie', 'title' => 'Browser market 2012', 'data' => $data, 'size' => array( 400, 300 ), 'color' => $color ));print $chart?>

Google Charts

Ahora si por ejemplo deseamos crear un gráfico de barras comparando dos valores, creamos primero un array con los valores que deseamos graficar y al momento de crear el gráfico seleccionamos el tipo bar-vertical.

$chart->setChartAttrs( array( 'type' => 'bar-vertical', 'title' => 'Browser market 2008', 'data' => $data, 'size' => array( 550, 300 ), 'color' => $color, 'labelsXY' => true, ));

<?phpinclude('GoogChart.class.php');$chart = new GoogChart();$data = array( 'Febrero 2014' => array ('Chrome' => 9.5,'Explorer' => 72,'Firefox' => 21, ),'Enero 2014' => array ('Chrome' => 27,'Explorer' => 63,'Firefox' => 10, ),);$color = array( '#99C754','#54C7C5','#999999', );$chart->setChartAttrs( array( 'type' => 'bar-vertical', 'title' => 'Browser market 2014', 'data' => $data, 'size' => array( 550, 300 ), 'color' => $color, 'labelsXY' => true, ));print $chart;?>

Gráfico de Barras

Más Gráficos

https://developers.google.com/chart/image/docs/gallery/chart_gall?csw=1

Highcharts JS

Highcharts es una biblioteca de gráficos escritos en HTML5/JavaScript puro, ofreciendo gráficos intuitivos, interactivos del lado del usuario.

Highcharts actualmente tiene soporte para gráficos de tipo línea, área, columnas, barras, circulares, de dispersión, patrones angulares,, columnas, burbuja, diagrama de caja, barras de error, embudo, cascada y tipos de gráficos polares.

Highcharts JS

Para utilizar es necesario descargar del sitio oficial:http://www.highcharts.com/

¿Cómo utilizar?

1. Descomprimir el programa en una carpeta cualquiera, y acceder a los archivos.

2. Acceder a la carpeta “examples”, y elegir uno de los gráficos.

3. Modificar el ejemplo para adaptarlo a nuestro proyecto.

Algunos Ejemplos

Gráfico de Torta (pie basic)El objetivo es encontrar la parte que nos interesa:

series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]

Gráfico de Torta (pie basic)El objetivo es encontrar la parte que nos interesa:

Ejemplo: Reporte de Votos.Crear la tabla.

create table votos(cedula numeric(12), voto numeric (2));insert into votos values('192811','1');insert into votos values('192812','1');insert into votos values('192813','1');insert into votos values('192814','1');insert into votos values('192815','1');insert into votos values('192816','1');insert into votos values('192817','2');insert into votos values('192818','2');insert into votos values('192819','2');insert into votos values('192820','2');insert into votos values('192821','3');

SQL para conocer los resultados totales

➢ Se necesita contar los votos, y agruparlos.

➢ El número de cédula no es necesario.

select voto as Lista, count(voto) as Total from votos

group by voto;

Copiar Highcharts-4.0.1 a la carpeta virtual.

1. Ingresar a la carpeta: \\dirección_ip

2. Crear una carpeta “hc”, y descomprimir.

3. Ingresar a la carpeta “hc”, luego en “examples”, y finalmente en “pie-basic”.

4. Copiar el archivo index.html, como voto.php, y abrir con un editor.

Editar voto.php

1. Agregar al inicio del archivo la conexión a la base:

<?php$conexion=mysql_connect("localhost","root","");mysql_select_db("test",$conexion);$registros=mysql_query("select voto as Lista, count(voto) as Total from votos group by voto");?>

Editar voto.php (contin...)

2. Modificar el título: title: { text: 'Resultados de las Elecciones, 2014' },3. Modificar los datos:<?php while ($datos=mysql_fetch_array($registros)){ ?>[ <?php print "'Lista: $datos[0]'";?>, <?php print "$datos[1]";?>],<?php } ?>

Preguntas

1. ¿Para qué sirven los gráficos dinámicos?2. ¿Qué es Google Charts?3. ¿Qué es Highcharts JS?4. Cite los 3 pasos para utilizar Highcharts JS.5. Modificar el ejemplo el ejemplo pie-basic: Mostrar los datos: Hombre 45, Mujeres 55. 6. Modificar el ejemplo el ejemplo line-basic, para mostrar solamente las temperaturas de Asunción:data: [30, 32, 29, 18, 15, 9, 8, 7, 8, 9, 15, 19]7. Teniendo en cuenta la siguiente tabla: create table votos(cedula numeric(12), voto numeric (2));Escribir el comando SQL, para obtener los totales.