How to get multiple dimensions in Bar chart - SAPUI5 VizFrame - charts

Question

I am new to SAPUI5, I am trying to get multiple dimensions in Bar chart using VizFrame. I need chart to be displayed like the below image:
Please check my code.

Answer 1

I think you are looking for Bar graph to show the Amount vs Days.
Here is the working link.
I have updated _setupChart methods as below.
_setupChart: function() {
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setModel(new JSONModel('./data.json'));
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Days",
value: "{Days}"
}],
measures: [{
name: "Amount",
value: "{Amount}"
}],
data: {
path: "/dueDays"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setVizType('bar');
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": ["Amount"]
});
var feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": ["Days"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
}
And also i have updated the data json as below
{
"dueDays": [{
"Days": "Current",
"Amount": "44334.00"
}, {
"Days": "1 to 30",
"Amount": "53454.00"
}, {
"Days": "31 to 60",
"Amount": "34443.65"
}, {
"Days": "61 to 90",
"Amount": "65554.43"
}, {
"Days": "91 to 120",
"Amount": "43524.00"
},{
"Days": "121 to 150",
"Amount": "54554.00"
}, {
"Days": "151 to 180",
"Amount": "43324.00"
}, {
"Days": "Above 180",
"Amount": "54355"
}]
}

Answer 2

Thanks for your work & time !! .. I have made it using setVizProperties > plotArea > dataPointStyle > rules .. This is the updated link.