UI5 with amazing visualizations

[werner_daehn]

WebUIs and there in particular ones using the Fiori style guides are visually very appealing. What is missing are attractive charting options. SAPUI5 has the basic charts available, OpenUI5 none and even SAP Analytics Cloud charting options are surprising few when it comes to higher order data sets.

Something like this: With one glance the daily information, the weekly total, and clusters per month/weekday can be spotted.

 

For a UI5 developer building such charts is actually quite simple. Take an existing charting library and wrap it into a control. And that is exactly what I have done as demo.

 

Questions to answer are:

• Which library to use? There are so many. Some are very low level with virtually unlimited options. The D3 library is one candidate.


• How to technically wrap that into UI5 with dependency handling, module loading etc?


• How to assign the data? Using the UI5 JsonModel or oDataModel or something else?


• How to transform data for cases where the chart needs something else than a table-like data format?

Over the last year I tried different approaches. The library I liked the most was amcharts. With few lines of code simple charts can be created, extension points for everything and well structured. Above diagram is an xyChart with the x-Axis being circular. Then Axis for the weekdays and weekly totals are added in different bands. And finally two Value Series are added, one for the inner bar chart and one for the bubble chart.

What I failed with in try #1 is embedding those into UI5. The natural thing to do was to create one UI5 object per chart, axis, series and all the other options but given how flexible amcharts is, that was a nightmare.

Then I thought about it again. How would an end user actually configure such chart? One very nice method is to use the amcharts editor. The layout is created visually including sample data and the result is a Json config file to use. With option #1 this Json config file must be translated into a huge list of properties inside an XMLView.

No, that does not make sense. Much simpler if the UI5 control has essentially no properties except for chart type and the location of the json file. Even the rest endpoints where the data resides can be specified in the json file - no need for a JsonModel.

Hence the plan is to use the Json config file for all visual settings and merge UI5 model data into those configurations for data driven properties.

Source code available in github as part of the larger AppContainer development environment.