Hello community – Here we are closing another year, together. Thank you for reading this blog. I hope your 2017 was grand and that 2018 is even better.
Spanish version of this blog
This blog started for me as a proof of concept – probably 99% of us start like that with something you are trying new and/or something you are investigating. My task was to find some charts that we could put on a UI. In my scenario, the project had already started and someone had suggested angular, highcharts, etc… however, the data was being served from HANA. It really caught my attention why not try this on ui5, with some chart library, etc… long story short, this exercise was more for personal investigation and I wanted to see how much I could do within ui5, so here I go.
As this is my personal investigation, I had started reading about charting libraries. I found one that is open source, its js file size was relatively small and it fit my investigation of using an external chart library, and moreover, it cost me nothing. I found chart.js it was easy to read, learn, understand and integrate with either angular, or ui5, or how about angular inside HANA XS (not on this scope but doable).
After downloading the chart.js library, I went to my #SCP trial account, started the good ol’ Web IDE, and created a new UI5 project (most of you are probably familliar with the initial steps of creating a project with a template).
after following the wizard, it created the project template on my Workspace
Then, it was time to code…
* I imported the downloaded chart lib into the project
* Added the reference to the chart. js file from the index.html page (everything else was already part of the template)
3. Notice that the chart object requires an html element canvas so we need to include that in our view.xml file as well as the core namespace. Make sure you xml encode your inner html inside the content attribute of your HTML element.
4. once we add the canvas html in our view, then let’s look at the controller file.
*First, I added a function call in the onInit function but it didn’t work because the markup wasn’t ready, so then I tried adding the onAfterRendering function and then I made the call to populate my chart object & Voila!
Initially, I had hardcoded the data for the bar chart in the oChart object above, then I switched the data to come from the models.js to simulate more of a service call, rather than just reading from the controller. This part involves 2 tasks:
a) adding the named model on the Component.js file
* setting the name model using the models object that was a dependency of the Compnent.js file loaded from the models.js file on line 4
b) Then, in the models.js file, adding a function that would simulate the call to a service and returning that model
5. once all those prior steps were in place, it was time to run the index.html page on my browser….
you may notice on this picture that the chart takes the entire width of the view. and the bars are thick.
All those are default options that can be modified/configured using JavaScript from your controller. Further, the different charts that this library offers (bar, line, mix, etc) use configuration objects that are very similar. For example, If i need to change the same code base from a bar graph to a line graph, I’d simply modify the type from ‘bar’ to ‘line’ ** not super pretty but just to give you an idea of the same code base with a small configuration change.
I will not take a lot more of your time, however, after playing with this library for about a day… I was able to come up with a simulated “live tile” format that showed different types of graphs that were scaled down to fit multiple tiles in a row – this is for an analytics purpose of some types of data. so this is what it may have looked like. Again, this exercise took me about 1 day to play with and if you have the time, why not do more with it.
I hope this blog had been helpful for you. Please let me know what questions you may have and I will try to answer them. Please share your knowledge if you have experiences with any other charting library, your headaches and also your solution.
Thank you again for your time and I wish you a great end of 2017 and a prosperous 2018.
http://bit.ly/2DerGtw #SAP #SAPCloud #AI
