Skip to Content
Author's profile photo Vinayak Khosla

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!

Assigned tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo vikas mehta
      vikas mehta

      Awesome blog.

      Author's profile photo Vinayak Khosla
      Vinayak Khosla
      Blog Post Author

      Thank you 🙂

      Author's profile photo Jorge Sousa Villafaina
      Jorge Sousa Villafaina

      Useful blog! Many thanks!

      Author's profile photo Vinayak Khosla
      Vinayak Khosla
      Blog Post Author

      Thanks, Glad you liked it 🙂

      Author's profile photo Smriti Gupta
      Smriti Gupta

      Hi Vinayak,

       

      Thanks for this exhaustive and charming blog on viz-charts. It's one of my bookmarks now!

       

      Best Regards

      Smriti

      Author's profile photo Vinayak Khosla
      Vinayak Khosla
      Blog Post Author

      Thank you for the kind words Smriti 🙂

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      This blog is really a time saver. Thanks for posting.

      Sree

      Author's profile photo Arun m
      Arun m

      hai

      i used this code in my project,but not getting the output.Do you have any idea about it

       

      Regards

      Arun.m

      Author's profile photo Mohini Verma
      Mohini Verma

      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

      Author's profile photo Mario Mezzullo
      Mario Mezzullo

      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

      Author's profile photo Vinayak Khosla
      Vinayak Khosla
      Blog Post Author

      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 🙂

      Author's profile photo Dipak Mahajan
      Dipak Mahajan

      Thanks for the blog. But can we call viz popover dynamically from another function/ event?

      Author's profile photo hakan erdoğan
      hakan erdoğan

      hi,

      It doesn't work even though I have connected the data to model