Skip to Content
0

sapui5 viz.ui5.controls.popover binding issue in pie chart

Mar 15, 2017 at 11:44 AM

368

avatar image

Hi all,

Iv created a pie chart showing yearly dept. wise data and on click of pie chart in the popover control a table is created to show data for every quarter for the selected context_row_number.

here is the code

var dept = { "Company" :[

{Dept:"Sales", Q1: "1000", Q2: "1200" , Q3: "1400",Q4: "1600", year: "4200", headcount: "70", hq:"New Delhi"},

{Dept:"Accounts", Q1: "1100", Q2: "1150", Q3: "1300",Q4: "1350", year: "3500", headcount:"30", hq:"Mumbai"},

{Dept:"IT", Q1: "900", Q2: "500", Q3: "700", Q4: "1000", year: "2800", headcount:"20", hq:"Chennai"} ] }

touch: function(evt){
	debugger;
	var data = evt.getParameters("data");
	var contextrow = data.data["0"].data._context_row_number;
	console.log(contextrow);
	var popover = new sap.viz.ui5.controls.Popover({
	customDataControl:function(){
		var table = new sap.m.Table({
		headerText: "Quarterly",
		growing: true,
		columns:[
 		    new sap.m.Column({
			header:[						                  new sap.m.Text({text:"Q1"})
			]
	   	    }),
		    new sap.m.Column({
			header:[
			new sap.m.Text({text:"Q2"})
			]
		}),
	         new sap.m.Column({
		     header:[
			new sap.m.Text({text:"Q3"})
			]
		}),
		new sap.m.Column({
			header:[
				new sap.m.Text({text:"Q4"})
		        	]
			})
		]
		});

*****Template creation****

		var collist = new sap.m.ColumnListItem({
			cells:[
	 //new sap.m.Text({text:"{/"+contextrow+"/Q1}"}),
	// new sap.m.Text({text:"{/"+contextrow+"/Q2}"}),
      //new sap.m.Text({text:"{/"+contextrow+"/Q3}"}),
// 		new sap.m.Text({text:"{/"+contextrow+"/Q4}"})
   
new sap.m.Text({text:"{/"+contextrow+"/Q1}"}),
new sap.m.Text({text:"{/"+contextrow+"/Q2}"}),
new sap.m.Text({text:"{/"+contextrow+"/Q3}"}),
new sap.m.Text({text:"{/"+contextrow+"/Q4}"})
					
						]
				});
	var model = sap.ui.getCore().getModel("modelid");
	console.log(model)
	var z = model.getProperty("/Company");
	
	 var jmodel = new sap.ui.model.json.JSONModel(z);
	// sap.ui.getCore().setModel(jmodel);
	console.log(jmodel);
	 table.setModel(jmodel);
	 table.bindItems("/",collist);
	return table;
		}	
			});
	var pie = sap.ui.getCore().byId("pieid");
	popover.connect(pie.getVizUid());


			}

attached is the result when pie is clicked. It is showing the Quarterly data of the clicked context_row_number in three rows instead of just one.

Tried other ways as well but facing an issue with the binding.

Best regards

Archit Wahi

pie.png (23.5 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Srikanth KV Mar 15, 2017 at 04:25 PM
0

in your code there is no filter applied to table binding....you are just showing all the records....

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks Srikanth, can you plz elaborate on the filter point a bit and on its implementation.

I dont think its required as the binding is getting resolved to a particular object number in the company data array say either of Sales, Account, IT via context_row_number. Thats what the binding of the template is resolved to. Using the clicked context row should only display a single row showing the 4 quarters of that particular object in array (Sales or acc or IT) and not the 3 its showing. Right??

0
Wouter Lemaire
Mar 18, 2017 at 12:30 AM
0

You're binding all lines to the popover:

var z= model.getProperty("/Company");
	
	 var jmodel =newsap.ui.model.json.JSONModel(z);//sap.ui.getCore().setModel(jmodel);
	console.log(jmodel);table.setModel(jmodel);

You should only take the selected line and bind that.

Kr,

Wouter

Show 4 Share
10 |10000 characters needed characters left characters exceeded

Thanks Wouter, i tried this after your advice. Hope this is what you mean.

table.setModel(jmodel);

table.bindItems("/"+contextrow, collist); and i am getting this. 8 rows as there are 8 fields in every json data obj i have.

If i do this

var z = model.getProperty("/Company/"+contextrow);

var jmodel = new sap.ui.model.json.JSONModel(z);

table.setModel(jmodel);

table.bindItems("/",collist); then this is the result. Please advice.

Many Thanks

Archit Wahi

bind-pie.png (25.9 kB)
pie-bind2.png (28.8 kB)
0

That's indeed what I meant:

var z = model.getProperty("/Company/"+contextrow);

var jmodel = new sap.ui.model.json.JSONModel(z);

table.setModel(jmodel);

table.bindItems("/",collist);

Could you put your example in jsbin? What values do you have in "z" ?

Kr,

Wouter

0

Hi Wouter,

Apologies for the delayed reply.

Here is scn of data in z

Here we are trying to get "/Company/Contextrow" i.e 1st obj in model array that is the sales dept.

The get property gets all prop of the 1st object as req but when we bind its creating 8 blank rows (the obj also contains 8 proerties) instead of creating 1 row where it binds the Q1,2,3,4 data to the table in popover using the collist template in code above.

Many Thanks

Archit Wahi

pie-binding.png (103.0 kB)
0

Could you try to put this in "z":

var z = model.getData().Company;

Could you also put an example in JSBIN ?

Kr,

Wouter

0