Visual representation of data is crucial in enterprise applications to help users analyze and interpret complex datasets effectively. The UI5 Charts Library provides a powerful set of reusable chart controls within the SAPUI5 framework, enabling developers to embed rich, interactive visualizations seamlessly in their SAP Fiori applications.
This article explores the UI5 Charts Library, its capabilities, and best practices to implement various charts, making your SAPUI5 applications more insightful and user-friendly.
The UI5 Charts Library (sap.ui.chart) is an SAPUI5 extension that offers a comprehensive set of ready-to-use, customizable chart controls such as:
It is built on top of the VizFrame control, powered by the Viz.js library, providing high performance and responsive charts optimized for enterprise use.
To use the UI5 Charts Library in your SAPUI5 application:
manifest.json:"sap.ui5": {
"dependencies": {
"libs": {
"sap.ui.chart": {},
"sap.viz": {}
}
}
}
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/chart/Chart"
], function(Controller, JSONModel, Chart) {
// Controller code
});
Here’s a simple example to create a column chart that shows sales data.
{
"sales": [
{ "Year": "2019", "Revenue": 120, "Profit": 30 },
{ "Year": "2020", "Revenue": 150, "Profit": 45 },
{ "Year": "2021", "Revenue": 170, "Profit": 60 }
]
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:chart="sap.ui.chart"
controllerName="my.app.controller.Main">
<chart:ColumnChart
id="salesChart"
width="100%"
height="400px"
dataset="{/sales}">
<chart:dataset>
<chart:FlattenedDataset
data="{/sales}">
<chart:dimensions>
<chart:Dimension
name="Year"
value="{Year}"/>
</chart:dimensions>
<chart:measures>
<chart:Measure
name="Revenue"
value="{Revenue}"/>
<chart:Measure
name="Profit"
value="{Profit}"/>
</chart:measures>
</chart:FlattenedDataset>
</chart:dataset>
</chart:ColumnChart>
</mvc:View>
The VizFrame control (sap.viz.ui5.controls.VizFrame) supports many additional chart types and advanced features such as tooltips, legends, semantic coloring, and interactivity.
<VizFrame
id="idVizFrame"
uiConfig="{applicationSet:'fiori'}"
vizType="line"
width="100%"
height="400px">
<dataset>
<FlattenedDataset
data="{/sales}">
<dimensions>
<Dimension
name="Year"
value="{Year}"/>
</dimensions>
<measures>
<Measure
name="Revenue"
value="{Revenue}"/>
</measures>
</FlattenedDataset>
</dataset>
<feeds>
<FeedItem
uid="valueAxis"
type="Measure"
values="Revenue"/>
<FeedItem
uid="categoryAxis"
type="Dimension"
values="Year"/>
</feeds>
</VizFrame>
You can customize the appearance and behavior of charts via properties and API methods:
Example setting a semantic color palette:
oVizFrame.setVizProperties({
plotArea: {
dataPointStyle: {
rules: [{
dataContext: { Profit: { min: 0 } },
properties: { color: "sapUiChartSemanticColorGood" }
}]
}
}
});
Charts update automatically when the bound model changes.
To update chart data dynamically:
var oModel = new sap.ui.model.json.JSONModel();
this.getView().setModel(oModel);
// Later update data
oModel.setData({
sales: [
{ Year: "2022", Revenue: 180, Profit: 70 },
{ Year: "2023", Revenue: 200, Profit: 90 }
]
});
Charts can be integrated with Smart Controls to leverage metadata-driven UI generation, especially in Fiori Elements applications.
The SAPUI5 Charts Library is an essential tool for developers aiming to enhance their applications with compelling data visualizations. With a wide range of chart types, customization options, and seamless integration with SAPUI5 models, it empowers the creation of insightful and interactive dashboards. By mastering the Charts Library, developers can significantly improve the analytical capabilities and user experience of SAP Fiori applications.