SAP UI5 Chart with scrollbar

by Gabriel de Souza

HTML

<script id="sap-ui-bootstrap"
          type="text/javascript"
          src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
          data-sap-ui-theme="sap_bluecrystal"
          data-sap-ui-preload="async"
          data-sap-ui-libs="sap.ui.commons, sap.ui.ux3"></script>
   
		
<body class='sapUiBody'>
  <div id="uiArea0"></div>
    <div id="uiArea"></div>
</body>

JavaScript

var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
		businessData : [
			{Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
			{Country :"China",revenue:338.29,profit:133.82, population:1339724852},
			{Country :"France",revenue:487.66,profit:348.76, population:65350000},
			{Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
			{Country :"India",revenue:170.93,profit:117.00, population:1210193422},
			{Country :"United States",revenue:905.08,profit:609.16, population:313490000}
		]
	});


    // A Dataset defines how the model data is mapped to the chart 
	var oDataset = new sap.viz.ui5.data.FlattenedDataset({

		// a Bar Chart requires exactly one dimension (x-axis) 
		dimensions : [ 
			{
				axis : 1, // must be one for the x-axis, 2 for y-axis
				name : 'Country', 
				value : "{Country}"
			} 
		],

		// it can show multiple measures, each results in a new set of bars in a new color 
		measures : [ 
		    // measure 1
			{
				name : 'Profit', // 'name' is used as label in the Legend 
				value : '{profit}' // 'value' defines the binding for the displayed value   
			},
			{
				name : 'Revenue', 
				value : '{revenue}'
			} 
		],
		
		// 'data' is used to bind the whole data collection that is to be displayed in the chart 
		data : {
			path : "/businessData"
		}
		
	});

    // create a Bar chart
    // you also might use Combination, Line, StackedColumn100, StackedColumn or Column
    // for Donut and Pie please remove one of the two measures in the above Dataset.  
	var oBarChart = new sap.viz.ui5.Bar({
		width : "1600px",
		height : "400px",
		plotArea : {
		//'colorPalette' : d3.scale.category20().range()
		},
		title : {
			visible : true,
			text : 'Profit and Revenue By Country'
		},
		dataset : oDataset
	});

    // attach the model to the chart and display it
	oBarChart.setModel(oModel);


//Create a panel instance
var oPanel = new sap.ui.commons.Panel();
//Add something to the panel's...