<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Bar</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.viz.sample.Bar": "./", "sap.ui.demo.mock": "mockdata"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Bar",
enableScrolling : false,
content: [ new sap.ui.core.ComponentContainer({
height : "100%", name : "sap.viz.sample.Bar"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Complex Bar Chart example
based on: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.viz.sample.Bar/preview
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("sap.viz.sample.Bar.Component", {
metadata : {
rootView : "sap.viz.sample.Bar.Bar",
includes : ["../../css/exploredStyle.css"],
dependencies : {
libs : [
"sap.viz",
"sap.m"
]
},
config : {
sample : {
stretch : true,
files : [
"Bar.view.xml",
"Bar.controller.js",
"ControllerOverall.js"
]
}
}
}
});
return Component;
});
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',
'./ControllerOverall'
], function(Controller, JSONModel, FeedItem, FlattenedDataset, ControllerOverall) {
"use strict";
var BarController = Controller.extend("sap.viz.sample.Bar.Bar", {
onInit: function(oEvent) {
var oVizFrame = this.getView().byId("idVizFrameBar");
var oFixFlex = this.getView().byId("idFixFlex");
ControllerOverall.customFormat(); // set customized format
ControllerOverall.loadLibrary(oVizFrame, oFixFlex); // load "sap.suite.ui.commons"
var dataPath = "";
oVizFrame.setVizType('bar');
oVizFrame.setUiConfig({
"applicationSet": "fiori"
});
var oPopOver = this.getView().byId("idPopOver");
oPopOver.connect(oVizFrame.getVizUid());
var oModel = new JSONModel(dataPath + "medium.json");
var oModelS = new JSONModel(dataPath + "/small.json");
var oModelL = new JSONModel(dataPath + "/large.json");
var oDataset = new FlattenedDataset({
dimensions: [{
name: "Store Name",
value: "{Store Name}"
}],
measures: [{
name: 'Revenue',
value: '{Revenue}'
}, {
name: 'Cost',
value: '{Cost}'
}],
data: {
path: "/milk"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedValueAxis = new FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Revenue"]
}),
feedCategoryAxis = new FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Store Name"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
oVizFrame.setVizProperties({
general: {
layout: {
padding: 0.04
}
},
valueAxis: {
label: {
formatString: 'axisFormat'
},
title: {
visible: false
}
},
categoryAxis: {
title: {
visible: false
}
},
plotArea: {
dataLabel: {
visible: true,
formatString: 'datalabelFormat',
style: {
color: null
}
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: false,
text: 'Revenue by City and Store Name'
}
});
var oPanel1 = this.getView().byId("PN-1");
var oContainer = this.getView().byId("idContainer");
var oRadio1 = this.getView().byId("RB1-1");
var oRadio2 = this.getView().byId("RB1-2");
var oRadio3 = this.getView().byId("RB1-3");
var oRadio4 = this.getView().byId("RB2-1");
var oRadio5 = this.getView().byId("RB2-2");
var oSwitch1 = this.getView().byId("SW-1");
var oSwitch2 = this.getView().byId("SW-2");
var oBox1 = this.getView().byId("BX-1");
var oBox2 = this.getView().byId("BX-2");
var oBox3 = this.getView().byId("BX-3");
var oHBox = this.getView().byId("HB-1");
ControllerOverall.adjustStyle(oRadio1,oRadio2,oRadio3,oRadio4,oRadio5,
null,null,null,null,null,oBox1,oBox2,oBox3,null,null,oHBox); // adjust style class to RTL mode
ControllerOverall.setExpanding(oPanel1); // set automatic expanding of setting panel
// buttons control
oRadio1.attachSelect(function() {
oVizFrame.setModel(oModelS);
});
oRadio2.attachSelect(function() {
oVizFrame.setModel(oModel);
});
oRadio3.attachSelect(function() {
oVizFrame.setModel(oModelL);
});
oRadio4.attachSelect(function() {
oVizFrame.removeFeed(feedValueAxis);
feedValueAxis = new FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Revenue"]
});
oVizFrame.addFeed(feedValueAxis);
});
oRadio5.attachSelect(function() {
oVizFrame.removeFeed(feedValueAxis);
feedValueAxis = new FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Revenue", "Cost"]
});
oVizFrame.addFeed(feedValueAxis);
});
oSwitch1.attachChange(function() {
if(this.getState()) {
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
visible: true
}
}
});
}
if(!this.getState()) {
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
visible: false
}
}
});
}
});
oSwitch2.attachChange(function() {
if(this.getState()) {
oVizFrame.setVizProperties({
valueAxis: {
title: {
visible: true
}
},
categoryAxis: {
title: {
visible: true
}
}
});
}
if(!this.getState()) {
oVizFrame.setVizProperties({
valueAxis: {
title: {
visible: false
}
},
categoryAxis: {
title: {
visible: false
}
}
});
}
});
}
});
return BarController;
});
<mvc:View height="100%" width="100%"
controllerName="sap.viz.sample.Bar.Bar"
xmlns:l="sap.ui.layout"
xmlns:viz="sap.viz.ui5.controls"
xmlns:mvc="sap.ui.core.mvc"
xmlns:suite="sap.suite.ui.commons"
xmlns="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml">
<l:FixFlex id="idFixFlex" class="fixFlexFixedSize" minFlexSize="250">
<!--Below is the setting panel-->
<l:fixContent>
<Panel id="PN-1" class="panelStyle" expandable="true" expanded="true" headerText="Settings">
<ScrollContainer
class="scrollStyle"
height="100%"
width="100%"
horizontal="true"
vertical="false"
focusable="false">
<HBox id="HB" class="settingBottomStyle" width="auto">
<HBox id="HB-1" class="HBoxStyle">
<VBox id="BX-1" class="boxPosition" width="90px">
<Label text="Dataset" class="sapUiSmallMarginTop labelStyle" design="Bold"/>
<RadioButton class="buttonPosition" id="RB1-1" groupName="bar-group1" text="Small"/>
<RadioButton class="buttonPosition" id="RB1-2" groupName="bar-group1" text="Medium" selected="true"/>
<RadioButton class="buttonPosition bottomButtonStyle" id="RB1-3" groupName="bar-group1" text="Large"/>
</VBox>
<VBox id="BX-2" class="boxPosition" width="90px">
<Label text="Series" class="sapUiSmallMarginTop labelStyle" design="Bold"/>
<RadioButton class="buttonPosition" id="RB2-1" groupName="bar-group2" text="1 Series" selected="true"/>
<RadioButton class="buttonPosition bottomButtonStyle" id="RB2-2" groupName="bar-group2" text="2 Series"/>
</VBox>
<VBox id="BX-3" class="boxPosition" width="90px">
<Label text="Value Label" class="sapUiSmallMarginTop labelStyle" design="Bold"/>
<Switch id="SW-1" class="switchPosition" state="true" customTextOn="ON" customTextOff="OFF"></Switch>
</VBox>
<VBox width="90px">
<Label text="Axis Title" class="sapUiSmallMarginTop labelStyle" design="Bold"/>
<Switch id="SW-2" class="switchPosition" state="false" customTextOn="ON" customTextOff="OFF"></Switch>
</VBox>
</HBox>
</HBox>
</ScrollContainer>
</Panel>
</l:fixContent>
<!--Above is the setting panel-->
<!--Below is the chart area-->
<l:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" height="100%" width="100%"></viz:VizFrame>
</l:flexContent>
<!--Above is the chart area-->
</l:FixFlex>
</mvc:View>
sap.ui.define([], function() {
return {
customFormat: function() {
// use ui5 formatter for chart
// 'axisFormat' and 'datalabelFormat' formatstring in properties is processed by ui5 formatter
var customFormatter = {
format : function(value, pattern) {
var formattedString = value;
if(pattern == "datalabelFormat") {
if(value > 1) {
var datalabelFormat = sap.ui.core.format.FileSizeFormat.getInstance();
datalabelFormat.oNumberFormat.oFormatOptions.maxFractionDigits = 2;
formattedString = datalabelFormat.format(value);
formattedString = formattedString.substring(0,formattedString.length-1);
}
else if(value < 1) {
var datalabelFormatPercent = sap.ui.core.format.NumberFormat.getPercentInstance();
datalabelFormatPercent.oFormatOptions.maxFractionDigits = 2;
formattedString = datalabelFormatPercent.format(value);
}
} else if(pattern == "axisFormat") {
if(value > 1) {
var axisFormat = sap.ui.core.format.FileSizeFormat.getInstance();
axisFormat.oNumberFormat.oFormatOptions.maxFractionDigits = 1;
formattedString = axisFormat.format(value);
formattedString = formattedString.substring(0,formattedString.length-1);
}
else if(value < 1) {
var axisFormatPercent = sap.ui.core.format.NumberFormat.getPercentInstance();
formattedString = axisFormatPercent.format(value);
}
}
else {
if(value > 1) {
formattedString = value;
}
else if(value < 1) {
var popoverFormatPercent = sap.ui.core.format.NumberFormat.getPercentInstance();
popoverFormatPercent.oFormatOptions.maxFractionDigits = 2;
formattedString = popoverFormatPercent.format(value);
}
}
if(value == 0) {
formattedString = "0";
}
if(value == 1) {
formattedString = "100%"
}
return formattedString;
}
};
jQuery.sap.require("sap.ui.core.format.DateFormat");
jQuery.sap.require("sap.ui.core.format.FileSizeFormat");
jQuery.sap.require("sap.ui.core.format.NumberFormat");
sap.viz.api.env.Format.numericFormatter(customFormatter);
},
loadLibrary: function(vizframe, fixflex) {
// try to load sap.suite.ui.commons for using ChartContainer
// sap.suite.ui.commons is available in sapui5-sdk-dist but not in demokit
var bSuiteAvailable = jQuery.sap.sjax({type: "HEAD", url: sap.ui.resource("sap.suite.ui.commons", "library.js")}).success;
if (bSuiteAvailable) {
sap.ui.getCore().loadLibrary("sap.suite.ui.commons")
var oChartContainerContent = new sap.suite.ui.commons.ChartContainerContent({
icon : "sap-icon://horizontal-bar-chart",
title : "vizFrame Bar Chart Sample",
content : [vizframe]
});
var oChartContainer = new sap.suite.ui.commons.ChartContainer({
content : [oChartContainerContent]
});
oChartContainer.setShowFullScreen(true);
oChartContainer.setAutoAdjustHeight(true);
fixflex.destroyFlexContent();
fixflex.setFlexContent(oChartContainer);
}
},
setExpanding: function(panel) {
if (jQuery(document).width() < 550) {
panel.setExpanded(false);
}
jQuery(window).resize(function() {
if (jQuery(document).width() < 550) {
panel.setExpanded(false);
} else {
panel.setExpanded(true);
}
});
},
adjustStyle: function(oRadio1,oRadio2,oRadio3,oRadio4,oRadio5,oRadio6,oRadio7,oRadio8,oRadio9,oRadio10,oBox1,oBox2,oBox3,oBox4,oBox5,oHBox) {
try {
if (jQuery("html").attr("dir") == "rtl") {
if (oRadio1) {
oRadio1.removeStyleClass("buttonPosition");
oRadio1.addStyleClass("buttonPositionRTL");
}
if (oRadio2) {
oRadio2.removeStyleClass("buttonPosition");
oRadio2.addStyleClass("buttonPositionRTL");
}
if (oRadio3) {
oRadio3.removeStyleClass("buttonPosition");
oRadio3.addStyleClass("buttonPositionRTL");
}
if (oRadio4) {
oRadio4.removeStyleClass("buttonPosition");
oRadio4.addStyleClass("buttonPositionRTL");
}
if (oRadio5) {
oRadio5.removeStyleClass("buttonPosition");
oRadio5.addStyleClass("buttonPositionRTL");
}
if (oRadio6) {
oRadio6.removeStyleClass("buttonPosition");
oRadio6.addStyleClass("buttonPositionRTL");
}
if (oRadio7) {
oRadio7.removeStyleClass("buttonPosition");
oRadio7.addStyleClass("buttonPositionRTL");
}
if (oRadio8) {
oRadio8.removeStyleClass("buttonPosition");
oRadio8.addStyleClass("buttonPositionRTL");
}
if (oRadio9) {
oRadio9.removeStyleClass("buttonPosition");
oRadio9.addStyleClass("buttonPositionRTL");
}
if (oRadio10) {
oRadio10.removeStyleClass("buttonPosition");
oRadio10.addStyleClass("buttonPositionRTL");
}
if (oBox1) {
oBox1.removeStyleClass("boxPosition");
oBox1.addStyleClass("boxPositionRTL");
}
if (oBox2) {
oBox2.removeStyleClass("boxPosition");
oBox2.addStyleClass("boxPositionRTL");
}
if (oBox3) {
oBox3.removeStyleClass("boxPosition");
oBox3.addStyleClass("boxPositionRTL");
}
if (oBox4) {
oBox4.removeStyleClass("boxPosition");
oBox4.addStyleClass("boxPositionRTL");
}
if (oBox5) {
oBox5.removeStyleClass("boxPosition");
oBox5.addStyleClass("boxPositionRTL");
}
if (oHBox) {
oHBox.removeStyleClass("HBoxStyle");
oHBox.addStyleClass("HBoxStyleRTL");
}
}
} catch (e) {
;
}
}
};
});
{
"milk": [{
"Store Name": "24-Seven",
"Revenue": 428214.13,
"Cost": 94383.52,
"Consumption": 76855.15368
},
{
"Store Name": "A&A",
"Revenue": 1722148.36,
"Cost": 274735.17,
"Consumption": 310292.22
},
{
"Store Name": "Alexei's Specialities",
"Revenue": 1331176.706884,
"Cost": 233160.58,
"Consumption": 143432.18
},
{
"Store Name": "BC Market",
"Revenue": 1878466.82,
"Cost": 235072.19,
"Consumption": 487910.26
},
{
"Store Name": "Choices Franchise 1",
"Revenue": 3326251.94,
"Cost": 582543.16,
"Consumption": 267185.27
},
{
"Store Name": "Choices Franchise 3",
"Revenue": 2090030.97,
"Cost": 397952.77,
"Consumption": 304964.8856125
},
{
"Store Name": "Choices Franchise 6",
"Revenue": 1932991.59,
"Cost": 343427.25,
"Consumption": 291191.83
},
{
"Store Name": "Dairy World",
"Revenue": 752565.16,
"Cost": 115844.26,
"Consumption": 98268.9597904
},
{
"Store Name": "Delikatessen",
"Revenue": 1394072.66,
"Cost": 263180.86,
"Consumption": 176502.5521223
},
{
"Store Name": "Donald's Market",
"Revenue": 3308333.872944,
"Cost": 611658.59,
"Consumption": 538515.47632832
}]
}
{
"milk": [{
"Store Name": "24-Seven",
"Revenue": 428214.13,
"Cost": 94383.52,
"Consumption": 76855.15368
},
{
"Store Name": "A&A",
"Revenue": 1722148.36,
"Cost": 274735.17,
"Consumption": 310292.22
},
{
"Store Name": "Alexei's Specialities",
"Revenue": 1331176.706884,
"Cost": 233160.58,
"Consumption": 143432.18
}]
}
{
"milk": [{
"Store Name": "24-Seven",
"Revenue": 428214.13,
"Cost": 94383.52,
"Consumption": 76855.15368
},
{
"Store Name": "A&A",
"Revenue": 1722148.36,
"Cost": 274735.17,
"Consumption": 310292.22
},
{
"Store Name": "Alexei's Specialities",
"Revenue": 1331176.706884,
"Cost": 233160.58,
"Consumption": 143432.18
},
{
"Store Name": "BC Market",
"Revenue": 1878466.82,
"Cost": 235072.19,
"Consumption": 487910.26
},
{
"Store Name": "Choices Franchise 1",
"Revenue": 3386251.94,
"Cost": 582543.16,
"Consumption": 267185.27
},
{
"Store Name": "Choices Franchise 3",
"Revenue": 2090030.97,
"Cost": 397952.77,
"Consumption": 304964.8856125
},
{
"Store Name": "Choices Franchise 6",
"Revenue": 1932991.59,
"Cost": 343427.25,
"Consumption": 291191.83
},
{
"Store Name": "Dairy World",
"Revenue": 752565.16,
"Cost": 115844.26,
"Consumption": 98268.9597904
},
{
"Store Name": "Delikatessen",
"Revenue": 1394072.66,
"Cost": 263180.86,
"Consumption": 176502.5521223
},
{
"Store Name": "Donald's Market",
"Revenue": 3308333.872944,
"Cost": 611658.59,
"Consumption": 538515.47632832
},
{
"Store Name": "Donald's Market - Takeout",
"Revenue": 134437.96,
"Cost": 25328.61,
"Consumption": 17304.688943
},
{
"Store Name": "Euro Specials",
"Revenue": 308490.22,
"Cost": 49242.11,
"Consumption": 30143.96
},
{
"Store Name": "Europ. Spec.",
"Revenue": 1935851.92,
"Cost": 356767.68,
"Consumption": 275449.9578759
},
{
"Store Name": "European Specialities",
"Revenue": 5194583.21,
"Cost": 887019.64,
"Consumption": 593236.342616549
},
{
"Store Name": "FastFood Inc",
"Revenue": 816043.19,
"Cost": 131097.81,
"Consumption": 188724.28
},
{
"Store Name": "Food and more",
"Revenue": 620772.97,
"Cost": 118126.43,
"Consumption": 81511.4769567
},
{
"Store Name": "Food Basics",
"Revenue": 1203178.19,
"Cost": 226328.05,
"Consumption": 150051.5416602
},
{
"Store Name": "Fresh Market",
"Revenue": 164873.41,
"Cost": 26136.44,
"Consumption": 27373.69
},
{
"Store Name": "Gogo Grocercies",
"Revenue": 462603.36,
"Cost": 76356.3,
"Consumption": 122910.5
},
{
"Store Name": "Greens",
"Revenue": 84958.74,
"Cost": 15020.07,
"Consumption": 17633.57
},
{
"Store Name": "Greens Organics",
"Revenue": 659739.12,
"Cost": 112690.1,
"Consumption": 114552.68
},
{
"Store Name": "Guadalajara",
"Revenue": 394.4,
"Cost": 68.92,
"Consumption": 174.16
},
{
"Store Name": "Highland Market",
"Revenue": 679012.85,
"Cost": 118307.29,
"Consumption": 108648.0613184
},
{
"Store Name": "International Food Store",
"Revenue": 3191131.74,
"Cost": 496861.47,
"Consumption": 572668.81
},
{
"Store Name": "Jim's Market",
"Revenue": 549723.56,
"Cost": 83124.96,
"Consumption": 72465.5723153999
},
{
"Store Name": "L Mart",
"Revenue": 726866.63,
"Cost": 104804.18,
"Consumption": 117898.5
},
{
"Store Name": "LAS BRISAS",
"Revenue": 14166.22,
"Cost": 2634.38,
"Consumption": 1667.5073626
},
{
"Store Name": "Manitoba Market",
"Revenue": 71030.26,
"Cost": 11527.01,
"Consumption": 14640.22
},
{
"Store Name": "Maple Creek's",
"Revenue": 2445440.73139,
"Cost": 356001.24,
"Consumption": 393376.5050112
},
{
"Store Name": "Mike's Gelateria",
"Revenue": 5856.63,
"Cost": 1031.58,
"Consumption": 680.34
},
{
"Store Name": "Mini Market",
"Revenue": 395482.2,
"Cost": 69579.57,
"Consumption": 54647.803224
},
{
"Store Name": "N&N ",
"Revenue": 1432466.49,
"Cost": 267962.31,
"Consumption": 181519.265115
},
{
"Store Name": "Neighbourhood Groceries",
"Revenue": 529737.43,
"Cost": 83313.27,
"Consumption": 37204.74
},
{
"Store Name": "No Frills",
"Revenue": 779535.42,
"Cost": 122799.3,
"Consumption": 119257.85
},
{
"Store Name": "Peter Piper",
"Revenue": 240134.46,
"Cost": 44994.03,
"Consumption": 30911.268409
},
{
"Store Name": "Peter's Kiosk",
"Revenue": 232635.5,
"Cost": 43037.34,
"Consumption": 37064.3492025
},
{
"Store Name": "Pizza Fresh",
"Revenue": 4938984.62884,
"Cost": 807040.59,
"Consumption": 510843.36270193
},
{
"Store Name": "PriceLow",
"Revenue": 883649.66292,
"Cost": 159075.78,
"Consumption": 131749.88
},
{
"Store Name": "Public Market",
"Revenue": 976455.605518999,
"Cost": 180127.03,
"Consumption": 136113.43
},
{
"Store Name": "Qrc",
"Revenue": 587523.81645,
"Cost": 95235.1399999999,
"Consumption": 54350.14
},
{
"Store Name": "Quality Foods - AB",
"Revenue": 178867.78,
"Cost": 26421.59,
"Consumption": 25775.44
},
{
"Store Name": "Quality Foods - BC",
"Revenue": 259170.13,
"Cost": 29674.98,
"Consumption": 49286.82
},
{
"Store Name": "Quality Foods - Man.",
"Revenue": 1648230.89,
"Cost": 248071.75,
"Consumption": 305739.0690396
},
{
"Store Name": "Quality Foods - ON",
"Revenue": 306551.69,
"Cost": 50483.99,
"Consumption": 45295.29
},
{
"Store Name": "Quality Foods - Sask.",
"Revenue": 814419.178191,
"Cost": 134605.6,
"Consumption": 122772.8603834
},
{
"Store Name": "Rite Value",
"Revenue": 176652.88,
"Cost": 28453.2,
"Consumption": 42396.7
},
{
"Store Name": "Steve's",
"Revenue": 1840252.7279549,
"Cost": 320727.78,
"Consumption": 277650.326123
},
{
"Store Name": "SuperValue",
"Revenue": 6057813.94,
"Cost": 940389.21,
"Consumption": 1083503.38
},
{
"Store Name": "SUSHI-ITO",
"Revenue": 1306316.38358,
"Cost": 214615.96,
"Consumption": 229872.88233188
},
{
"Store Name": "Sweet Tooth Bakery",
"Revenue": 4550208.3173505,
"Cost": 807161.229999999,
"Consumption": 493776.33
}]
}