Skip to Content

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…

 

  1. I imported the downloaded chart lib into the project
  2. 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.

 

 

To report this post you need to login first.

8 Comments

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

  1. Mustafa Bensan

    Hi Sergio,

    I’m always interested in visualisation examples for UI5, so thanks for sharing this one.  I’d be curious to know the factors that influenced your decision to select an external charting library such as chart.js instead of using the VizFrame library available with UI5?

    Happy New Year,

    Mustafa.

    (0) 
    1. Sergio Guerrero Post author

      Hi Mustafa and good to hear from you,

      I have used the VizFrame library before and I like them. The project I have recently joined were already using highcharts. The reason I decided to investigate charts.js on my blog was just because I was curious about other js libraries that would work for my POC since the project was already on its way. I would have liked to keep the entire project on UI5 if possible but I joined the party too late. Thanks for your question Mustafa

      (0) 
      1. Mustafa Bensan

        Curiosity is good.  How did the Highcharts integration go on your project?  I’d be interested to know more about the use case.

         

        Happy New Year!

         

        Mustafa.

         

        (0) 
  2. Emanuele Ricci

    Hi Sergio,

     

    I’ve created an OpenUI5 library that wrap all chartjs 2.5.0 charts and that rely on npm/grunt/bower you can find it here: openui5-chartjs

    In the next few days I would like to create some documentation about it and extend current demo/examples.

    After that I will update it to the new chartjs version and try to add some more customizations.

    Let me know what do you think about it 😉

    (0) 
    1. Sergio Guerrero Post author

      Hi Emanuele, this sounds like an excellent project you have going on. I would really like to see your blogs and documentation once it is ready. let me know or reply to this blog once it is ready.

       

      thank you in advance for sharing

      (0) 

Leave a Reply