How to bind a viz frame (bar chart) to xml output?

[former_member351910]

Hello Experts,

I am trying to create a simple bar chart using viz frames in SAPUI5 where I am binding the XML Output of a service to the chart. I am referring the example given in the UI5 Explored link. But the output shows 'No Data'.

Does any body have a sample app regarding this?

[former_member601119]

hello Badhan,

try t please,

var oModel1 = new sap.ui.model.xml.XMLModel();


			var sampleDataxml = oModel1.loadData("url");

then the data binding :
data: {path : "/Rowset/Row", factory : function() { }  }

[former_member232384]

Please share your code

[former_member351910]

I am displaying a list at the a simple column chart below it. The List is displayed properly but the graph says 'No Data' and the SAPUI5 Diagnostics tools shows data binding as invalid. Following is the code for view and controller respectively.

Code for xml view.

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:viz="sap.viz.ui5.controls"
	xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data" controllerName="myapp.controller.Worklist">
<semantic:FullscreenPage id="page" semanticRuleSet="Optimized" title="Business Partner List">
<semantic:content>
	<Panel class="sapUiResponsiveMargin" width="auto" expandable="{device>/system/phone}">
		<Table id="table" width="50%" class="sapUiResponsiveMargin"
			items="{ path: '/BusinessPartnerSet', 
					 sorter: { path: 'Address/Country', 
							   descending: false, 
							   group: true } }"
			noDataText="{worklistView>/tableNoDataText}" 
			busyIndicatorDelay="{worklistView>/tableBusyDelay}" 
			growing="true" growingScrollToLoad="true"
			updateFinished="onUpdateFinished">
			<headerToolbar>
			<Toolbar>
				<Title id="tableHeader" text="Business Partners"/>
				<ToolbarSpacer/>
				<SearchField id="searchField" 
							 tooltip="{i18n>worklistSearchTooltip}" 
							 search="onSearch" 
							 width="auto"></SearchField>
			</Toolbar>
			</headerToolbar>
			<columns>
				<Column id="nameColumn">
					<Text text="Company Name" id="nameColumnTitle"/>
				</Column>
				<Column id="CountryColumn">
					<Text text="Country" id="countryColumnTitle"/>
				</Column>
			</columns>
			<items>
				<ColumnListItem press="onPress">
				<cells>
					<ObjectIdentifier title="{CompanyName}"/>
				</cells>
				<cells>
					<ObjectIdentifier title="{Address/Country}"/>
				</cells>
				</ColumnListItem>
			</items>
		</Table>
	</Panel>
	<Panel class="sapUiResponsiveMargin" width="auto" expandable="{device>/system/phone}">
	<viz:VizFrame id="idVizFrame" 
				  uiConfig="{applicationSet:'fiori'}" 
				  height='100%' width="50%" vizType='bar'>
		<viz:dataset>
			<viz.data:FlattenedDataset data="{/BusinessPartnerSet}">
			<viz.data:dimensions>
			<viz.data:DimensionDefinition name="Company Name" value="{CompanyName}"/>
			</viz.data:dimensions>
			<viz.data:measures>
			<viz.data:MeasureDefinition name="Role" value="{BusinessPartnerRole}"/>
			</viz.data:measures>
			</viz.data:FlattenedDataset>
		</viz:dataset>
		<viz:feeds>
		<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Role"/>
		<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Company Name"/>
		</viz:feeds>
	</viz:VizFrame>
	</Panel>
</semantic:content>
<semantic:sendEmailAction>
	<semantic:SendEmailAction id="shareEmail" press="onShareEmailPress"/>
</semantic:sendEmailAction>
</semantic:FullscreenPage>
</mvc:View>

[former_member351910]

Code for Controller

