Skip to Content
avatar image
Former Member

SAP UI5 Microchart with ODATA

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Apr 16 at 10:41 AM

    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" }] };
    Add comment
    10|10000 characters needed 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