on 04-16-2018 11:25 AM
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
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"
}]
};
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
User | Count |
---|---|
81 | |
25 | |
12 | |
9 | |
7 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.