Skip to Content
0
Jul 02, 2020 at 09:01 AM

SAPUI5 VizFrame Column Chart Binding through Odata Response

1309 Views Last edit Jul 02, 2020 at 09:44 AM 3 rev

Hello Sap Communities,

I got a Problem here did not know how to bind a column chart through oData response through web-ide

either from js or XML.

tried this code but did not work.

debugged and checked it shows data in JSON model data correctly. but data is not reflecting in view

also i have attached file of Odata response where I'm getting all the data.

XML Code:

<viz:VizFrame selectData="OnSelectColumn" id="idVizFrameColumn" legendVisible="true"
vizProperties="{ plotArea: { dataLabel: { visible:'true' } }}" uiConfig="{applicationSet:'fiori'}" vizType="column">
<viz:dataset>
<viz.data:FlattenedDataset data="{dataJSon}">
<viz.data:dimensions>
<viz.data:DimensionDefinition id="balid" name="Value" value="{Value}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition id="monthid" name="Month" value="{Month}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id="value2" uid="valueAxis" type="Measure" values="Value"/>
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Month"/>
</viz:feeds>
</viz:VizFrame>

on Success: JS Code

debugger;
var datas = {
data: oData.results
};
var oJsonModelOdata = new sap.ui.model.json.JSONModel();
oJsonModelOdata.setData(datas, "jsonodata");
var dataJSon = oJsonModelOdata.oData.data;
// sap.m.MessageToast.show("abc");
//var array = JSON.parse(oData.results);
// var JSondata = JSON.stringify(oData.results);
var Column_Chart = oThis.byId("idVizFrameColumn");
Column_Chart.setVizProperties({
legend: {
title: {
visible: false
}
},
plotArea: {
'colorPalette':
["green", "yellow", "orange", "red", "greenyellow", "#63d0e6"],
// 'colorPalette': ["red", "green", "orange", "blue"],
dataLabel: {
visible: true
}
},
title: {
visible: false
}
});
/*var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: 'Month',
value: "{Month}"
}],
measures: [{
name: 'Values',
value: "{Value}"
}],
data: {
path: "/jsonodata"
}
});*/
// Column_Chart.setDataset(oDataset);
Column_Chart.setModel(dataJSon);
Column_Chart.setVizType('column');

Attachments

console.png (35.0 kB)