Skip to Content
avatar image
Former Member

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

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Mar 15, 2017 at 04:25 PM

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

    Add comment
    10|10000 characters needed 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??

  • Mar 18, 2017 at 12:30 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Apr 30 at 04:57 PM

    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

    Add comment
    10|10000 characters needed characters exceeded