{"id":1512,"date":"2016-12-02T22:06:00","date_gmt":"2016-12-03T04:06:00","guid":{"rendered":"http:\/\/linuxitos.com\/main\/graficas-con-highcharts-php-y-postgresql\/"},"modified":"2016-12-02T22:06:00","modified_gmt":"2016-12-03T04:06:00","slug":"graficas-con-highcharts-php-y-postgresql","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/graficas-con-highcharts-php-y-postgresql\/","title":{"rendered":"Gr\u00e1ficas con Highcharts, PHP y PostgreSQL"},"content":{"rendered":"
\n
<\/a><\/div>\n

<\/p>\n

Hace poco en el trabajo ten\u00edamos que hacer uso de gr\u00e1ficas, para representar las incidencias de una determinada categor\u00eda durante cada mes, por ejemplo cu\u00e1ntas veces se vendieron ciertos productos de una categor\u00eda, ya sea de  Ferreter\u00eda, Electr\u00f3nicos o Cocina, etc.<\/span><\/div>\n

<\/span><\/div>\n
Hacer esas gr\u00e1ficas no es un problema complicado, el detalle estaba en que no ten\u00edamos tiempo para crear todas esas funciones desde cero, as\u00ed que mi compa\u00f1ero y yo, buscamos algunas librer\u00edas, frameworks, etc., para ahorrarnos dicha labor de crear todo desde cero.<\/span><\/div>\n

<\/span><\/div>\n
\n
\n

Y encontramos <\/span>Highcharts<\/span><\/span><\/span><\/b><\/h2>\n<\/div>\n<\/div>\n

<\/span><\/span><\/div>\n
Highcharts es una biblioteca de gr\u00e1ficos escrita en JavaScript puro, que ofrece una manera f\u00e1cil de agregar gr\u00e1ficos interactivos a su sitio web o aplicaci\u00f3n web. Highcharts actualmente soporta l\u00ednea, 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 \u00e9stas mismas.<\/span><\/span><\/div>\n
Fuente.<\/a><\/span><\/span><\/div>\n

<\/span><\/span><\/div>\n
Lo mejor de esto, es que es compatible completamente con el desarrollo en el que estaba trabajando.<\/span><\/span><\/div>\n

<\/span><\/span><\/div>\n
El cual es:<\/span><\/span><\/div>\n
– Base de datos: PostgreSQL 9.5.5<\/span><\/span><\/div>\n
– PHP 7.0.13<\/span><\/span><\/div>\n
– Servidor CentOS.<\/span><\/span><\/div>\n
– XAMPP<\/span><\/span><\/div>\n
<\/div>\n
Algunas de sus caracter\u00edsticas m\u00e1s llamativas son:<\/span><\/div>\n
– Est\u00e1 hecho con puro javascript<\/span>
– Se puede usar en modo offline: descargarlas de aqu\u00ed. https:\/\/code.highcharts.com<\/a><\/span><\/div>\n
– Compatible con android, ios y todos los navegadores que soporten js.<\/span><\/div>\n
– Para versi\u00f3n personal u organizaci\u00f3n sin fines de lucro, es posible usar sin necesidad de pagar licencia.<\/span><\/div>\n
– Es abierto a modificaciones propias<\/span><\/div>\n
– Como ya mencion\u00e9 en su descripci\u00f3n, soporta m\u00faltiples tipos de gr\u00e1ficos. aqu\u00ed pueden ver algunos http:\/\/www.highcharts.com\/demo<\/a><\/span><\/div>\n
– La verdad, la configuraci\u00f3n y la sintaxis son simples, incluso se puede isnertar c\u00f3digo de php dentro de la configuraci\u00f3n.<\/span>
– Es din\u00e1mico, se puede agregar y quitar series desde c\u00f3digo en php<\/span>
– Se puede graficar m\u00faltiples series sobre una misma gr\u00e1fica, como haciendo comparaciones.<\/span>
– Hay tooltips para cada punto, y se pueden personalizar.<\/span>
– Es f\u00e1cil exportar el gr\u00e1fico en formato pdf, png, jpg o svg.<\/span>
– Tambi\u00e9n es posible realizar un zoom de cierta \u00e1rea de la gr\u00e1fica.<\/span>

<\/span><\/p>\n
\n

Ejemplo:<\/b><\/span><\/h2>\n<\/div>\n


<\/span>Y como yo s\u00e9 que nadie quiere copiar y pegar c\u00f3digo, aqu\u00ed les dejo el siguiente ejemplo.<\/span><\/p>\n

Descargar…<\/a><\/span><\/div>\n


<\/span><\/p>\n

La descarga incluye \u00fanicamente el c\u00f3digo de la p\u00e1gina en php, la instalaci\u00f3n del servidor de php, y base de datos se da por entendido. Este ejemplo fue realizado en PostgreSQL, pero no hay mucha complicaci\u00f3n en migrarlo a MySQL, para aquellos que no manejen PostgreSQL.<\/span><\/div>\n


<\/span>Descripci\u00f3n:<\/span>
– Servidor PHP: Xampp 7.0.13<\/span>
– Versi\u00f3n PHP 7.<\/span>
– Servidor base de datos: PostgreSQL 9.5.5<\/span>
– Incluye script creaci\u00f3n BD.<\/span>
– Incluye datos para la tabla.<\/span>
– Ejemplos para gr\u00e1ficas de barra, pastel y lineal.<\/span>
– Incluye archivos de Highcjarts modo offline.<\/span>
– Probado en Fedora 25 x86_64bits.<\/span>

<\/span>
Uso: Se da por hecho que ya tienen instalado y configurado XAMPP y PostgreSQL 9.2 en adelante.<\/span>

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

<\/span>Toda la documentaci\u00f3n, ejemplos y soluci\u00f3n a errores, pueden consultar:<\/span>
– http:\/\/www.highcharts.com<\/a><\/span>
– http:\/\/www.highcharts.com\/demo<\/a><\/span>

<\/span><\/p>\n

La idea del ejemplo:<\/span><\/div>\n

<\/span><\/div>\n
Es una tienda que tiene 3 categor\u00edas, Electr\u00f3nicos, Ferreter\u00eda y Cocina, entonces, hay que graficar las ventas anuales, determinar el mes en  el que se vende m\u00e1s mediante una gr\u00e1fica de pastel y graficar en barra las ventas mensuales, con opci\u00f3n de desglosarlas para ver en qu\u00e9 producto se vende m\u00e1s por mes.<\/span><\/div>\n<\/div>\n
<\/a><\/div>\n

La funci\u00f3n que m\u00e1s me gust\u00f3 de esta librer\u00eda, es la que se muestra y se describe por s\u00ed sola en la siguiente imagen.<\/span>

<\/span><\/p>\n

<\/div>\n
<\/div>\n
<\/a><\/div>\n


<\/span>
<\/span><\/p>\n

Y bueno, la decisi\u00f3n de utilizarla o no en sus proyectos personales, es suya, es una excelente librer\u00eda desde mi punto de vista, ya que me permiti\u00f3 obtener los resultados deseados, y me evit\u00f3 realizar funciones desde cero.<\/span><\/div>\n

<\/span><\/div>\n
Puede que haya librer\u00edas m\u00e1s potentes, o como quieran llamarle, pero como dije, a mi me servi\u00f3 de mucho y realmente es muy simple de utilizar.<\/span><\/div>\n

<\/span><\/div>\n

<\/span><\/div>\n

Como ya mencion\u00e9, en este proyecto, hemos trabajado dos compa\u00f1eros, de tal modo que agradezco a Valdivia, por comenzar la b\u00fasqueda de informaci\u00f3n y utilizaci\u00f3n de la misma.<\/span><\/p><\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Hace poco en el trabajo ten\u00edamos que hacer uso de gr\u00e1ficas, para representar las incidencias de una determinada categor\u00eda durante cada mes, por ejemplo cu\u00e1ntas veces se vendieron ciertos productos de una categor\u00eda, ya sea de  Ferreter\u00eda, Electr\u00f3nicos o Cocina, etc. Hacer esas gr\u00e1ficas no es un problema complicado, el detalle estaba en que no […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,283,284,282,67,122],"tags":[],"class_list":["post-1512","post","type-post","status-publish","format-standard","hentry","category-fedora","category-graficar-en-php","category-graficas","category-highcharts","category-php","category-postgresql"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=1512"}],"version-history":[{"count":0,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1512\/revisions"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=1512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=1512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=1512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}