Skip to Content

Hola comunidad. Ya es Febrero y se está pasando el tiempo muy rápido. Este es el primer momento que tengo desde el inicio del año para escribir mi primer blog del ’18 – vea tmb la version en Ingles del mismo . Decidí escribir este blog debido a que en mi blog anterior, mi amigo Mustafa Bensan me recomendó ver los ejemplos de la libreria de charts en sapui5.

Mi primer instinto cuando empiezo a trabjar con una libreria nueva es usualmente, leer ejemplos, copiarlos a mi proyecto y modificarlos para ver como se compara con otras experiencias anteriores.

Como alomejor ya saben, el setup inicial de un proyecto de tipo sapui5 – pueden ver esos pasos aquí – una vez que tengas un archivo html en blanco, un view, controller y model… vamos a empezar a construir este ejemplo.

 

Asegurate de que incluyas la referencia a la lib durante el bootstrap en tu html. ** Me molesta mucho ver algo de estos errores de lenguage, libreries pre-load, asi que aqui también les va un bonus para su prox proyecto en sapui5**

 

Una vez que tengas el set up inicial … entonces veamos al view en xml. Copie el ejemplo de la documentación originalmente con un chart de columnas, luego uno con barras, lineas, y finalmente uno en forma de pie… hay otros, sin embargo, después de los 1os 2, se darán cuenta que hay mucha repetición entre uno y otro.

 

En la sig. imagen, pueden ver la propiedad vizType para cambiar el tipo de chart

 

Siguientemente, en mi controller, veamos:

* agarra el objecto de tu chart en el metodo, onAfterRendering, pues no estará listo en el metodo onInit todavía)

* Puedes mostrar (cuando pones el mouse sobre la medida) un toolTip que se crea usando JavaScript y luego conectandolo al chart, o

*(código comentado)  puedes mostrar un Popover que muestra las medidas una vez que el usuario da un click en la medida.

 

Finalmente, puedes observar que los charts Viz comparten propiedades similares:

  • Chart Title – sale uno por default, pero se puede esconder o cambiar el texto
  • Axis/Category Labels muestra/esconde, formatea
  • Legend – las etiquetas de las dimensiones
  • otros…

 

Después de guardar, los charts se veen mas o menos asi

 

en Dónde más debes de poner atención?
cuando hagas el set up del chart de tipo pie

Recuerda, que los ids  de los controles deben de ser unicos (como estaba copiando el codigo de un chart para el otro, vi varios errores)

Si necesitas mostrar un tooltip o un popover, ve como se ven de las dos formas

Tooltip ejemplo con javascript desde el controller – luego tienes q conectarlo al chart viz.
Popover, el ejemplo mio tiene el codigo en el view xml, luego desde el controller, para poder conectarlo al chart

 

Otras cosas que no incluí en este blog pero serian buenas para tratar::

  • Cambiar el color de las medidas (static)
  • Añadir logica para mostrar el color de las medidas basadas en alguna condición, etc.

 

Palabras finales:

Los ejemplos del sitio de sapui5 tienen mucha documentación buena, pero, desafortunadamente, la parte que no se ve completa es la parte de las propiedades del objecto VizProperties. (solo muestra una)

Tuve que buscar en varias sesiones de google y de otros ejemplos en la misma parte de la documentación para ver ciertas propiedades. Estaría mejor si en el API, puedieramos encontrar una lista completa de las mismas en un solo lugar.

Los charts de la libreria Viz chart son muy poderosos y lo mejor de todo es que son parte del sapui5 sin tener que bajar nada mas – solo hay q incluirla en el bootstrap. Espero poder usarla en mi prox proyecto de sapui5.

 

Comparte tus comentarios y gracias por leer. Feliz fin de semana!

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