Skip to Content
0

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

Mar 15, 2017 at 11:44 AM

630

avatar image
Former Member

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.

3 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
Former Member

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
Former Member

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
Former Member

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
avatar image
Former Member Apr 30 at 04:57 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded