[av_textblock size=» font_color=» color=»]
Gráficas avanzadas con Highcharts.js
de la columna simple a la columna agrupada y con desglose (from simple column to grouped drilldown column)
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Os vamos a contar qué camino hemos seguido desde que nos encontramos con la necesidad de mostrar una gráfica de lo más sencilla, hasta donde hemos llegado partiendo de la misma con Highcharts.js.
Lo primero es comentaros qué es, aunque si estás leyendo este post seguramente ya lo sepas, pero por si las moscas.
Highcharts es un libreria javascript para el pintado de gráficas, es bastante completa y muy versátil, de ahí este post.
Es tan versátil que hemos llegado a hacer cosas que ni la propia libreria parece tenerlo contemplado, o por lo menos no aparace en la documentación oficial.
[/av_textblock]
[av_hr class=’invisible’ height=’40’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=» custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=» icon=’ue808′ font=’entypo-fontello’]
[av_textblock size=» font_color=» color=»]
LOS DATOS
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Antes de empezar con los ejemplos vamos a explicar qué datos vamos a querer mostrar, ya que toda gráfica es una representación de los mismos, sin estos no tendría sentido.
Imaginaros una flota estelar, y queremos mostrar mediante un gráfico el número total de tripulantes que tiene cada nave de esta flota.
[/av_textblock]
[av_hr class=’invisible’ height=’40’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=» custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=» icon=’ue808′ font=’entypo-fontello’]
[av_textblock size=» font_color=» color=»]
COLUMNAS SIMPLES
simple columns
[/av_textblock]
[av_textblock size=» font_color=» color=»]
El tipo de gráfica que vamos a usar es una gráfica de columnas (va a ser así con todos los ejemplos, pero podríamos hacerlo con cualquier otro tipo).
La gráfica sería de este tipo.
[/av_textblock]
[av_textblock size=» font_color=» color=»]
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Este sería el gráfico más básico, que no por ello menos interesante, el json que lo genera es muy sencillito también, echadle un vistazo.
[/av_textblock]
[av_hr class=’invisible’ height=’40’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=» custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=» icon=’ue808′ font=’entypo-fontello’]
[av_textblock size=» font_color=» color=»]
COLUMNAS AGRUPADAS
grouped columns
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Pero ahora queremos saber los diferentes cargos en los que se divide el total de la tripulación.
Para mostrar está información podemos usar otro tipo de gráfica, denominada agrupación de columnas.
Así podremos ver para cada nave la diferente tripulación que la compone.
[/av_textblock]
[av_textblock size=» font_color=» color=»]
[/av_textblock]
[av_hr class=’invisible’ height=’40’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=» custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=» icon=’ue808′ font=’entypo-fontello’]
[av_textblock size=» font_color=» color=»]
COLUMNAS SIMPLES CON DESGLOSE
drilldown columns
[/av_textblock]
[av_textblock size=» font_color=» color=»]
No está mal, pero nos gustaría que mostrará también la información que contiene la primera gráfica.
Esto se puede hacer de varias formas, nosotros vamos a explicar la que en Highcharts.js se denomina drilldown (desglose).
Lo que vamos a crear es una gráfica que junte las dos, aparentemente será como la primera, pero si pulsamos sobre una columna esta se transformará y desglosará en los diferentes cargos.
Nada mejor que una muestra para entenderlo.
[/av_textblock]
[av_textblock size=» font_color=» color=»]
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Con esta solución tendríamos toda la información en una sola gráfica, y además podemos jugar con ella.
Pero queremos llegar un poquito más allá, que pasa si además queremos saber las distintas razas que conforman cada nave.
Si solo queremos verlas relacionadas respecto de la tripulación total haríamos una gráfica como la anterior en la que cambiaríamos los cargos por las razas, pero si queremos relacionarlas y ver el desglose de los cargos por razas tendremos que crear otra gráfica.
[/av_textblock]
[av_hr class=’invisible’ height=’40’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=» custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=» icon=’ue808′ font=’entypo-fontello’]
[av_textblock size=» font_color=» color=»]
COLUMNAS AGRUPADAS CON DESGLOSE
drilldown grouped columns
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Esta se podría denominar gráfica de columnas agrupadas con desglose (grouped drilldown column).
En el primer nivel podremos ver y comparar los diferentes cargos agrupados por nave, si pulsamos sobre un cargo de una nave, veremos las diferentes razas de los tripulantes que tengan ese cargo, y si pulsamos sobre el nombre de la nave (en el eje de abcisas (el eje X…)) podremos ver todos los tripulantes de una nave diferenciados por raza y agrupados por cargo.
Además podemos jugar con los diferentes cargos de la leyenda pulsando sobre ellos, esto junto con lo anterior nos permitirá comparar información de distintas categorías tanto en el primer nivel de desglose como en el segundo.
[/av_textblock]
[av_textblock size=» font_color=» color=»]
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Si que es verdad que con está última solución perderíamos la información de la suma total de tripulantes, pero ganaríamos un poder de comparación a nivel de gráfica muy interesante y llegar hasta un tercer nivel de desglose (nave-cargo-raza).
Este tipo de gráfica no queda muy clara en la documentación oficial, la clave está en saber combinar las diferentes series junto con sus drilldown y relacionarlas correctamente, fijaros bien en los ids de los drilldowns en las series, y los nombres de estos.
No queremos indicar que esta gráfica se la única y válida solución, dependerá de qué se quiere mostrar y cómo.
[/av_textblock]
[av_hr class=’invisible’ height=’40’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=» custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=» icon=’ue808′ font=’entypo-fontello’]
[av_textblock size=» font_color=» color=»]
CONCLUSIÓN
[/av_textblock]
[av_textblock size=» font_color=» color=»]
Las gráficas con desglose son muy vistosas para hacer presentaciones o para mostrar en aplicaciones, nosotros las implementamos de tal manera que el propio usuario es el que se las configura para poder guardarlas y luego volver a mostrar en la aplicación y jugar con ella.
Además les dejamos guardar imágenes del estado en el que está la gráfica mientras juegan con ella, así pueden crearse galerías con los diferentes estados en caso de necesitar contenido estático.
Os animamos a probar los ejemplos que os proponemos con distintos tipos de gráficas de Highcharts.js.
Y esto ha sido todo.
Esperamos que os hayan servido los diferentes ejemplos, y si tenéis cualquier duda o aportación por favor comentad, así todos aprendemos.
[/av_textblock]
