Show TOC

Creating a MAKit ChartLocate this document in the navigation structure

MAKit charts require data region information and data binding.

Specifying the Data Region

A data region is represented by the following aggregations:

  • Values: This aggregation is required to determine the size of each element in the chart. For example, the height of a column in a Column chart, or the size of a slice in a Pie chart. The Values aggregation can contain multiple values. For Bubble charts, this enables to set the size of the chart based on a different set of values.

  • Category: This aggregation is required to group the chart's data. The Category aggregation can only contain 1 category.

  • Series: This aggregation is optional. It is used to add an extra dimension to the chart, for example, to add a product dimension to the chart. The Series aggregation can only contain 1 series.

The following code snippet shows an example how you specify the data region for a chart at creation time:

var oChart = new sap.makit.Chart({
    height: "80%", width: "100%"
    category : new sap.makit.Category({ column : "yearCategory" }),
    series : new sap.makit.Series({ column : "productSeries" }),
    values : [new sap.makit.Value({ expression : "revenueValue", format : "currency" })]

You now have an empty chart,w hich you can now populate by binding it to a data source.

Using Data Binding to Populate the Chart with Data

A data table in MAKit i represented by rows and columns. The data is provided by means of data binding, thus ensuring that the data table is always in consistent format. To bind the chart to a data source, bind the rows to the your data source collection and the columns to the column of the collection.


var testData = {
    mycollection : [ 
        { year : 2008, product : "Prod 1", revenue : 900000 }, 
        { year : 2008, product : "Prod 2", revenue : 700000 }, 
        { year : 2009, product : "Prod 1", revenue : 100000 }, 
        { year : 2009, product : "Prod 2", revenue : 900000 }, 
        { year : 2010, product : "Prod 1", revenue : 110000 }, 
        { year : 2010, product : "Prod 2", revenue : 120000 } 

var jsonModel = new sap.ui.model.json.JSONModel();

oChart.addColumn(new sap.makit.Column({name:"yearCategory", value:"{year}"}));
oChart.addColumn(new sap.makit.Column({name:"productSeries", value:"{product}"}));
oChart.addColumn(new sap.makit.Column({name:"revenueValue", value:"{revenue}", type:"number"}));

Each name property of a column must match the column or expression property of each data region you specified when creating the chart.


As the data is added via data binding, the row modification using addRow, insertRow, and so on, is not supported.