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:
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.
Comments (6)
Shouldn't it be
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
As View is under mvc package
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