Hola comunidad – aqui estamos cerrando otro año, juntos. Muchas gracias por leer este blog. Espero que su 2017 haya sido grande y que el 2018 sea aun mejor.
si prefieres leer el blog en su version en ingles
Empeze este blog haciendo una prueba – probablemente el 99% de nosotros empezamos asi al tratar algo nuevo y/o alguna investigación. Mi tarea era encontrar alguna libreria de charts/graficas que pudiera usar en una interface. En mi escenario, el proyecto ya habia empezado y alguien habia sugerido usar angular, highcharts, etc.. sin embargo, los datos vendrian de HANA. Me llamó mucho la atención el porque no hacer esto en UI5. Para no hacer tan larga la historia, este ejercicio es de invetigación personal y queria sacarme la duda a ver que tanto se pudo haber echo con UI5. Aqui les voy…
Empezé mi investigación leyendo acerca de librerias de charts. Encontré una que era open source, era de tamaño razonable, tenía casi todo lo que ocupaba y lo mejor de todo era gratis … llevaba las 3 B (buena, bonita, barata)
Una vez que descargué la libreria, fui a mi cuenta de #SCP, me metí al viejo Web IDE y empeze un proyecto nuevo de tipo UI5 project.
después de seguir el wizad, se creó un proyecto en mi Workspace
era momento de escribir codigo…
* importé la libreria Chart.min.js en mi proyecto
* Añadí la referencia a esa libreria en mi index.html (lo demas estaba ahi por parte del template)
3. Fijate que el objecto del chart require un elemento html de tipo canvas, entonces, hay que incluirlo en nuestro archivo view.xml con el namespace core. Asegurate de que tu html este codificado en xml dentro del atributo
4. una vez que añadas el canvas dentro del view, veamos el archivo controller.js
*primero, añadí una funcion dentro del onInit pero no funcionó porque el html no estaba listo en el documento todavía al momento de iniciarse la aplicación. Después, añadí la función dentro del onAfterRendering asi podia popular la información para el objecto de mi chart y Voilá!
Inicialmente, tenia hard coding en la propiedad data del objecto oChart arriba, después lo cambie para que el data viniera del archivo models.js para simular una llamada a un servicio, en lugar de que solo viniera del controlador. Esta parte requiere dos sub-partes.
a) Añadir el named model en el archivo Component.js
*dandole el nombre al modelo y utilizando el objecto models que es una dependencia en el archivo Component.js que se carga en la linea 4
b) después, en el archivo models.js, añadir una función que simule la llamsada al servicio y que regrese dicho modelo de datos
5. una vez que todo lo anterior este en su lugar, es hora de correr el archivo index.html en el browser.
han de notar que en esta foto, el chart toma todo el ancho de la página y las barras son muy gruesas.
Todos esos son settings que vienen como default y pueden ser modificados por medio de JavaScript en el controlador. Más añado, que esta libreria ofrece otros tipos de graficas (barra, linea, mixta, etc) y la configuración de dichas graficas es muy parecida. Por ejemplo, si necesito cambiar el mismo codigo del chart de barra hacia linea solo tengo que modificar el tipo de ‘bar’ a ‘line’ no se ve muy bonito pero solo para dar la muestra de la configuración minima que se puede hacer.
no tomaré mucho mas de su tiempo, sin embargo, quisiera ultimamente comentar que después de jugar un rato con esta libreria… pude simular un “live tile” que muestra diferentes tipos de graficas y que aun mas se pueden ver a diferentes tamaños asi para representar diferentes tipos de datos. Así se ve lo último que hize. Una vez mas, me tomó mas o menos un día para lo que sigue y si tenia el tiempo, por qué no verdad?
Espero que este blog haya sido de su agrado y ojalá les ayude en algo. Por favor, manden sus preguntas y espero poder contestarlas. Espero también puedan compartir su conocimiento y sus experiencias con este u otro tipo de librerias, sus dolores de cabeza y también su solución.
Gracias de antemano por su tiempo y espero que tengan un buen resto del 2017 asi como un próspero 2018.
http://bit.ly/2DWOSxH #SAP #SAPCloud #AI
