VizFrame Charts and its various Properties/Features in SAPUI5

[former_member470019]

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!

 

[former_member664396]

Good one!! mouritech

[Srikar]

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

[former_member268137]

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

[dipak_mahajan25]

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

[former_member273190]

Cool man!

Thanks!

 

[RaminS]

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.

 

[RaminS]

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).

 

[jose_roberto_milan]

I tried to do it step by step, but i have a issue. I think where is the PATH on oDataSet. Could you explain us for what is that PATH?

[aqibpathan]

Hi!

It is defined under below function of view1 controller

onInit: function() {

Regards,

AQIB

[aqibpathan]

HI!

Can you do drill down on specific chart node to see the data?

Regards,

AQIB

[Ganesh_Pandian]

This might be a dumb question. But I have no other option.

 

I have copy pasted the step1, step2 , step 3 accordingly.

only thing I changed is in the step1 changed the controller name to match my project.

 

But I am not getting any output? What could be the reason? It says no data in output.

[sarvesh_1997]

Hi mouritech,

It was a good example and it helped me a lot, but i had a question in legend potion can we maintain translation legend in i18n and if can be done then how ?

Legend