sap.ui.define([
	"myapp/controller/BaseController",
	"sap/ui/model/json/JSONModel",
	"myapp/model/formatter",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function(BaseController, JSONModel, formatter, Filter, FilterOperator) {
	"use strict";


	return BaseController.extend("myapp.controller.Worklist", {


		formatter: formatter,


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


		/**
		 * Called when the worklist controller is instantiated.
		 * @public
		 */
		onInit: function() {
			
			var oViewModel,
				iOriginalBusyDelay,
				oTable = this.byId("table");


			// Put down worklist table's original value for busy indicator delay,
			// so it can be restored later on. Busy handling on the table is
			// taken care of by the table itself.
			iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
			this._oTable = oTable;
			// keeps the search state
			this._oTableSearchState = [];


			// Model used to manipulate control states
			oViewModel = new JSONModel({
				worklistTableTitle: this.getResourceBundle().getText("worklistTableTitle"),
				saveAsTileTitle: this.getResourceBundle().getText("saveAsTileTitle", this.getResourceBundle().getText("worklistViewTitle")),
				shareOnJamTitle: this.getResourceBundle().getText("worklistTitle"),
				shareSendEmailSubject: this.getResourceBundle().getText("shareSendEmailWorklistSubject"),
				shareSendEmailMessage: this.getResourceBundle().getText("shareSendEmailWorklistMessage", [location.href]),
				tableNoDataText: this.getResourceBundle().getText("tableNoDataText"),
				tableBusyDelay: 0
			});
			this.setModel(oViewModel, "worklistView");
			// Make sure, busy indication is showing immediately so there is no
			// break after the busy indication for loading the view's meta data is
			// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
			oTable.attachEventOnce("updateFinished", function() {
				// Restore original busy indicator delay for worklist's table
			oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
			});


		},


		/* =========================================================== */
		/* event handlers                                              */
		/* =========================================================== */


		/**
		 * Triggered by the table's 'updateFinished' event: after new table
		 * data is available, this handler method updates the table counter.
		 * This should only happen if the update was successful, which is
		 * why this handler is attached to 'updateFinished' and not to the
		 * table's list binding's 'dataReceived' method.
		 * @param {sap.ui.base.Event} oEvent the update finished event
		 * @public
		 */


		/* onGraph: function() {
			this.getRouter().navTo("graph");
		},*/


		onUpdateFinished: function(oEvent) {
			// update the worklist's object counter after the table update
			var sTitle,
				oTable = oEvent.getSource(),
				iTotalItems = oEvent.getParameter("total");
			// only update the counter if the length is final and
			// the table is not empty
			if (iTotalItems && oTable.getBinding("items").isLengthFinal()) {
				sTitle = this.getResourceBundle().getText("worklistTableTitleCount", [iTotalItems]);
			} else {
				sTitle = this.getResourceBundle().getText("worklistTableTitle");
			}
			this.getModel("worklistView").setProperty("/worklistTableTitle", sTitle);
		},


		/**
		 * Event handler when a table item gets pressed
		 * @param {sap.ui.base.Event} oEvent the table selectionChange event
		 * @public
		 */
		onPress: function(oEvent) {
			// The source is the list item that got pressed
			this._showObject(oEvent.getSource());
		},


		/**
		 * Event handler for navigating back.
		 * We navigate back in the browser historz
		 * @public
		 */
		onNavBack: function() {
			history.go(-1);
		},


		onSearch: function(oEvent) {
			if (oEvent.getParameters().refreshButtonPressed) {
				// Search field's 'refresh' button has been pressed.
				// This is visible if you select any master list item.
				// In this case no new search is triggered, we only
				// refresh the list binding.
				this.onRefresh();
			} else {
				var oTableSearchState = [];
				var sQuery = oEvent.getParameter("query");


				if (sQuery && sQuery.length > 0) {
					oTableSearchState = [new Filter("CompanyName", FilterOperator.Contains, sQuery)];
				}
				this._applySearch(oTableSearchState);
			}


		},


		/**
		 * Event handler for refresh event. Keeps filter, sort
		 * and group settings and refreshes the list binding.
		 * @public
		 */
		onRefresh: function() {
			this._oTable.getBinding("items").refresh();
		},


		/* =========================================================== */
		/* internal methods                                            */
		/* =========================================================== */


		/**
		 * Shows the selected item on the object page
		 * On phones a additional history entry is created
		 * @param {sap.m.ObjectListItem} oItem selected Item
		 * @private
		 */
		_showObject: function(oItem) {
			this.getRouter().navTo("object", {
				objectId: oItem.getBindingContext().getProperty("BusinessPartnerID")
			});
		},


		/**
		 * Internal helper method to apply both filter and search state together on the list binding
		 * @param {object} oTableSearchState an array of filters for the search
		 * @private
		 */
		_applySearch: function(oTableSearchState) {
			var oViewModel = this.getModel("worklistView");
			this._oTable.getBinding("items").filter(oTableSearchState, "Application");
			// changes the noDataText of the list in case there are no filter results
			if (oTableSearchState.length !== 0) {
				oViewModel.setProperty("/tableNoDataText", this.getResourceBundle().getText("worklistNoDataWithSearchText"));
			}
		}


	});
});