Dual Stacked Combination

Demo for JMSH

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_bluecrystal">
    
</script>
<script id="myXml" type="text/xmldata">
    <mvc:View xmlns:core = "sap.ui.core"
    xmlns:mvc = "sap.ui.core.mvc"
    xmlns = "sap.m"
    controllerName = "myController"
    displayBlock = "true" > <App> <Page id = "p"
    title = "Dual Axis"> </Page>
	  </App> </mvc:View>
</script>
<body class='sapUiBody'>
    <div id='content'></div>
</body>

JavaScript

sap.ui.controller("myController", {
    onInit: function () {

        this.oPage = this.byId("p");
			var oPopOver = new sap.viz.ui5.controls.Popover();
		var oVizFrame = new sap.viz.ui5.controls.VizFrame({
			height : "700px",
			width : "1000px",
			vizType : "info/dual_stacked_combination",
			uiConfig : {applicationSet : "fiori"},
		});
		
		var cData = [];
		for (var i = 0; i < 10; ++i) {
			cData.push({
				"Country": "Country" + i,
				 "Profit": Math.round(Math.random() * 1000000),
				 "Forcast": Math.random() * 100000,
				 "Revenue0": Math.random() * 100000,
				 "Revenue1": Math.random() * 100000,
				 "Revenue2": Math.random() * 100000,
				 "Revenue3": Math.random() * 100000,
				 "Revenue4": Math.random() * 100000
			});
		}
			
		var oModel = new sap.ui.model.json.JSONModel(cData);
		var oDataset = new sap.viz.ui5.data.FlattenedDataset({
		 	dimensions: [{
		 		name: 'Country',
		 		value: "{Country}"
			}],
		 	measures: [
		 		{name: 'Profit', value: '{Profit}'},
		 		{name: "Forcast", value : "{Forcast}"},
				{name: "Revenue0", value: "{Revenue0}"},
				{name: "Revenue1", value: "{Revenue1}"},
				{name: "Revenue2", value: "{Revenue2}"},
				{name: "Revenue3", value: "{Revenue3}"},
				{name: "Revenue4", value: "{Revenue4}"}				
		 	],
		 	data: {
		 		path: "/"
		 	}
		 });

		oVizFrame.setVizProperties({
			plotArea:{
				dataShape:{
					primaryAxis: ["line","bar","bar"],
          secondaryAxis:["line","bar","bar","bar"]
				},
				dataLabel:{visible: true, formatString:"u"}
			},
			valueAxis:{label:{formatString:"u"}}
		});
		oVizFrame.setDataset(oDataset);
		oVizFrame.setModel(oModel);

		var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
			'uid' : "valueAxis",
			'type' : "Measure",
			'values' : ["Profit", "Forcast","Revenue0"]
		}), feedSecondaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
			'uid' : "valueAxis2",
			'type' : "Measure",
			'values' :...