sapui5 Viz Charts examples
Hello community, It is already February and this is the first quick break I get from work, it has been busy, so I decided to write this blog because on the last blog I wrote about a chart library , my friend Mustafa Bensan suggested for me to look into ui5 viz charts library that is already provided chart library.
My first instinct to learn a new library is by reading the examples, then play with it by copying a sample into my poc project and then modify it to see how it compares with other similar past experiences.
As you know, the initial set up is to get a sapui5 project created – you can see those steps on my prev blog… once you have a blank html, view, controller, and model, files.. Let’s start putting things together with this chart lib, viz charts.
Make sure you include the ilb during your bootstrap step on your html file
* I hate seeing those language errors, and pre load libraries.. So here is a bonus for your next ui5 project **
Once you have your html file setup… then let’s see the xml view. I copied one sample code from the documentation initially working with a column chart, then I included a bar chart, then a line chart, and finally a pie chart… there are others, however, after the first 2… I realized there was a lot of repetition, and also each chart configuration is very similar to one another.
On the next image you can see you can specify the vizType to change your bar/line/column.
Next, on my controller file, I have the following:
* Get a handle of your charts on the onAfterRendering Method (they won’t be ready onInit)
*(Commented out) you can show a Popover controller that would show when you click on the measure
Finally, you can see that the Viz charts share a lot of similar properties.
- Chart Title – shows a default one, so you can hide or change its text
- Axis/Category Labels show/hide, format
- Legend – dimension labels
After saving my code, my charts look like
Where else should you pay attention?
When setting up your pie chart xml code
Keep in mind, control ids have to be unique (since i was repeating the same xml code, i had to change the ids – otherwise, the framework will give you an error
If you need to display a tooltip vs a popover, see how the 2 approaches are possible
Popover, you have the xml code in the view then you get a handle of that control before you connect it like
Other things I didn’t include on this blog but could be really good to try would be:
- Change the color of the measures
- Add logic to display a color based on a condition, etc.
The Samples section on the sapui5 site has a good sample of what can be done, however, I think the part lacking documentation is the VizProperties.
the viz frame API documentation ideally would cover various properties for this control, but it only shows one property.
I had to dig in various google searches and samples from the Samples page to figure out some of the available properties for the VizFrame. I also attempted the vizFrame.mProperties command from the console, however, it only brought back a few properties that were set to null. I would like have been able to get a more complete list of available Properties on the API page.
This Viz chart lib seems to be very powerful and the best of it is that it is part of the ui5 library which we already have. I look forward to using it on one of my projects coming up again.
Please share your thoughts! Happy weekend!