Charts Using Viz Control
Hi, in this tutorial, we will learn how to design charts.
SAP provide different controls for charts, like makit, viz charts, VizFrame.
Viz Charts are simple to create and to understand. However, SAP no longer supports Viz charts, it
emphasize developers to use VizFrame,
viz charts are now depreciated since 1.32.0, are no longer actively developed
and won’t be getting any new features. Still for newbies, viz charts might
provide a better understanding about the charts.
Viz charts is available in sap.viz.ui5. We will go through
this control with the help of a simple example of a bar chart depicting the no.
of population over the years for a particular set of countries.
Watch the video explanation of this blog here:
Example
India:
"13000"
Pakistan:
"5600"
America:
"10000"
NewZealand:
"1000"
Steps
1) Create SAPUI5 application in Eclipse and
provide an appropriate name to it.
2) In
the charts folder create a fragmentchart.view.js and refer the code
sap.ui.jsview("charts.fragmentchart", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf charts.fragmentchart
*/
getControllerName : function() {
return "charts.fragmentchart";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf charts.fragmentchart
*/
createContent : function(oController) {
var dataset = new
sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1,
name : "country",
value : "{country}"
} ],
measures : [ {
name : 'population',
value : "{population}"
} ],
data : {
path : "/value"
}
});
var Bar = new
sap.viz.ui5.Bar({
width : "80%",
height : "400px",
title : {
visible : true,
text : 'Profit by
country'
},
dataLabel : {
visible : true
},
dataset : dataset,
});
return new sap.m.Page({
title : "Title",
content : [ Bar
]
});
}
});
3)In
the charts folder create a fragementchart.controller.js and refer the code.
sap.ui.controller("charts.fragmentchart", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf charts.fragmentchart
*/
onInit : function() {
var model1 = new
sap.ui.model.json.JSONModel();
model1.loadData("model/chartdetail.json");
sap.ui.getCore().setModel(model1);
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf charts.fragmentchart
*/
// onBeforeRendering: function() {
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf charts.fragmentchart
*/
// onAfterRendering: function() {
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf charts.fragmentchart
*/
// onExit: function() {
// }
});
4) Copy Paste
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">
</script>
<!-- only load the mobile lib
"sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("charts");
var app = new
sap.m.App({initialPage:"idfragmentchart1"});
var page =
sap.ui.view({id:"idfragmentchart1", viewName:"charts.fragmentchart",
type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody"
role="application">
<div id="content"></div>
</body>
</html>
5)
Maintain the Json file(chartdetail.json)
{
"value": [
{
"country": "India",
"population": "13000"
},
{
"country": "pakistan",
"population": "5600"
},
{
"country": "America",
"population": "10000"
},
{
"country": "New
Zealand",
"population": "1000"
}
]
}
5)
Execute index.html file
Chart type can be changed according to
need, just change the control to column,
line etc, just like we have used “bar” here.
var Bar = new sap.viz.ui5.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.
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.
3 comments
Click here for commentshi my requirement is that the measure is not numeric. how to calculate numeric value for it
Replyhi my requirement is that the measure is not numeric. how to calculate numeric value for it
ReplyCould you mention your requirement preciously? Or just ping me on sapui5tutors@gmail.com
ReplyConversionConversion EmoticonEmoticon