UI5ers Buzz #04: Visualizing KPIs in SAPUI5 and OpenUI5

We already introduced charts briefly in the blog post Shop Administrator – A new Demo App for Layout, Charts and more. But since data visualization is such a hot topic, we thought we should dive deeper into this. In our Shop Administrator application, on the Statistics page of the app, we used two types of KPI charts:

• Micro charts come with the sap.suite.ui.microchart library in SAPUI5
• D3 charts are packaged with OpenUI5 as third-party content

The D3 charts are more flexible because they can manipulate any part of the DOM tree. Thus they can represent any shape you want but are harder to realize because you have to implement your own custom controls. In contrast, micro charts are easy to implement. And they make use of SAPUI5’s semantic color concept to illustrate error, critical, good and neutral states. We also used a block layout with dashboard design to arrange the charts in cells and rows.

Which of the two types of charts you can use also depends on whether you use SAPUI5 or OpenUI5 libraries. The micro charts are not part of OpenUI5. Therefore, if you open the Statistics page and the app does not find the sap.suite.ui.microchart library, it will load the D3 charts instead (note: until SAPUI5 1.44 is released, the micro charts version cannot be previewed, we will edit this post later and add a link).

Technically, we have two views: one implements the micro charts and the other the D3 charts, and in the controller of the statistics view, we have a try-catch statement to achieve the above behavior. If you like to have a look at the implementation, you can take a look at the source code of the Statistics Page Controller.

Micro Charts

Micro charts exist in various flavors, and each of them has a different visualization to show the data. Depending on what you want to show you can choose the one that suits you most. We used the following types in the Statistics page as you can see in the picture below:

The statistics page of the shop administrator showing micro charts

ComparisonMicroChart: Guess what? This chart’s aim is to give a quick view of compared values and some labels to give the pure values a little bit more meaning.

ColumnMicroChart: This is just like any other column chart: It compares different values which are represented as vertical bars.

AreaMicroChart: It is the most exciting chart of our collection: the AreaMicroChart. It shows a historical progress and consists of actual values, target values, thresholds and labels in combination with some colors.

RadialMicroChart: Here we have a single percentage value surrounded by a ring chart.

BulletMicroChart: This chart is a simple one: It displays an actual value compared to a target value.

HarveyBallMicroChart: The name of this chart could also be pie chart, because this is just what it is.

DeltaMicroChart: It represents the delta of two values.

If you like to read more about micro charts, here are two links to the documentation and the examples (in the search field enter the term “micro chart”)

D3 Charts

D3 charts are implemented with custom controls which create and render an empty div. Then we use d3.js to fill this div with the desired chart content. From the implementation side, we use the base class to extend the control class that contains the rendering mechanisms. All other custom controls inherit from this class.

Before we dive deeper into how this class works, we take a look at two concepts you surely want to know more about: the DOM and the control tree.

A UI5 application consists of XML views. When you run the app, it will parse the XML view and build the so-called “control tree” that contains the UI5 controls. It calls the renderer function for each of those and returns their HTML version. The DOM tree is placed inside the body of the HTML page. Later any change that occurs at one of those controls will force your application to recalculate and build the DOM tree.

Back to the base class: The base class initializes the control in the init function, renders it in the renderer function, and then puts it inside a div element. In the onAfterRendering function, the actual chart is being drawn.

The statistics page of the shop administrator showing D3 charts

We have implemented three D3 charts: column chart, comparison chart and pie chart. You can download the app at our Demo Apps page.

That’s it! You see how easy it is to get your data visualized and make dry facts appealing. We hope that you enjoyed our little trip into the realms of UI5-charts. Stay tuned for our next UI5ers Buzz with more news straight from the SAPUI5/OpenUI5 lab.

How are we doing? Let us know by leaving a comment here or contacting us in the slack channel.

Previous Post: UI5ers Buzz #03

Cheers,

Sylvia and Ayham

Sylvia is a UI5 developer and Scrum Master at SAP and she loves working with the latest technologies. Her passion is agile software engineering principles and knowledge exchange with other developers.

Ayham is an OpenUI5 developer. His interests are developing Web applications using cutting edge technologies. He is not limited to software development but also experienced with networks.