Skip to Content

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

Mar 30, 2017 at 08:03 AM


avatar image

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?

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Seungchul Yang Mar 31, 2017 at 02:17 AM

Please share your code

Show 2 Share
10 |10000 characters needed characters left characters exceeded

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""" controllerName="myapp.controller.Worklist">
<semantic:FullscreenPage id="page" semanticRuleSet="Optimized" title="Business Partner List">
	<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 } }"
			growing="true" growingScrollToLoad="true"
				<Title id="tableHeader" text="Business Partners"/>
				<SearchField id="searchField" 
				<Column id="nameColumn">
					<Text text="Company Name" id="nameColumnTitle"/>
				<Column id="CountryColumn">
					<Text text="Country" id="countryColumnTitle"/>
				<ColumnListItem press="onPress">
					<ObjectIdentifier title="{CompanyName}"/>
					<ObjectIdentifier title="{Address/Country}"/>
	<Panel class="sapUiResponsiveMargin" width="auto" expandable="{device>/system/phone}">
	<viz:VizFrame id="idVizFrame" 
				  height='100%' width="50%" vizType='bar'>
			< data="{/BusinessPartnerSet}">
			< name="Company Name" value="{CompanyName}"/>
			< name="Role" value="{BusinessPartnerRole}"/>
		<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Role"/>
		<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Company Name"/>
	<semantic:SendEmailAction id="shareEmail" press="onShareEmailPress"/>

Code for Controller

], 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,
				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() {

		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

		 * Event handler for navigating back.
		 * We navigate back in the browser historz
		 * @public
		onNavBack: function() {

		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.
			} else {
				var oTableSearchState = [];
				var sQuery = oEvent.getParameter("query");

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


		 * Event handler for refresh event. Keeps filter, sort
		 * and group settings and refreshes the list binding.
		 * @public
		onRefresh: function() {

		/* =========================================================== */
		/* 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"));