viernes, 2 de diciembre de 2016

Gráficas con Highcharts, PHP y PostgreSQL


Hace poco en el trabajo teníamos que hacer uso de gráficas, para representar las incidencias de una determinada categoría durante cada mes, por ejemplo cuántas veces se vendieron ciertos productos de una categoría, ya sea de  Ferretería, Electrónicos o Cocina, etc.

Hacer esas gráficas no es un problema complicado, el detalle estaba en que no teníamos tiempo para crear todas esas funciones desde cero, así que mi compañero y yo, buscamos algunas librerías, frameworks, etc., para ahorrarnos dicha labor de crear todo desde cero.

Y encontramos Highcharts


Highcharts es una biblioteca de gráficos escrita en JavaScript puro, que ofrece una manera fácil de agregar gráficos interactivos a su sitio web o aplicación web. Highcharts actualmente soporta línea, spline, area, areaspline, columna, bar, pastel, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, barras de error, embudo, cascada y tipos de cartas polares y un sin fin de posibilidades a partir de éstas mismas.

Lo mejor de esto, es que es compatible completamente con el desarrollo en el que estaba trabajando.

El cual es:
- Base de datos: PostgreSQL 9.5.5
- PHP 7.0.13
- Servidor CentOS.
- XAMPP

Algunas de sus características más llamativas son:
- Está hecho con puro javascript
- Se puede usar en modo offline: descargarlas de aquí. https://code.highcharts.com
- Compatible con android, ios y todos los navegadores que soporten js.
- Para versión personal u organización sin fines de lucro, es posible usar sin necesidad de pagar licencia.
- Es abierto a modificaciones propias
- Como ya mencioné en su descripción, soporta múltiples tipos de gráficos. aquí pueden ver algunos http://www.highcharts.com/demo
- La verdad, la configuración y la sintaxis son simples, incluso se puede isnertar código de php dentro de la configuración.
- Es dinámico, se puede agregar y quitar series desde código en php
- Se puede graficar múltiples series sobre una misma gráfica, como haciendo comparaciones.
- Hay tooltips para cada punto, y se pueden personalizar.
- Es fácil exportar el gráfico en formato pdf, png, jpg o svg.
- También es posible realizar un zoom de cierta área de la gráfica.


Ejemplo:


Y como yo sé que nadie quiere copiar y pegar código, aquí les dejo el siguiente ejemplo.


La descarga incluye únicamente el código de la página en php, la instalación del servidor de php, y base de datos se da por entendido. Este ejemplo fue realizado en PostgreSQL, pero no hay mucha complicación en migrarlo a MySQL, para aquellos que no manejen PostgreSQL.

Descripción:
- Servidor PHP: Xampp 7.0.13
- Versión PHP 7.
- Servidor base de datos: PostgreSQL 9.5.5
- Incluye script creación BD.
- Incluye datos para la tabla.
- Ejemplos para gráficas de barra, pastel y lineal.
- Incluye archivos de Highcjarts modo offline.
- Probado en Fedora 25 x86_64bits.


Uso: Se da por hecho que ya tienen instalado y configurado XAMPP y PostgreSQL 9.2 en adelante.

1.- Crear la bd en postgresql, va un script.
2.- Cargar los datos, hay un script en la descarga o agregar los que ustedes deseen.
3.- Mover la carpeta estadistica a htdocs de xampp
4.- Editar el archivo conexion.php en los parámetros de conexión con postgresql (contraseña, usuario, puerto)
5.- Abrir desde el navegador http://localhost/estadistica/  y si todo lo configuraron correctamente, no debe haber problemas.

Toda la documentación, ejemplos y solución a errores, pueden consultar:
http://www.highcharts.com
http://www.highcharts.com/demo


La idea del ejemplo:

Es una tienda que tiene 3 categorías, Electrónicos, Ferretería y Cocina, entonces, hay que graficar las ventas anuales, determinar el mes en  el que se vende más mediante una gráfica de pastel y graficar en barra las ventas mensuales, con opción de desglosarlas para ver en qué producto se vende más por mes.

La función que más me gustó de esta librería, es la que se muestra y se describe por sí sola en la siguiente imagen.





Y bueno, la decisión de utilizarla o no en sus proyectos personales, es suya, es una excelente librería desde mi punto de vista, ya que me permitió obtener los resultados deseados, y me evitó realizar funciones desde cero.

Puede que haya librerías más potentes, o como quieran llamarle, pero como dije, a mi me servió de mucho y realmente es muy simple de utilizar.


Como ya mencioné, en este proyecto, hemos trabajado dos compañeros, de tal modo que agradezco a Valdivia, por comenzar la búsqueda de información y utilización de la misma.

2 comentarios:

  1. El incombeniente de usar la version 7 de php, es que no hay muchos ejeplos de uso de comandos, en cuentras mas ejeplos, de la version 5.6 o 6.

    aun que si que esta la paguina de php, la cual puedes consultar, pero yo no le entiendo muy bien a sus explicaciones, y ejeplos. :(

    ResponderEliminar
    Respuestas
    1. curioso lo que dices...

      aunque hasta ahora, no me topado con algún problema de ese tipo, incluso, tengo un sitio que migré de 5.6 a 7, algunos pequeños cambios solamente, pero no muchos...


      pero puede que sí haya cambios drásticos en algunas cosas...


      gracias por comentar...

      Eliminar