So I have a VizFrame Chart (stacked bar chart) set up that works in the sense that it shows what I want it to. However, I want to be able to drill down on the data by clicking on a bar but using data attribute not found in the charts Data. I hoped I could attach a custom data attribute to each bar, is this possible.
The chart is built of a JSONModel that contains the following fields:
The bar chart shows the performance of each Engineer and I wish to select an Engineer (by clicking) and from there move to a new page with more detail. To do this I need to include the Payroll number in the click event.
Note: I have already added the click event by adding "selectData" property to the vizFrame. I have also created a small function for handling it. It's the available data that is proving to be the problem. I can click and get the Engineer name because this included in the chart Data however Payroll is not.
Below is my XML for the chart.
... <l:flexContent> <v:Popover id="idPopOver_3Week"></v:Popover> <v:VizFrame selectData="vizFrameClick" id="idVizFrame_3Week" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='stacked_bar'> <v:dataset> <vd:FlattenedDataset data="{/d/results}"> <vd:dimensions> <vd:DimensionDefinition name="Engineer" value="{Engineer}" /> </vd:dimensions> <vd:measures> <vd:MeasureDefinition name="Performance" value="{Performance}"/> </vd:measures> </vd:FlattenedDataset> </v:dataset> <v:feeds> <vf:FeedItem uid="valueAxis" type="Measure" values="Performance"/> <vf:FeedItem uid="categoryAxis" type="Dimension" values="Engineer"/> </v:feeds> </v:VizFrame> </l:flexContent> ...
Below is the script from my controller
handleChecklistMIUpdate: function () { var me = '50226211'; Format.numericFormatter(ChartFormatter.getInstance()); var formatPattern = ChartFormatter.DefaultPattern; var sModel = new JSONModel(this.settingsModel); sModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay); this.getView().setModel(sModel); var oVizFrame2 = this.oVizFrame2 = this.getView().byId("idVizFrame_3Week"); oVizFrame2.setVizProperties({ title: {visible: true,text: 'P2P'}, plotArea: { dataLabel: {formatString:formatPattern.STANDARDPERCENT_MFD2,visible: true,showTotal: false}, dataPointStyle: { "rules":[{"dataContext": {"Performance": {"max": 0.75}},"properties": {"color":"#fa4616"},"displayName":"Fail"}], "others":{"properties": {"color": "green"},"displayName": "Pass"}}, dataPointSize: {min : 15, max : 15}, referenceLine: {line: {valueAxis: [{value: 0.8,visible: true,size: 1,type: "dotted",label: {visible: true}}]}} }, dimensions:[{name:'Payroll',label:{visible:false}}], valueAxis: {label: {formatString: formatPattern.STANDARDPERCENT_MFD2, text:'{Effective}'},title: {text: "Performance",visible: false}, scale: {fixedRange : true,minValue : "0",maxValue : "1"}}, categoryAxis: {title: {visible: false}}, legend:{visible: false}, interaction: { selectability: { mode: "EXCLUSIVE", axisLabelSelection: true, } } }); this.json2 = new sap.ui.model.json.JSONModel(); this.json2.loadData("model/data.xsodata/LJ_3W1W_P2P?$select=Payroll,Engineer,Effective,Performance&$filter=Supervisor_Payroll eq '" + me + "'&$format=json", null, false); //console.log(this.json2); oVizFrame2.setModel(this.json2); var oPopOver2 = this.getView().byId("idPopOver_3Week"); oPopOver2.connect(oVizFrame2.getVizUid()); oPopOver2.setFormatString(formatPattern.STANDARDPERCENT_MFD2); InitPageUtil.initPageSettings(this.getView(),'_3Week'); }
InitPageUtil
handleChecklistMIUpdate: function () { var me = '50226211'; Format.numericFormatter(ChartFormatter.getInstance()); var formatPattern = ChartFormatter.DefaultPattern; var sModel = new JSONModel(this.settingsModel); sModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay); this.getView().setModel(sModel); var oVizFrame2 = this.oVizFrame2 = this.getView().byId("idVizFrame_3Week"); oVizFrame2.setVizProperties({ title: {visible: true,text: 'P2P'}, plotArea: { dataLabel: {formatString:formatPattern.STANDARDPERCENT_MFD2,visible: true,showTotal: false}, dataPointStyle: { "rules":[{"dataContext": {"Performance": {"max": 0.75}},"properties": {"color":"#fa4616"},"displayName":"Fail"}], "others":{"properties": {"color": "green"},"displayName": "Pass"}}, dataPointSize: {min : 15, max : 15}, referenceLine: {line: {valueAxis: [{value: 0.8,visible: true,size: 1,type: "dotted",label: {visible: true}}]}} }, dimensions:[{name:'Payroll',label:{visible:false}}], valueAxis: {label: {formatString: formatPattern.STANDARDPERCENT_MFD2, text:'{Effective}'},title: {text: "Performance",visible: false}, scale: {fixedRange : true,minValue : "0",maxValue : "1"}}, categoryAxis: {title: {visible: false}}, legend:{visible: false}, interaction: { selectability: { mode: "EXCLUSIVE", axisLabelSelection: true, } } }); this.json2 = new sap.ui.model.json.JSONModel(); this.json2.loadData("model/data.xsodata/LJ_3W1W_P2P?$select=Payroll,Engineer,Effective,Performance&$filter=Supervisor_Payroll eq '" + me + "'&$format=json", null, false); //console.log(this.json2); oVizFrame2.setModel(this.json2); var oPopOver2 = this.getView().byId("idPopOver_3Week"); oPopOver2.connect(oVizFrame2.getVizUid()); oPopOver2.setFormatString(formatPattern.STANDARDPERCENT_MFD2); InitPageUtil.initPageSettings(this.getView(),'_3Week'); }
Click Event handler
vizFrameClick: function(oEvent){ console.log(oEvent); var clickedData = oEvent.getParameter("data")[0].data; alert(clickedData); }