SAPUI5 VizFrame Charts : How?
Hey Community!
It’s been a while now that I am using SAPUI5 VizFrame charts. Today I’m going to share some of the tips on VizFrame Charts and a How-to Guide.
This post assumes that you can set up a SAPUI5 project in WebIDE/Eclipse.
Test Case: Let’s say you own an Ice Cream truck and you are building a dashboard to view flavor-wise sales (I’ll take a better example next time).
So, let’s start then…
1. Select chart type
Visit SAPUI5 Demo kit to select a chart type which suits your requirement.
https://sapui5.netweaver.ondemand.com/#/entity/sap.viz.ui5.controls.VizFrame
For this blog, we will be using Pie Chart (You might be tired of seeing the example of Pie Chart but stay with me on this).
2. Always use a Chart Container! Link
It is a control specially built to hold Charts to provide additional but important functionalities like providing a toolbar with generic functions like zoom, display in full-screen mode, toggle the legend, switch between chart types, and changes of the chart dimension.
So, In your View add the Following :
<mvc:View xmlns:mvc="sap.ui.core.mvc"
controllerName="<Your Controller>"
xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz="sap.viz.ui5.controls" xmlns:chart="sap.suite.ui.commons">
<Page title="My Ice Cream Truck">
<content>
<VBox>
<chart:ChartContainer id="chartContainer" showFullScreen="true" showZoom="false" title="Ice-Cream-Report">
<chart:ChartContainerContent>
<chart:content>
<!-- Here your vizframe chart will be added -->
</chart:content>
</chart:ChartContainerContent>
</chart:ChartContainer>
</VBox>
</content>
</Page>
</mvc:View>
3. Let’s settle on the Data we are going to display.
We’ll be considering an array of the following type of record.
{
Flavor:<Flavour Name>,
Sales :<Sales in Number>
}
4. Adding Pie Chart.
In your View in “<chart content>” add the following :
.
.
<chart:content>
<viz:VizFrame id="idpiechart" width="auto"
uiConfig="{applicationSet:'fiori'}" vizType="pie"
vizProperties="{
plotArea:{
dataLabel:{visible: true}
},
title : {text:'Flavor-Sales'}
}"
selectData="myOnClickHandler"
noDataText="Go make a Sale!"
renderComplete="handleRenderComplete"
>
<viz:dataset>
<viz.data:FlattenedDataset id="flattenData" data="{IceCreamModel>/Items}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Flavor" value="{IceCreamModel>Flavor}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Sales" value="{IceCreamModel>Sales}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="Sales" />
<viz.feeds:FeedItem uid="color" type="Dimension" values="Flavor" />
</viz:feeds>
</viz:VizFrame>
</chart:content>
.
.
And add this in the controller:
onInit: function(){
this._setIceCreamModel();
},
_setIceCreamModel:function(){
var aData = {
Items : [
{
Flavor:"Blue Moon",
Sales : 700
},
{
Flavor:"Matcha Green Tea",
Sales : 1100
},
{
Flavor:"ButterScotch",
Sales : 1400
},
{
Flavor:"Black Current",
Sales : 560
}
]
}
var oIceCreamModel = new JSONModel();
oIceCreamModel.setData(aData);
this.setModel(oIceCreamModel, "IceCreamModel");
}
Tip:
When you will be consuming OData, Set Binding of FlattenedDataset dynamically in the controller, This will help to avoid an empty OData call.
Output:
5. Small cosmetic changes…
- Display “Sales Values” in Pie Chart, not the “Percentage”
- Change the legend position to left.
- Giving the Chart a 3D ishh (glossy) look
All of above can be achieved by just updating the vizProperties property of vizFrame:
Change the vizProperties property in your view:
vizProperties="{
plotArea:{
dataLabel:{visible: true,type:'value'}, <!-- data label -->
drawingEffect: 'glossy' <!-- glossy look -->
},
title : {text:'Flavor-Sales'},
legendGroup:{layout:{position: 'left'}} }" <!-- legend position -->
Output:
6. Update Colour Palate
The colors displayed in the pie chart cannot be related to Ice Cream Flavors at all. By default following standard colors are displayed.
"sapUiChartPaletteQualitativeHue1", "sapUiChartPaletteQualitativeHue2", "sapUiChartPaletteQualitativeHue3"………………… "sapUiChartPaletteQualitativeHue22"
So, you can overwrite and add your colors, according to your data values, In our case, add the following in _setIceCreamModel function.
var oChart = this.getView().byId("idpiechart"),
oChartProperties = oChart.getVizProperties(),
aColorPalate = ["#5bbae7","#b6da58","#f9c463","#935dd0"];
oChartProperties.plotArea.colorPalette = aColorPalate;
oChart.setVizProperties(oChartProperties);
Note that the colors in aColorPalate will be plotted according to the order of records, i.e. In our case “Blue Moon” occurs as the first record so “#5bbae7” will be plotted for “Blue Moon” same for the rest of the items in order.
Output:
7. Custom Formatters for Display Values
Formatting of values displayed is a must!
For example, on a lucky month, you sold over 1,356,000 worth of ice cream (let’s say black current)
Output will be like :
so we cannot display this value as it is, it should be formatted like 1.35 Million or 1.35 M
To achieve this we can use property formatString. There are some standard formats which you can explore over here:
https://sapui5.hana.ondemand.com/#/api/sap.viz.ui5.format.ChartFormatter.DefaultPattern
But! We can create our own formatters, to do so add the following function in your controller and call this function in onInit() method. This will register one custom formatter.
_setCustomFormatter:function(){
var chartFormatter = ChartFormatter.getInstance();
Format.numericFormatter(chartFormatter);
var UI5_FLOAT_FORMAT = "CustomFloatFormat_F2";
chartFormatter.registerCustomFormatter(UI5_FLOAT_FORMAT, function(value) {
var ofloatInstance = sap.ui.core.format.NumberFormat.getFloatInstance({style: 'short',
maxFractionDigits: 2});
return ofloatInstance.format(value);
});
}
For the above code to work Don’t forget to add ChartFormatter and Formatter dependency in sap.ui.define and making the reference of the same.
"sap/viz/ui5/format/ChartFormatter",
"sap/viz/ui5/api/env/Format"
Now to see this in action, you just have to update your almighty property “vizProperties”
vizProperties="{
plotArea:{
dataLabel:{visible: true,type:'value',formatString:'CustomFloatFormat_F2'} <!-- format string -->
},
title : {text:'Flavor-Sales'}
}"
And Now:
Neat! right?
8. Popover
Last but not the least is the vizframe popover, In our case, we are showing formated values but we would like to view the original values too, here the popover comes the rescue.
Create a popover and attach it to the vizframe.
var oChart = this.getView().byId("idpiechart");
var vizPopover = new sap.viz.ui5.controls.Popover({});
oChart.connect(vizFrame.getVizUid());
Also, you can decide the format string of popover display by using setFormatString method.
Output: Clicking on pie will show you the popover.
That’s all for now!
Also, check out the Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/chart/
Hope you liked the post 🙂
To Knowledge!
Awesome blog.
Thank you 🙂
Useful blog! Many thanks!
Thanks, Glad you liked it 🙂
Hi Vinayak,
Thanks for this exhaustive and charming blog on viz-charts. It's one of my bookmarks now!
Best Regards
Smriti
Thank you for the kind words Smriti 🙂
This blog is really a time saver. Thanks for posting.
Sree
hai
i used this code in my project,but not getting the output.Do you have any idea about it
Regards
Arun.m
hi community ,
i followed the same steps but not getting the output can somebody help .
i am getting the following error :
Can somebody help .
Thanks
Ananta
Hello Vinayak,
what do you mean by "When you will be consuming OData, Set Binding of FlattenedDataset dynamically in the controller, This will help to avoid an empty OData call."? I will read data from OData service and set the result as a model for the pie chart: what am I missing? Thanks in advance for you time
You are right Mario.
Binding the FlattenedDataset dynamically will prevent the empty OData Call and after binding you'll find data displaying on your beautiful chart 🙂
Thanks for the blog. But can we call viz popover dynamically from another function/ event?
hi,
It doesn't work even though I have connected the data to model