Grficos Dinmicos

Grficos Dinmicos
Una tarea, a la que ms tarde o ms temprano vamos a
tener que enfrentarnos a lo largo de nuestra carrera
profesional, es la creacin de grficos a partir de datos.

Cuando hablo de grficas nos referimos refiero a todo tipo
de imgenes que sirvan para representar datos, como
grficas de barras, de lneas de progreso, de torta, etc.

Para qu sirven?
Cuando estamos desarrollando un sistema
y manipulamos una buena cantidad de datos,
es necesario incorporar grficos.

Los grficos sirven para resumir de mejor manera esta
informacin y as facilitar su entendimiento.

Para lograr este propsito hay una serie de libreras 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 grficos
estadsticos de manera sencilla con PHP, estos
grficos se pueden crear accediendo a un URL con
los parmetros adecuados.

Entre los grficos 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
librera 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 continuacin 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 mtodo setChartAttrs donde
pasamos como parmetros el tipo de grfico, el ttulo,
un array con los datos a graficar, las dimensiones del
grfico y finalmente un array con los colores a utilizar
en el grfico.
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 grfico de barras
comparando dos valores, creamos primero un array con
los valores que deseamos graficar y al momento de crear
el grfico 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;
?>

Grfico de Barras
Ms Grficos



https://developers.google.com/chart/image/docs/gallery/chart_gall?csw=1
Highcharts JS
Highcharts es una biblioteca de grficos escritos en
HTML5/JavaScript puro, ofreciendo grficos intuitivos,
interactivos del lado del usuario.

Highcharts actualmente tiene soporte para grficos de
tipo lnea, rea, columnas, barras, circulares, de
dispersin, patrones angulares,, columnas, burbuja,
diagrama de caja, barras de error, embudo, cascada y
tipos de grficos polares.

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


Cmo 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
grficos.

3. Modificar el ejemplo para adaptarlo a nuestro
proyecto.


Algunos Ejemplos
Grfico 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]
]

Grfico 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 nmero de cdula 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: \\direccin_ip

1. Crear una carpeta hc, y descomprimir.

1. Ingresar a la carpeta hc, luego en examples, y
finalmente en pie-basic.

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

Editar voto.php

1. Agregar al inicio del archivo la conexin a la base:

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

Editar voto.php (contin...)
2. Modificar el ttulo:
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 grficos dinmicos?
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 Asuncin:
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.