<!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="stacked_column" width="100%">
<viz:dataset>
<dataSet:FlattenedDataset xmlns:dataSet="sap.viz.ui5.data" data="{/}">
<dataSet:dimensions>
<dataSet:DimensionDefinition name="Year" value="{Year}">
</dataSet:DimensionDefinition>
<dataSet:DimensionDefinition name="City" value="{City}">
</dataSet:DimensionDefinition>
</dataSet:dimensions>
<dataSet:measures>
<dataSet:MeasureDefinition name="Profit" value="{Profit}">
</dataSet:MeasureDefinition>
</dataSet:measures>
</dataSet:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="valueAxis" type="Measure" values="Profit" />
<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="categoryAxis" type="Dimension" values="Year" />
<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="color" type="Dimension" values="City" />
</viz:feeds>
</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'))
oVizFrame.setVizProperties({
interaction: {
behaviorType: null
},
plotArea: {
dataLabel: {
visible: false
}
},
valueAxis: {
title: {
visible: true,
},
},
categoryAxis: {
title: {
visible: false,
text: 'Category text'
},
label: {
hideSubLevels: false
},
},
title: {
visible: true,
text: 'Project'
},
tooltip: {
visible: true,
}
});
}
});
});
// 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>
[{
"Year": 2001,
"City": "New York ",
"Profit": 249.08,
"Unit Price": 1117.60,
"Units Available": 13076,
"Cost": 139033.42,
"Revenue": 207685.42,
"Units Sold": 4437
}, {
"Year": 2001,
"City": "San Francisco ",
"Profit": 191.82,
"Unit Price": 175.78,
"Units Available": 2049,
"Cost": 17599.08,
"Revenue": 22288.10,
"Units Sold": 792
}, {
"Year": 2001,
"City": "Washington",
"Profit": 115.50,
"Unit Price": 1708.42,
"Units Available": 20130,
"Cost": 355556.57,
"Revenue": 496078.98,
"Units Sold": 7319
}, {
"Year": 2003,
"City": "New York ",
"Profit": 38.40,
"Unit Price": 811.06,
"Units Available": 12560,
"Cost": 95397.98,
"Revenue": 138848.39,
"Units Sold": 3490
}, {
"Year": 2003,
"City": "San Francisco ",
"Profit": 150.00,
"Unit Price": 780.17,
"Units Available": 7767,
"Cost": 107074.12,
"Revenue": 162087.28,
"Units Sold": 2619
}, {
"Year": 2003,
"City": "Washington",
"Profit": 382.50,
"Unit Price": 1197.07,
"Units Available": 18508,
"Cost": 210012.08,
"Revenue": 338402.77,
"Units Sold": 6085
}]