SAPUI5 vizFrame examples

SAPUI5 vizFrame examples

by Gabriel de Souza

HTML

<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m, sap.viz" data-sap-ui-theme="sap_belize">


</script>
<script id="myXml" type="text/xmldata">
   <mvc:View controllerName="myController" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout"
	xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data">
      <App>
         <Page showHeader="false" class="whiteBackground">
				<content>
					<layout:Grid defaultSpan="L12 M12 S12">
						<viz:VizFrame id="vizFrame" title="Column Chart" uiConfig="{applicationSet:'fiori'}" height='20rem' width="100%" vizType='column'>
							<viz:dataset>
								<viz.data:FlattenedDataset data="{ColumnChartData>/data}">
									<viz.data:dimensions>
										<viz.data:DimensionDefinition name="Period" value="{chartData>Period}"/>
									</viz.data:dimensions>
									<viz.data:measures>
										<viz.data:MeasureDefinition name="Actuals" value="{chartData>Actuals}"/>
										<viz.data:MeasureDefinition name="Budget" value="{chartData>Budget}"/>
									</viz.data:measures>
								</viz.data:FlattenedDataset>
							</viz:dataset>
							<viz:feeds>
								<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Actuals"/>
								<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Budget"/>
								<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Period"/>
							</viz:feeds>
						</viz:VizFrame>
						<viz:VizFrame id="vizFrame2" uiConfig="{applicationSet:'fiori'}" height='20rem' width="100%" vizType='horizontal_waterfall'>
							<viz:dataset>
								<viz.data:FlattenedDataset data="{waterfallChartData>/data}">
									<viz.data:dimensions>
										<viz.data:DimensionDefinition name="Category"...

CSS

.whiteBackground {
  background-color: #ffffff;
}

JavaScript

sap.ui.controller("myController", {

		onInit: function() {
			this._renderChart1();
			this._renderChart2();
		},

		/**
		 * Renders the column chart
		 * @private
		 */
		_renderChart1: function() {
			var oData = {
				data: [{
					"Period": "Q1 '17",
					"Actuals": 642.3,
					"Category": "Actuals",
					"Budget": 720
				}, {
					"Period": "Q2 '17",
					"Actuals": 751.7,
					"Category": "Actuals",
					"Budget": 720
				}, {
					"Period": "Q3 '17",
					"Actuals": 770.7,
					"Category": "Actuals",
					"Budget": 720
				}, {
					"Period": "Q4 '17",
					"Actuals": 638.7,
					"Category": "Actuals",
					"Budget": 720
				}, {
					"Period": "Q1 '18",
					"Actuals": 750.7,
					"Category": "Forecast",
					"Budget": 720
				}, {
					"Period": "Q2 '18",
					"Actuals": 770.7,
					"Category": "Forecast",
					"Budget": 720
				}]
			};

			var oJsonModel = new sap.ui.model.json.JSONModel(oData);
			this.getView().setModel(oJsonModel, "ColumnChartData");

			var oVizFrame = this.getView().byId("vizFrame");
			oVizFrame.setModel(oJsonModel, "ColumnChartData");
			oVizFrame.setVizType("bar");

			var vizProperties = {
				interaction: {
					zoom: {
						enablement: "disabled"
					},
					selectability: {
						mode: "EXCLUSIVE"
					}
				},
				valueAxis: {
					title: {
						visible: false
					},
					visible: true,
					axisLine: {
						visible: false
					},
					label: {
						linesOfWrap: 2,
						visible: false,
						style: {
							fontSize: "10px"
						}
					}
				},
				categoryAxis: {
					title: {
						visible: false
					},
					label: {
						linesOfWrap: 2,
						rotation: "fixed",
						angle: 0,
						style: {
							fontSize: "12px"
						}
					},
					axisTick: {
						shortTickVisible: false
					}
				},
				title: {
					text: "Example Column Chart with IBCS style semantics",
					visible: true
				},
				legend: {
					visible: false
				},
				plotArea: {
					colorPalette: ["#007181"],
					gridline: {
						visible:...