VizFrame SelectData Returns Null

[evangrant1223]

Hello SAP Community,

Im generally new to UI5 and I am using version 1.71. 

I've been implementing a VizFrame Bullet Chart in order to show data about different accounts.

Im trying to get the category data I click on so I've implemented the "SelectData" functionality available to VizFrame. The problem is that whenever I try to print that information, Im getting null for the outputs as seen in the console.log(). 

What am I missing in order to retrieve the information in the VizFrame Chart and not just null?

XML Code:

<l:BlockLayoutRow>
					<l:BlockLayoutCell width="100">
						<commons:ChartContainer showZoom="false">
							<commons:ChartContainerContent title="Bar Chart">
								<commons:content>
									<viz:VizFrame id="oVizFrame" selectData="onClickEventVizFrame" busy="false" busyIndicatorDelay="1000" visible="true"
										uiConfig="{ 'applicationSet': 'fiori' }" vizType="bullet" legendVisible="false"
										vizProperties="{ valueAxis: { title: { visible: false, text: 'Vertical Info' } }, title: { visible: true, text: 'Accounts for Total Payroll' }, plotArea: { colorPalette: ['#00b482'] } }">
										<viz:dataset>
											<viz.data:FlattenedDataset data="{oVizFrame>/book}">
												<viz.data:dimensions>
													<viz.data:DimensionDefinition name="Item Category" value="{oVizFrame>ItemCategory}"/>
												</viz.data:dimensions>
												<viz.data:measures>
													<viz.data:MeasureDefinition name="Profit" value="{oVizFrame>Profit}"/>
													<viz.data:MeasureDefinition name="Target Profit" value="{oVizFrame>TargetProfit}"/>
												</viz.data:measures>
											</viz.data:FlattenedDataset>
										</viz:dataset>
										<viz:feeds>
											<viz.feeds:FeedItem id="actualItem" uid="actualValues" type="Measure" values="Profit"/>
											<viz.feeds:FeedItem id="categoryItem" uid="categoryAxis" type="Dimension" values="Item Category"/>
											<viz.feeds:FeedItem id="feedTargetValues" uid="targetValues" type="Measure" values="Target Profit"/>
										</viz:feeds>
									</viz:VizFrame>
								</commons:content>
							</commons:ChartContainerContent>
						</commons:ChartContainer>
					</l:BlockLayoutCell>
				</l:BlockLayoutRow>

Controller Code:

	return BaseController.extend("thd.com.bw.YBW_UI_PL_TOOLBOX.controller.Payroll", {

		formatter: formatter,

		/* =========================================================== */
		/* lifecycle methods                                           */
		/* =========================================================== */

		onInit: function () {

			// Model used to manipulate control states. The chosen values make sure,
			// detail page is busy indication immediately so there is no break in
			// between the busy indication for loading the view's meta data
			var oViewModel = new JSONModel({
				busy: false,
				delay: 0
			});

			this.getRouter().getRoute("payroll").attachPatternMatched(this._onPayrollMatched, this);
			this.setModel(oViewModel, "payrollView");
			this.getOwnerComponent().getModel().metadataLoaded().then(this._onMetadataLoaded.bind(this));
			this._oODataModel = this.getOwnerComponent().getModel();
			this._oResourceBundle = this.getResourceBundle();

			this.onReadTableData();
			this.onReadVizFrameData();
			this.onClickEventVizFrame();

		},

		onReadVizFrameData: function () {
			var oData = {
				book: [{
					"City": "New York",
					"ItemCategory": "Management Payroll",
					"Profit": 10500,
					"TargetProfit": -1000
				}, {
					"City": "Chicago",
					"ItemCategory": "Workers Comp",
					"Profit": -140874.81,
					"TargetProfit": -170000
				}, {
					"City": "Boston",
					"ItemCategory": "Hourly Payroll",
					"Profit": -56994.34,
					"TargetProfit": -75000
				}, {
					"City": "Dallas",
					"ItemCategory": "Total Payroll",
					"Profit": -273793.31,
					"TargetProfit": -280000
				}]
			};

			var oVizFrameModel = new JSONModel();

			oVizFrameModel.setData(oData);

			console.log(oVizFrameModel);

			this.setModel(oVizFrameModel, "oVizFrame");

		},
		
		onClickEventVizFrame: function (oControlEvent) {

			//var clickedData = oControlEvent.getParameter('data');

			console.log(oControlEvent);

			

		},

Screenshot of Output:

Thank you

[junwu]

why you call it at line 27?

this.onClickEventVizFrame();

[evangrant1223]

My understanding was that it would be instantiated so that whenever the functionality is triggered it would run. Should I be leaving that line out?