UI5 charting library

[werner_daehn]

Today's UIs must be visually appealing and SAPUI5 does come with charting capabilities.

Note: This is a complete rewrite utilizing the latest amCharts 5 version and a different concept.

In my projects in need much more than that. More types of charts but also more flexibility within each chart. For example a chart like that. To enable this I have created an UI5 control for the amCharts charting engine.

The various approaches

Which chart to use depends on the data and the user intent of the visualization. Tableau, just to use another enterprise grade BI tool as example, provides this guidance. (An even more comprehensive list is shown in the DataVizCatalog.)

The crown of all visualization probably has d3.js.

Looking at these options, there is a ranking between those: SAP ↔ Tableau ↔ d3
It goes from from simple and limited ↔ complex and flexible.

What I am looking for is something that is extremely powerful and flexible but simple to use. With this thought in mind, I have built a UI5 library for the amCharts diagrams. The amCharts library is my favorite charting engine, although it requires quite some coding. But with the combination of UI5 it makes creating fancy charts quite simple.

 

UI5 XMLView

Essentially the coding becomes describing the chart in the XMLView.

<Chart>

    <children>

        <XYChart>

            <xAxis>

                <CategoryAxis categoryField="year" componentData="{/}" />

            </xAxis>

            <yAxis>

                <ValueAxis />

            </yAxis>

            <series>

                <LineSeries

                    valueYField="europe" 

                    categoryXField="year"

                    stacked="true"

                    componentData="{/}"

                >

                <LineSeries

                    valueYField="usa" 

                    categoryXField="year"

                    stacked="true"

                    componentData="{/}"

                >

                <LineSeries

                    valueYField="apac" 

                    categoryXField="year"

                    stacked="true"

                    componentData="{/}"

                >

                </LineSeries>

            </series>

        </XYChart>

    </children>

</Chart>

 

This is then rendered as UI5 control:

 

The XMLView says, a Chart container should be rendered and it consists of a single XYChart, a thing that has two axes aggregations and a series aggregation. The xAxis should be a category and the labels come from the year property of the UI5 model. The yAxis is a ValueAxis which can be any number.

Within this XYChart should be three LineSeries with the same data binding but different settings for the valueYField. The values of all three should be stacked.

 

This is a different concept!

The SAPUI chartViz "Combined Column and Line Chart" would specify the chart type.

<viz:VizFrame vizType='combination' />

 

The approach of amCharts and this UI5 library is to build each chart out of its base elements. Above Combination-Chart is a XYChart with a LineSeries and a ColumnSeries. Or more series elements like a SmoothedXLineSeries, a Series with Bullets, ... All series on the sames axis or different axes. The axes rendered in the same area or occupying non-overlapping areas, ....

This allows for very interesting visualizations. My favorite from the top is a visualization of an entire year, all 365 data points plus weekly totals. Now we know how that chart was created. It is a RadarChart with a circular DateAxis. The yAxis aggregation has an inner ValueAxis for the weekly totals and an outer CategoryAxis for the Mon-Sun range. The series aggregation consists of a ColumnSeries bound to the inner yAxis and a Series with Bubbles bound to the outer axis.

Additionally the DateAxis got Ranges to indicate the months.

 

Part of the AppContainer project

This UI5 library is part of the AppContainer project and available here:

https://github.com/rtdi/AppContainer/tree/master/appcontainerapp/src/main/webapp/ui5libs/amcharts

Examples and demos of concepts are found here:

https://github.com/rtdi/AppContainer/tree/master/appcontainerapp/src/main/webapp/protected/apps/amch...