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

[archit_wahi]

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

[former_member192283]

Archit,

I am also implementing the custom popup to display the relevant information. Can you able to share the code using JS Bin or any other tool for me to go through the code.

Where this Touch Event is called or where this touch event is binded?

Thanks

[WouterLemaire]

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

[archit_wahi]

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

[WouterLemaire]

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

[archit_wahi]

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

[WouterLemaire]

Could you try to put this in "z":

var z = model.getData().Company;

Could you also put an example in JSBIN ?

Kr,

Wouter

[former_member365727]

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

[archit_wahi]

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??