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!