Skip to Content

Hola de nuevo comunidad, y bienvenidos a mi tercer blog en la serie de librerias con charts que he incorporado en #aplicacionesSapui5.

lee la version en ingles del mismo

1) Mi primer blog acerca de ChartJS

2) El segundo blog acerca de la libreria VizCharts que es parte de sapui5.

En este blog mostrare como integrar Highcharts en una aplicaction de sapui5. Algo interesante que no sabia y Mustafa Bensan me menciono, es que el SAP Analytics Cloud, tambien utiliza estos charts, asi que espero que este blog sea de beneficio para desarrolladores de ambas areas.

Primero que nada y lo mas imnportante, quiero mencionar que use una version gratis del producto para mi evaluacion. Hay otro tipo de licensias que tienen un costo asociado con ellas y dependen del numero de desarrolladores, etc.. No dere detalles de este tipo de licensias pues la finalidad de mi blog es para evaluar el producto solamente.

** Asegurate de leer los tipos de licencias y ver cual es el que le queda bien a tu compania **

Segundamente,  quisiera agradecer a Highcharts for la documentacion tan eficaz y completa que tienen en su sitio. Comparado con otros productos hasta ahorita este ha sido el mejor y mas completo.
Estoy impresionado de todos los detalles y explicationes que mostraron, por ejemplo detalles como est:

Este tipo de documentacion simplifica la vida de los desarrolladores y agiliza la velocidad del ciclo de desarrollo. Los devs no necesitan gastar horas y horas tratando de imaginarse, buscar cuales son las propiedades o como configurar algo asi. (es el caso en el cual mencione la documentacion incomplete de los vizcharts)

Adicionalmente, hay features en Highcharts que incluyen chaarts en 3D  – se ven muy bien. no olvides checarlos!

Otro tipo de charts que tambien estan disponibles son: Polar Charts, spiderweb chart, vector plot, pyramid, …  y la lista sigue y sigue.  Hay muchisimos ejemplos exelentes. ve la pag de demos.

A continuacion aqui estan los pasos:
1) Use la referencia a un CDN (content delivery network) para obtener la libreria de Highcharts … asegurate de leer las licensias porque esta no es gratis.*

2) anadi un div que contiene un chart en el view. * Tambien se puede anadir programaticamente en caso de tener que usar dynamic JS..

3) en el controller, hize el set up de la configuracion para el HighChart. Nota la facilidade de como usar el objecto de HighChart.
HighChart(‘<ID_OF_DIV>’, options);

** options – es un objecto que continue toda la configuracion para tu chart, como: chart type, title, labels, axis, data (series), etc. La mayoria de los charts tienen configuracion muy similar, sin  embargo, asegurate de checar las opciones disponibles para el chart que vayas a usar

Una vez que tenas tu archivo index, view, y controller, corre tu app y veras tu Highchart en accion – Este es el mismo HighChart de la pag de demo y asi es como se ve para mi en mi app de ui5

 

 

Otras features que puedes usar en Highcharts es que puedes capturar eventos del mouse como clicks, etc para hacer drill downs. Te has de preguntar que use case puede tener este feature? Pues bien, en mi caso, estoy usando un chart para mostrar informacion agregada y al darle click en una de las barras/columnas/secctiones del chart, entonces muestro los detalles en una table o en otro chart o quiza en combinacion de ambos. Este tipo de escenario es muy comun en las aplicaciones de analysis de datos y sin mucho mas esfuerzp puedes complacer a tus usuarios al brindarles un mejor user experience.

Espero que este blog haya sido de su agrado y que ojala puedan recomendar y compartirlo. Gracias por sus comentarios y por su tiempo.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply