Skip to Content
Technical Articles
Author's profile photo Vishnuvardhan Reddy Peram

VizFrame Charts and its various Properties/Features in SAPUI5

Hi all, I would like to share my working experience on VizFrame concept in SAPUI5.

VizFrame is a viz control that manages a visualization’s initialization, layout, feeding, customization  and  interactions.

Step 1: First I have created my xml view as View1.view.xml which as shown like below.

View1.view.xml :

In the view define a Vizframe chart of type Stacked Bar by using the required namespace xmlns:viz=”sap.viz.ui5.controls”.

<mvc:View controllerName="VizFrameCharts.controller.View1" xmlns:chart="sap.suite.ui.commons" xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"
xmlns:viz="sap.viz.ui5.controls" xmlns:vizData="sap.viz.ui5.data" xmlns:vizFeeds="sap.viz.ui5.controls.common.feeds" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>Stacked Bar/Column chart example}">
<content>
<chart:ChartContainer autoAdjustHeight="true" id="chartContainer"  title="Reports">
<chart:ChartContainerContent icon="sap-icon://horizontal-stacked-chart" title="Stacked_bar Chart">
<chart:content>
<viz:VizFrame height="" id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
vizProperties="{plotArea: { drawingEffect: 'glossy'}, title:{ text:'Data analysis through Reports'},dataLabel:{visible:true,showTotal:true}}"
vizType="stacked_bar">
<viz:dataset>
<vizData:FlattenedDataset data="{/Reports}">
<vizData:dimensions>
<vizData:DimensionDefinition name="Year" value="{Year}"/>
</vizData:dimensions>
<vizData:measures>
<vizData:MeasureDefinition name="SAP" value="{SAP}"/>
<vizData:MeasureDefinition name="SAPUI5" value="{SAPUI5}"/>
<vizData:MeasureDefinition name="SAP ABAP" value="{SAP ABAP}"/>
<vizData:MeasureDefinition name="JAVA" value="{JAVA}"/>
</vizData:measures>
</vizData:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<vizFeeds:FeedItem type="Measure" uid="valueAxis" values="JAVA,SAP ABAP,SAPUI5,SAP"/>
<vizFeeds:FeedItem type="Dimension" uid="categoryAxis" values="Year"/>
</viz:feeds>
</viz:VizFrame>
</chart:content>
</chart:ChartContainerContent>
</chart:ChartContainer>
</content>
</Page>
</pages>
</App>
</mvc:View>

 

Step 2: I have binded the Json data  to the Vizframe charts as shown like below.

Data.Json:

{
"Reports": [{

"Year": "2017",

"SAP": 100,
"SAPUI5": 100,
"ABAP": 200,
"JAVA": 200

}, {

"Year": "2018",

"SAP": 200,
"SAPUI5": 50,
"ABAP": 200,
"JAVA": 200
}, {

"Year": "2019",

"SAP": 200,
"SAPUI5": 50,
"ABAP": 200,
"JAVA": 200

}, {

"Year": "2020",

"SAP": 200,
"SAPUI5": 100,
"ABAP": 200,
"JAVA": 200

}

]
}

 

Step 3: View1.controller.js:

In the init() function of the Controller set up the data for the chart using measures and dimension.

onInit: function() {
var jsonData = new sap.ui.model.json.JSONModel("model/Data.json");
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setModel(jsonData);
}

In our example I have taken Year as the Dimension and SAP, SAPUI5,ABAPand JAVA as measures in the view itself which are already defined in the View1.view.xml.

Output:

The Output displays all 4 different technology books  sold in a particular year differentiated by color of the bar.

The total technology books  sold in a particular year is displayed at the end of the bar.

 

Note: To display the same data in form of stacked Column Chart, vizType stacked_column can be used instead of stacked_bar in the view.

 

Instead of taking Year as the Dimension and SAP, SAPUI5,ABAPand JAVA as measures in the view itself we will also have the possibility to take or define the Year as the Dimension and SAP, SAPUI5,ABAPand JAVA as measures in the controller also.

For this add the following source code in the View1.controller.js.

		onInit: function() {
			SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) {
				return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
			};

			var jsonData = new sap.ui.model.json.JSONModel("model/Data.json");
			var oVizFrame = this.getView().byId("idVizFrame");
			oVizFrame.setVizProperties({
				plotArea: {
					colorPalette: d3.scale.category20().range(),
					dataLabel: {
						showTotal: true
					}
				},
				tooltip: {
					visible: true
				},
				title: {
					text: "Stacked Bar Chart"
				}
			});
			var oDataset = new sap.viz.ui5.data.FlattenedDataset({
				dimensions: [{
					name: "Year",
					value: "{Year}"
				}],

				measures: [{
					name: "SAP",
					value: "{SAP}"
				}, {
					name: "SAPUI5",
					value: "{SAPUI5}"
				}, {
					name: "ABAP",
					value: "{ABAP}"
				}, {
					name: "JAVA",
					value: "{JAVA}"
				}],

				data: {
					path: "/Reports"
				}
			});
			oVizFrame.setDataset(oDataset);

			oVizFrame.setModel(jsonData);

			var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["SAP"]
				}),
				oFeedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["SAPUI5"]
				}),
				oFeedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["ABAP"]
				}),
				oFeedValueAxis3 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["JAVA"]
				}),
				oFeedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "categoryAxis",
					"type": "Dimension",
					"values": ["Year"]
				});

			oVizFrame.addFeed(oFeedValueAxis);
			oVizFrame.addFeed(oFeedValueAxis1);
			oVizFrame.addFeed(oFeedValueAxis2);
			oVizFrame.addFeed(oFeedValueAxis3);
			oVizFrame.addFeed(oFeedCategoryAxis);

		}

 

But in the view just define the VizFrame control as shown like below.

	<viz:VizFrame height="" id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
									vizProperties="{plotArea: { drawingEffect: 'glossy'}, title:{ text:'Data analysis through Reports'},dataLabel:{visible:true,showTotal:true}}"
									vizType="stacked_bar">

Output: We will get same output response like previous one means when we defined the measures and dimension in the view itself.

But in this example i have taken Year as the Dimension and SAP, SAPUI5,ABAPand JAVA as measures in the view only which was already defined  in the View1.view.xml.

Now I will provide a toolbar with some generic functions for tables and charts based on the VizFrame control like zoom, display in fullscreen mode, toggle the legend, switch between chart types, and changes of the chart dimension.

Lets see the features or properties of this chart container based on VizFrame control  are as follows

For this add the following source code in the view.

<chart:ChartContainer autoAdjustHeight="true" id="chartContainer" showFullScreen="true" title="Reports">

 

 

 

Viz charts contains a lot of properties as like we can show or hide the Chart Title, Axis/Category labels and Legend having the dimension labels etc.

We can display the charts data in the tabular form also by adding the another ChartContainerContent to the the ChartContainer in the view which as shown below.

<chart:ChartContainerContent icon="sap-icon://table-view" title="Table">
<chart:content>
<Table id="chartContainerContentTable" items="{ path: '/Reports' }">
<columns>
<Column demandPopin="true">
<Label design="Bold" text="{i18n>Year}"/></Column>
<Column demandPopin="true">
<Label design="Bold" text="{i18n>SAP}"/></Column>
<Column demandPopin="true">
<Label design="Bold" text="{i18n>SAPUI5}"/></Column>
<Column demandPopin="true">
<Label design="Bold" text="{i18n>ABAP}"/></Column>
<Column demandPopin="true">
<Label design="Bold" text="{i18n>JAVA}"/></Column>
</columns>
<ColumnListItem press="">
<Text text="{Year}"></Text>
<Text text="{SAP}"></Text>
<Text text="{SAPUI5}"></Text>
<Text text="{ABAP}"></Text>
<Text text="{JAVA}"></Text>
</ColumnListItem>
</Table>
</chart:content>
</chart:ChartContainerContent>


 

 

In the controller also you need to set this charts data to the table as shown below

var oVizFrameDataForTable = this.getView().byId("chartContainerContentTable");
oVizFrameDataForTable.setModel(sampleDatajson);

 

After that if you click on the table view it will show the charts data in the table which as shown like below

Also we can switch from table view to charts view and vice versa which as shown below.

 

Also we have some of the additional featurs of Vizframe charts are

  1. Display “Sales Values” in  Chart
  2. Display total Sales Value count at the end of the each stacked bar .
  3. Show/hide the Axis/Category Labels
  4. Also we can display “Sales Values”  in “Percentage”  as well as normal integer count.

All of above can be achieved by just updating the vizProperties property of vizFrame.

Add the following code in the View1.view.xml.

<Panel class="panelStyle" expandable="true" expanded="true" headerText="Settings" id='settingsPanel' width="auto">
<content>
<HBox class="sapUiSmallMarginBegin">
<VBox class='settingsBox'>
<Label design="Bold" text="{i18n>valueLabel}"></Label>
<Switch change='onDataLabelChanged' state="true">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Switch>
</VBox>
<VBox class="sapUiMediumMarginBegin">
<Label design="Bold" text="{i18n>sumValueLabel}"></Label>
<Switch change='onSumLabelChanged' state="false">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Switch>
</VBox>
<VBox class="sapUiMediumMarginBegin">
<Label design="Bold" text="{i18n>axisTitleLabel}"></Label>
<Switch change='onAxisTitleChanged' state="false">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Switch>
</VBox>
<VBox class="sapUiMediumMarginBegin">
<Label design="Bold" text="{i18n>stackedType}"></Label>
<RadioButtonGroup select="onTypeSelected">
<buttons>
<RadioButton text="{i18n>regular}"/>
<RadioButton text="{i18n>percentage}"/>
</buttons>
</RadioButtonGroup>
</VBox>
</HBox>
</content>
</Panel>

 

In the view define a Vizframe chart of type Stacked Bar by using the required namespace as xmlns:viz=”sap.viz.ui5.controls”.

and also add the required namespaces in the Controller also which as shown like below

"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem",
"sap/viz/ui5/controls/Popover",
"sap/viz/ui5/controls/VizFrame",
"sap/viz/ui5/format/ChartFormatter",
"sap/viz/ui5/api/env/Format"

 

Add the below methods to the controller View1.controller.js:

onDataLabelChanged : function(oEvent){
var that=this;
var oVizFrame = that.getView().byId("idVizFrame");

oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
visible: oEvent.getParameter("state")
}
}
});

},
onSumLabelChanged : function(oEvent){
var that=this;
var oVizFrame = that.getView().byId("idVizFrame");
var sumLabelSwitch = oEvent.getParameter("state");
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
showTotal: sumLabelSwitch
}
}
});

},
onAxisTitleChanged : function(oEvent){
var that=this;
var oVizFrame = that.getView().byId("idVizFrame");

var state = oEvent.getParameter("state");
oVizFrame.setVizProperties({
valueAxis: {
title: {
visible: state
}
},
categoryAxis: {
title: {
visible: state
}
}
});

},
onTypeSelected : function(oEvent){
var that=this;
var typeRadio = oEvent.getSource().getSelectedButton().getProperty("text");
var oVizFrame = that.getView().byId("idVizFrame");

if (typeRadio === "Regular") {

oVizFrame.setVizType("stacked_bar");

} else {
oVizFrame.setVizType("100_stacked_bar");
oVizFrame.setVizProperties({
plotArea: {
mode: "percentage",
drawingEffect: "glossy",

dataLabel: {
type: "percentage",
visible: true

}
}

});

}
}

 

Then the Final Outputs looks like below.

 

 

 

 

 

Popover:

we can show the popover also on the vizframe charts.Its shows count which means how many selections are selected as well as the values.

For that define the popover and attach it to the vizframe.

var oVizFrame = this.getView().byId("idVizFrame");
var vizPopover = new sap.viz.ui5.controls.Popover({});
vizPopover.connect(oVizFrame.getVizUid());

Output : Clicking on the stacked bar will show you the popover.

 

 

 

For more information regarding the VizFrames concept go through the links

https://sapui5.hana.ondemand.com/#/api/sap.viz.ui5.controls.VizFrame

https://sapui5.hana.ondemand.com/#/entity/sap.viz.ui5.controls.VizFrame

Hope you understand the post ?

Happy Learning!

Thank you!

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo salibindla vinay reddy
      salibindla vinay reddy

      Good one!! Vishnuvardhan Reddy Peram

      Author's profile photo Srikar Nagadevara
      Srikar Nagadevara

      Thanks @Vishnuvardhan Reddy Peram.  Informative and useful !!!

      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Thanks for the blog post.

      My opinion on viz charts:

      I think it's really cool that we have the possibility to create beautiful charts and graphs in SAPUI5 apps. BUT in my experience, those will never get used in a company which uses BW (Business Warehouse). Why? Because BW can do those charts out of the box and much cheaper than a custom Fiori app.

      Don't you think so?

      BR, Klaus

      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 Mauricio Pinheiro Predolim
      Mauricio Pinheiro Predolim

      Cool man!

      Thanks!

       

      Author's profile photo Ramin Shafai
      Ramin Shafai

      If you look at the API Reference for viz.Bar chart, it says Deprecated as of version 1.32.0.

      And it doesn't say what to use instead of it. In fact all viz charts are deprecated.

      So I don't understand why there are new blogs about deprecated controls.And what  are we supposed to use now for analytic charts.

       

      Author's profile photo Ramin Shafai
      Ramin Shafai

      I got my answer. All the individual charts are deprecated, eg. sap.viz.ui5.Area, sap.viz.ui5.Bar, etc. But sap.viz.ui5.controls.VizFrame is what you're supposed to use, and select a type, eg. Pie.

      I guess SAP forgot to mention that in the message of the deprecated controls (like they always do).