How to create Pie chart with datalabel and legends in sapui5

Pie chart example with dataLable legend and legendGroup



write cod in viz frame and bind all data through the controller. follow the sequence of my code it's easy!

view.xml


xmlns:viz="sap.viz.ui5.controls"


<viz:VizFrame id="idpiechart1" vizType="pie" width="100%" height="300px" selectData="pie1" >
</viz:VizFrame>


controller.js

write all code in oninit function. and if you want to open a fragment on the pie chart field click then refer pie1 function code. I use f1 fragment for these.


sap.ui.define([ 'jquery.sap.global', 'sap/m/GroupHeaderListItem',
'sap/ui/core/mvc/Controller', 'sap/ui/model/json/JSONModel',
'sap/viz/ui5/data/FlattenedDataset',

], function(jQuery, GroupHeaderListItem, Controller, JSONModel,
FlattenedDataset) {
"use strict";
var that;
var ListController = Controller.extend("zmmgatepass.controller.s1", {

onInit : function() {
that = this;

var oVizFrame1 = this.getView().byId("idpiechart1");
var oModel = new sap.ui.model.json.JSONModel();
var data = {
odata0 : [ {
exp : "Today Pending",
exp1 : "20"
}, {
exp : "Total Pending",
exp1 : "70"
}, {
exp : "Total Reporting",
exp1 : "40"
}, ]
};
oModel.setData(data);

var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
name : 'Report',
value : "{exp}"
} ],

measures : [ {
name : 'Pending',
value : '{exp1}'
} ],

data : {
path : "/odata0"
}
});
oVizFrame1.setDataset(oDataset);
oVizFrame1.setModel(oModel);
oVizFrame1.setVizProperties({
title : {
visible : false,
text : "Gate Reporting"
},
plotArea : {
colorPalette : d3.scale.category20().range(),
drawingEffect : "glossy"
},
dataLabel : {
positionPreference : true,
automaticInOutside : false,
outsideVisible : false,
position : 'inside',
visible : true,
type : 'value',
},
});
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "size",
'type' : "Measure",
'values' : [ "Pending" ]
}), feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "color",
'type' : "Dimension",
'values' : [ "Report" ]
});
oVizFrame1.addFeed(feedSize);
oVizFrame1.addFeed(feedColor);




pie1 : function(oEvent) {
debugger;

var oFilterFrag;
if (!that.oFilterFrag)
that.oFilterFrag = sap.ui.xmlfragment(
"gatepass.fragments.f1", that);
that.oFilterFrag.open();

},


Oncancel : function() {
debugger;
this.oFilterFrag.destroy();
this.oFilterFrag = undefined;
},


});

});

output :




why we write ( this.oFilterFrag = undefined; ) this line when we closing fragment?

Answer  >> we write these lines because we use many fragments in the same projects. when we open one fragment and it's close and after that, if I open the second fragment and it's showing the same fragment means its stores the dynamic ids of these fragments, therefore, its shows the same when we open. therefore we use these line first we destroy the fragment and after that, we set these fragments as undefined.

//suggest answer if u know more abt the same..!




Post a Comment

Previous Post Next Post