Custom Data attribute on VizFrame Chart

[Former Member]

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:

• Payroll
• Engineer Name
• Performance

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);
} 

[Former Member · Accepted solution]

I answered this myself.

Click event handler (Called from the the viz frames "selectData" property.)

vizFrameClick: function(oEvent){		
	// Get the relative item number of the selected data point in the chart
	var i = oEvent.getParameter("data")[0].data['_context_row_number'];
		
	// Get the original data set that was used to build the chart. This can contain additional fields not found in the chart data
	var oResult = oEvent.oSource.oModels.undefined.oData.results[i];
	// From the oResult (which is the original data model) get the the Payroll Number
	var oPayroll = oResult.Payroll;
				
	this.getOwnerComponent().getRouter().navTo('em_202_Long_Job_Exceptions', {payroll: oPayrol
}