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.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
6 comments
Click here for commentsHi 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
ReplyIt should be the same in js view also, could you tellme what is the error that you are getting?
ReplyFrom what I understood, you might have missed the namespace in the index file
Reply<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
ReplyShouldn't it be
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
As View is under mvc package
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"
ReplyHi,
ReplyI want to consume Bex Query Data as raw data for chart. I tried but no luck so far. Could you please guide me.
Arpan
ConversionConversion EmoticonEmoticon