Column Chart using VizFrame (sap.viz.ui5.controls.VizFrame) in SAPUI5

27
20155

Hello every one, In this blog, we will learn how to display charts like Line, Column, Bar using VizFrame in SAPUI5 applications. Lets get started.In this example we will create a Column Chart using VizFrame(sap.viz.ui5.controls.VizFrame)  in SAPUI5. Viz Frame is available in “sap.viz.ui5.controls” library.

Column Chart in SAPUI5

Column Chart using VizFrame(sap.viz.ui5.controls.VizFrame)  in SAPUI5

Step-by-Step Procedure

1. Create an SAPUI5 application project in Eclipse IDE with a view and controller.

SAPUI5 Application Project2. Double click on the view “V_chart.view.xml” to add the VizFrame to create column chart. Copy and paste the below code into the view.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"  controllerName="demovizframe.V_chart"
	xmlns:viz="sap.viz.ui5.controls" 
	xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Title">
 		<content> 
			<viz:VizFrame xmlns="sap.viz" id="idcolumn" >
			</viz:VizFrame>
		</content>
	</Page>
</core:View>

3. Now double click on controller “V_chart.controller.js” to add the java script code necessary to set the data to the column chart and different chart properties. We are going to write the code in onInit( ) method of the controller.

//      1.Get the id of the VizFrame		
		var oVizFrame = this.getView().byId("idcolumn");
		
//      2.Create a JSON Model and set the data
		var oModel = new sap.ui.model.json.JSONModel();
		var data = {
				'Population' : [
		            {"Year": "2010","Value": "158626687"},
		            {"Year": "2011","Value": "531160986"},
		            {"Year": "2012","Value": "915105168"},
		            {"Year": "2013","Value": "1093786762"},
		            {"Year": "2014","Value": "1274018495"},
		           ]};
		oModel.setData(data);
		
//      3. Create Viz dataset to feed to the data to the graph
		var oDataset = new sap.viz.ui5.data.FlattenedDataset({
			dimensions : [{
				name : 'Year',
				value : "{Year}"}],
			               
			measures : [{
				name : 'Population',
				value : '{Value}'} ],
			             
			data : {
				path : "/Population"
			}
		});		
		oVizFrame.setDataset(oDataset);
		oVizFrame.setModel(oModel);	
		oVizFrame.setVizType('column');
		
//      4.Set Viz properties
		oVizFrame.setVizProperties({
            plotArea: {
            	colorPalette : d3.scale.category20().range()
                }});
		
		var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		      'uid': "valueAxis",
		      'type': "Measure",
		      'values': ["Population"]
		    }), 
		    feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		      'uid': "categoryAxis",
		      'type': "Dimension",
		      'values': ["Year"]
		    });
		oVizFrame.addFeed(feedValueAxis);
		oVizFrame.addFeed(feedCategoryAxis);

4. Copy and paste the below code in “index.html”.

<!DOCTYPE HTML>
<html>
  <head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

	<script src="resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_bluecrystal">
	</script>
	<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
	<script>
	sap.ui.localResources("demovizframe");
	var app = new sap.m.App({initialPage:"idV_chart1"});
	var page = sap.ui.view({id:"idV_chart1", 
                                viewName:"demovizframe.V_chart", 
                                type:sap.ui.core.mvc.ViewType.XML});
	app.addPage(page);
	app.placeAt("content");
	</script>

   </head>
  <body class="sapUiBody" role="application">
  <div id="content"></div>
  </body>
</html>

5. Save the application and execute the “index.html” of the application to see the output.

Column Chart in SAPUI5Column Chart Visualization

Column Chart in SAPUI5_2 Column Chart in SAPUI5_3 Column Chart in SAPUI5_4

Congrats, you have successfully created Column chart in SAPUI5 application using VizFrame.

Please stay tuned to us for more SAPUI5 tutorials.Please feel free to comment and let us know your feedback. You feedback will keep us alive.

like-128

Comments are closed.