<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Column Chart</title>
<script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- XML-based view definition -->
<script id="demoView" type="sapui5/xmlview">
<mvc:View height="100%" width="100%" controllerName="local.controller" xmlns:viz="sap.viz.ui5.controls" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<viz:VizFrame xmlns:viz="sap.viz.ui5.controls" id="idVizFrame"
uiConfig="{applicationSet:'fiori'}" vizType="Bar" width="100%">
</viz:VizFrame>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/viz/ui5/controls/common/feeds/FeedItem",
"sap/viz/ui5/data/FlattenedDataset"
], function(Controller, JSONModel, FeedItem, FlattenedDataset) {
"use strict";
return Controller.extend("local.controller", {
onInit: function(oEvent) {
this._setupChart();
},
_setupChart: function() {
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setModel(new JSONModel('./data.json'))
// Create Viz dataset to feed to the data to the graph
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');
oVizFrame.setVizProperties({
plotArea: {
dataPointStyle: {
"rules":
[
{
"dataContext": {"Days": "Current"},
"properties": {
"color":"sapUiChartPaletteSemanticGoodLight3"
},
"displayName": "Current"
},
{
"dataContext": {"Days": "1 to 30"},
"properties": {
"color":"sapUiChartPaletteSemanticCriticalLight3"
},
"displayName": "1 to 30"
},
{
"dataContext": {"Days": "31 to 60"},
"properties": {
"color":"sapUiChartPaletteSemanticCriticalLight1"
},
"displayName": "31 to 60"
},
{
"dataContext": {"Days": "61 to 90"},
"properties": {
"color":"sapUiChartPaletteSemanticBadLight3"
},
"displayName": "61 to 90"
}
,
{
"dataContext": {"Days": "91 to 120"},
"properties": {
"color":"sapUiChartPaletteSemanticBadLight2"
},
"displayName": "91 to 120"
}
,
{
"dataContext": {"Days": "121 to 150"},
"properties": {
"color":"sapUiChartPaletteSemanticBadLight1"
},
"displayName": "121 to 150"
}
,
{
"dataContext": {"Days": "151 to 180"},
"properties": {
"color":"sapUiChartPaletteSemanticBad"
},
"displayName": "151 to 180"
}
,
{
"dataContext": {"Days": "Above 180"},
"properties": {
"color":"sapUiChartPaletteSemanticBadDark1"
},
"displayName": "Above 180"
}
]
}
}
});
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": ["Amount"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": ["Days"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
}
});
});
// Instantiate the View and display
sap.ui.xmlview({
viewContent: jQuery('#demoView').html()
}).placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */
{
"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"
}]
}