cancel
Showing results for 
Search instead for 
Did you mean: 

SAP UI5 Microchart with ODATA

Former Member
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

former_member560141
Participant
0 Kudos

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" }] };
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

Answers (0)