Showing posts with label sap viz frame. Show all posts
SAPUI5 VizFrame
charts dataset sap viz frame sapui5 vizframe control

SAPUI5 VizFrame

Sanjo Thomas•22:42:00


Charts Using VizFrame Control
Hi, in this tutorial, we will learn how to design viz frame charts. Unlike Viz charts, Vizframe charts are a bit different. SAP no longer supports Viz charts, it emphasize developers to use VizFrame, since viz charts are now depreciated since 1.32.0, are no longer actively developed and won’t be getting any new features.
VizFrame is available in sap.viz.ui5.controls. We will go through this new control with the help of a simple example of a bar chart depicting the no. of cars bought on an yearly basis.

Watch the video example after reading the blog, for better understanding:


 
Example
Alto: "758620"
Zen: "431160"
Santro: "515100"
Matiz: "293780"
Wagon R: "974010"

Steps
     1) Create SAPUI5 application in Eclipse and provide an appropriate name to it.
2) In the View folder create a VizChart.view.xml and refer the code
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" controllerName="VizFrame.controller.VizChart">
<Page title="Viz Frame">
<content>
<viz:VizFrame xmlns="sap.viz" id="idcolumn" width="100%">
</viz:VizFrame>
</content>
</Page>
</core:View>

3)In the controller folder create a VizChart.controller.js and refer code. Define the chart and its properties in the init method.

sap.ui.define([
"sap/ui/core/mvc/Controller"

], function (Controller) {
"use strict";
return Controller.extend("VizFrame.controller.VizChart", {


onInit : function() {
//                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 = {
'Cars' : [
{"Model": "Alto","Value": "758620"},
{"Model": "Zen","Value": "431160"},
{"Model": "Santro","Value": "515100"},
{"Model": "Matiz","Value": "293780"},
{"Model": "Wagan R","Value": "974010"},
]};
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 : 'Model',
value : "{Model}"}],

measures : [{
name : 'Cars Bought',
value : '{Value}'} ],

data : {
path : "/Cars"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('bar');

//                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': ["Cars Bought"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Model"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
},
});
});
4) Refer the code in index.html file
<!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,sap.viz" data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-resourceroots='{
                        "VizFrame":"./"
                        }'>
            </script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>
//          sap.ui.localResources("view");
            var app = new sap.m.App({initialPage:"id_vizChart"});
            var page = sap.ui.view({id:"id_vizChart",
                                      viewName:"VizFrame.view.VizChart",
                                      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) Execute index.html file

Chart type can be changed according to need,  just change the viz type in viz Properties  to column, line etc, just like we have used “bar” here.
      oVizFrame.setVizType('bar');

Points to keep in mind
·         Create data set
·         Flattend dataset consists of dimensions and measures. Dimensions are generally used for axis, and measures are used for value trends.
·         Bind flattend dataset to chart
·         Dimesions and Measure depends on the type of chart. It mostly depends on the type of requirement.
·         VizProperties genrally describe the look and feel of the chart. We can define the title of the chart here, or maybe use different colours for different bar, and similarly.
Read more