SAPUI5 VizFrame



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.
Previous
Next Post »

6 comments

Click here for comments
Shekar
admin
1 August 2016 at 22:42 ×

Hi when am trying to create same charrt in js view in index.html am declaring library as sap.viz.ui5.controls.It is throwing error.Could you please let me know how to declare library in js for viz frame controls

Reply
avatar
Sanjo Thomas
admin
1 August 2016 at 22:54 ×

It should be the same in js view also, could you tellme what is the error that you are getting?

Reply
avatar
Sanjo Thomas
admin
1 August 2016 at 23:19 ×

From what I understood, you might have missed the namespace in the index file

Reply
avatar
KAPIL KARWA
admin
21 December 2016 at 22:14 ×

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

Shouldn't it be
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

As View is under mvc package

Reply
avatar
Anonymous
admin
2 May 2017 at 14:01 ×

Hello can u help me find solution of this "http://stackoverflow.com/questions/43744368/how-to-create-a-column-chart-with-multiple-series-in-sapui5"

Reply
avatar
Unknown
admin
20 November 2017 at 21:52 ×

Hi,
I want to consume Bex Query Data as raw data for chart. I tried but no luck so far. Could you please guide me.

Arpan

Reply
avatar