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 using VizFrame(sap.viz.ui5.controls.VizFrame) in SAPUI5
1.Step-by-Step Procedure
1. Create an SAPUI5 application project in Eclipse IDE with a view and controller.
2. 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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
// 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": "201-发料到成本中心0","Value": "158626687"}, {"Year": "201-发料到成本中心1","Value": "531160986"}, {"Year": "201-发料到成本中心2","Value": "915105168"}, {"Year": "201-发料到成本中心3","Value": "1093786762"}, {"Year": "201-发料到成本中心4","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”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!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 Visualization
Congrats, you have successfully created Column chart in SAPUI5 application using VizFrame.
Please stay tuned to us for more
