Tutorial: Creating a SAPUI5 Bar Chart Using SINA

Creating a SAPUI5 Bar Chart Using SINA

SAPUI5 + HANA SInA

This tutorial explains how to use SINA as the data source for SAPUI5 charts.

For more information about developing SAPUI5 apps on SAP HANA, see the SAPUI5 Developer Guide for SAP HANA.

Result of this Tutorial

This is what the rendered chart will look like. See complete source code of this example at the end of this tutorial.

Preparing the SAPUI5 Chart

As the first step, create the SAPUI5 chart. For the chart, you need to create the SAPUI5 dataset object. This object defines the mapping between the elements of a SINA result set and the axes of a SAPUI5 chart. 

var oDataset = new sap.viz.ui5.data.FlattenedDataset({

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

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

Now create the actual SAPUI5 chart element. The dataset is passed into the chart element at creation and the chart element is placed into the HTML DOM at the proper location. 

var oBarChart = new sap.viz.ui5.Bar({
	width : "80%",
	height : "400px",
	plotArea : {
	//'colorPalette' : d3.scale.category20().range()
	},
	title : {
		visible : true,
		text : 'Products'
	},
	dataset : oDataset
});

// attach the model to the chart and display it
oBarChart.placeAt("uiArea");

Creating the SINA Query and Processing the Result Set

Create the SINA query object. 

var dataSource = {
    "packageName" : "sap.bc.ina.demos.epm.views",
    "objectName"  : "V_EPM_PRODUCT"
};

var sina = global.sap.bc.ina.api.sina;
			
var query = sina.createChartQuery();
query.dataSource(dataSource);
query.addDimension("CATEGORY");
query.addMeasure({name:"CATEGORY",aggregationFunction:"COUNT"});

// In this tutorial we are using synchronous calls in order to keep it simple.
// In your own application it is recommended to use asynchronous calls instead.
var resultSet = query.getResultSetSync();

Once the result set is returned by SINA its elements are used as the basis of a SAPUI5 model. This model is used as the data model for the SAPUI5 chart. 

// Retrieve elements from the result set and create a new UI5 model around them
var elements = resultSet.getElements();
var oModel = new sap.ui.model.json.JSONModel(elements);

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

Complete Source Code

This is the complete source code of this example.