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.
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:
– 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
– 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.
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. 🙁
Tenía mucho tiempo (desde 2016) sin emplear highchart, y es la primera vez que tropiezo con un ‘blog’ como el tuyo que explica muy bien, esepcialmente con un ejemplo sencillo que permite adaptarse con facilidad a mis requerimientos.
En aquella ocasión (en 2016) cuando traté de indagar para ver cómo utilizar ésta librería no había nada al respecto. Pero, con el ejemplo que presentas aquí -para desarrolladores de habilidad intermedia como es mi caso- me resulta cómodo trabajar mis requerimientos funcionales de generar reportes gráficos.
saludos cordiales, desde Caracas-Venezuela
Gracias por comentar, que bueno que te haya servido
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…