Monday, 27 November 2017

View Binding of Pie Chart With JSON

Click here and follow my SAP UI5/FIORI snippets and information Page
I have made Pie Chart example in view with JSON Data and below I have shown Application Structure,View Part,Controller Part and JSON Data.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="piechartex.S1" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:viz="sap.viz.ui5.controls" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data" xmlns:vtypes="sap.viz.ui5.types">
<Page title="Pie Chart Example">
<content>
<viz:VizFrame uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='pie' id="pieid">
<viz:dataset>
<viz.data:FlattenedDataset data="{/}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Country"
value="{Country}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="population"
value="{population}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure"
values="population" />
<viz.feeds:FeedItem uid="color" type="Dimension"
values="Country" />
</viz:feeds>
</viz:VizFrame>
</content>
</Page>
</core:View>

Controller Part

sap.ui.controller("piechartex.S1", {

// Initialization of application
onInit:function(){
oChart=this.byId("pieid");
oChart.setVizProperties({
legend:{
title:{visible:false}
},
title: {
text: "Population By Country"
}
});
var json=new sap.ui.model.json.JSONModel();
// Loading data to model
json.loadData("model/data.json",null,false);
// Setting model to current view
this.getView().setModel(json);
                      OR
// Setting model to pie chart
oChart.setModel(json);
}
});

JSON 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
      }]

Result








No comments:

Post a Comment