UI5 Chart

by Gabriel de Souza

HTML

<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.viz,sap.ui.demokit">
    </script>
<div id="sample1">sss</div>

JavaScript

// some business data 
	var oModel = new sap.ui.model.json.JSONModel({
		businessData : [
			{Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
			{Country :"China",profit:133.82, population:1339724852},
			{Country :"France",profit:348.76, population:65350000},
			{Country :"Germany",profit:217.29, population:81799600},
			{Country :"India",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.Combination({
		width : "80%",
		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);
	oBarChart.placeAt("sample1");