<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.viz"
data-sap-ui-resourceroots='{"view": "./"}'
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script>
// Best practice would be to set this stuff up in an Component.js
// but let's not over-complicate stuff for demonstration purposes
var oModel = new sap.ui.model.json.JSONModel();
// Load JSON in model
oModel.loadData("salary.json");
sap.ui.getCore().setModel(oModel);
sap.ui.localResources("view"); //get access to view folder
var app = new sap.m.App({
initialPage: "idMain"
});
var page = sap.ui.view({
id: "idMain",
viewName: "view.Main",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
# Stacked Bar chart
Start axis from specific value
{
"data": [
{ "type": "Real", "category": "cat_03", "amount": "50000" },
{ "type": "Target", "category": "cat_03", "amount": "55000" },
{ "type": "Real", "category": "cat_02", "amount": "45000" },
{ "type": "Target", "category": "cat_02", "amount": "45000" },
{ "type": "Real", "category": "cat_01", "amount": "40000" },
{ "type": "Target", "category": "cat_01", "amount": "35000" }
]
}
sap.ui.controller("view.Main", {
onInit: function () {
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setVizProperties({
title: {
visible: true,
text: "Salary"
},
plotArea: {
dataLabel: {
visible: true
}
},
legendGroup: {
layout: {
position: "bottom" //keep legend to bottom of the chart
}
},
legend: {
label: {
style: {
color: "red" //changes the color of legend label(eg: red or hexadecimal colors)
}
}
}
});
//set scales
oVizFrame.setVizScales([
{
feed: "valueAxis",
min: "35000"
}
], {replace: true});
},
onBeforeRendering: function() {},
onAfterRendering: function() {},
onExit: function() {}
});
<sap.ui.core.mvc:View controllerName="view.Main"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data"
xmlns:sap.ui.core.mvc="sap.ui.core.mvc" >
<Page title="Stacked Bar chart - start axis from specific value">
<content>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" height="50%" width="100%"
vizType='stacked_bar'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/data}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Salary" value="{type}" />
<viz.data:DimensionDefinition name="Category" value="{category}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Amount" value="{amount}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Amount"/>
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Salary"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="Category"/>
</viz:feeds>
</viz:VizFrame>
</content>
</Page>
</sap.ui.core.mvc:View>