Click here and follow my SAP UI5/FIORI snippets and information Page
I have made Pie Chart example in controller with JSON Data and below I have shown Application Structure,View Part,Controller Part,JSON Data and index part.Go through it and please let me know in case of any issue/doubt.
Application Structure
View Part
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="piechartdy.S1" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:viz="sap.viz.ui5.controls">
<Page title="Pie Chart Example" id="PageId">
<content>
</content>
</Page>
</core:View>
Controller Part
sap.ui.controller("piechartdy.S1", {
// Initialization of application
onInit:function(){
// Local JSON Data
var data=
[{
"Country": "Canada",
"population": 34789000
}, {
"Country": "China",
"population": 1339724852
}, {
"Country": "France",
"population": 65350000
}, {
"Country": "Russia",
"population": 817944333
}, {
"Country": "India",
"population": 1210193422
}, {
"Country": "Nepal",
"population": 31349
}];
//Calling method
this.pieChartbinding(data);
},
// Called method
pieChartbinding:function(chartData){
var json = sap.ui.model.json.JSONModel(chartData),
pageId = this.byId("PageId"),
flatDataSet=sap.viz.ui5.data.FlattenedDataset({
dimensions:[{
axis:1,
name:"country",
value:"{Country}"
}
],
measures:[{
name:"Population",
value:"{population}"
}],
data:{
path:"/"
}
});
var pie=sap.viz.ui5.Pie({
width:"100%",
height:"100%",
title:{
visible:true,
text:"Revenue By Country"
},
legend:{
title:{
visible:false,
}
},
dataset:flatDataSet
});
// Setting model to pie chart
pie.setModel(json);
// Adding pie chart to page
pageId.addContent(pie);
}
});
index.html
<!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("piechartdy");
var app = new sap.m.App({initialPage:"idS11"});
var page = sap.ui.view({id:"idS11", viewName:"piechartdy.S1", 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>
Result
No comments:
Post a Comment