Brook Preloader

Blog

VizFrame Charts and it’s various Properties/Features 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!

0 0 vote
Rating
guest
0 Comments
Inline Feedbacks
View all comments