Skip to Content
0

SAP UI5 Microchart with ODATA

Apr 16 at 10:25 AM

39

avatar image
Former Member

Hi All,

I am trying to use SAP UI5 Microchart in XML view with ODATA service. I am trying to bind the ODATA values with the Microchart dynamically, however nothing coming out as the Output. Below is the snippets of the code. Would be great help if someone can pinpoint the issue.

View1.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:mc="sap.suite.ui.microchart"
	xmlns:html="http://www.w3.org/1999/xhtml" controllerName="zdashzdemodash.controller.ProcurementView">
.........
.........
					<GenericTile header="Revenue Dynamics" frameType="OneByOne" press="press" class="sapUiTinyMargin">
						<tileContent>
							<TileContent footer="Column chart">
								<content>
									<mc:ColumnMicroChart id="mcChart1" data="{path: '/ProductList'}">
										<mc:columns>
											<mc:ColumnMicroChartData value="{Value}" color="{Color}"/>
										</mc:columns>
									</mc:ColumnMicroChart>
								</content>
							</TileContent>
						</tileContent>
					</GenericTile>




View1.controller.js

		onInit: function() {


			var oModel = new sap.ui.model.json.JSONModel();
			var data = {
				"ProductList": [{
					"Product": "Product A",
					"Value": "9875",
					"Color": "Good"
				}, {
					"Product": "Product B",
					"Value": "754",
					"Color": "Critical"
				}, {
					"Product": "Product C",
					"Value": "2657",
					"Color": "Neutral"
				}, {
					"Product": "Product D",
					"Value": "3457",
					"Color": "Neutral"
				}, {
					"Product": "Product E",
					"Value": "7653",
					"Color": "Good"
				}]
			};
			oModel.setData(data);
			var oMCChart = this.getView().byId("mcChart1");
			oMCChart.setModel(oModel);

}

Microchart works fine when we have fixed value & color code. but when trying to bind it with the ODATA nothing is coming out as output. Please help.

Thanks & Regards

Santanu

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

1 Answer

Best Answer
Nicholas Owen O’Malley Apr 16 at 10:41 AM
0

Hello Santanu Das

You have a error in the xml and the json.

change: data="{path: '/ProductList'}"
To: columns="{path: '/ProductList'}"

Change: "Value": "9875",
To (float): "Value": 9875, This worked for me <GenericTile header="Revenue Dynamics" frameType="OneByOne" press="press" class="sapUiTinyMargin"> <tileContent> <TileContent footer="Column chart"> <content> <mc:ColumnMicroChart id="mcChart1" columns="{path: '/ProductList'}"> <mc:columns> <mc:ColumnMicroChartData value="{Value}" color="{Color}"/> </mc:columns> </mc:ColumnMicroChart> </content> </TileContent> </tileContent> </GenericTile>

var data = { "ProductList": [{ "Product": "Product A", "Value": 9875, "Color": "Good" }, { "Product": "Product B", "Value": 754, "Color": "Critical" }, { "Product": "Product C", "Value": 2657, "Color": "Neutral" }, { "Product": "Product D", "Value": 3457, "Color": "Neutral" }, { "Product": "Product E", "Value": 7653, "Color": "Good" }] };
Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Nicholas,

Thanks a lot. I have made the changes as per your suggestion and it is working now for me as well.

Regards

Santanu

1