Creating a MAKit Chart

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.

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.

Example:

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();
jsonModel.setData(testData);

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"}));
oChart.setModel(jsonModel);
oChart.bindRows("/mycollection");