SAPUI5 Charts:Combination chart using sap.makit library

Tweet

sap.makit library is deprecated use Vizframe instead.
Pre-requisites

1.sapui5 framework loaded

2.sap.makit library loaded.
      We have seen how to make a simple chart using SAPUI5 makit library.If you haven't please find my other posts.(SAPUI5 charts:simple chart using makit library).
       Now we will create a combination chart using SAPUI5 makit library.Combination charts allow multiple layers of a graph to share the same category,but have their own values and series grouped and drawn in different styles.
      A combination chart consist of two components:   

1. sap.makit/CombinationChart control
2. sap.makit/Layer element 

      To create a combination chart,first create a 'CombinationChart' control and add multiple 'Layer' elements.First element is the container and second element is the aggregation.ie each Layer element is a chart.The root element's properties are shared by all layers.
Steps

1. First step is to include sap.makit library in index.html file.Hope you already did that.



2. First we will get data for the Chart.You can Get Data from Odata Service.Here I am using custom data.Our Data Looks like below. 

var testdata = {
    mydata: [{year: "2014",month: "Jan-Jun",product: "Prod 1",revenue: 10000, cost: 5000}, 
             {year: "2014",month: "Jan-Jun",product: "Prod 2",revenue: 20000,cost: 15000},
             {year: "2014",month: "Jul-Dec",product: "Prod 1",revenue: 2700,cost: 2000 },
             {year: "2014",month: "Jul-Dec",product: "Prod 2",revenue: 2200,cost: 2000},
             {year: "2015",month: "Jan-Jun",product: "Prod 1",revenue: 310,cost: 300},
             {year: "2015",month: "Jan-Jun",product: "Prod 2",revenue: 1000,cost: 900},
             {year: "2015",month: "Jul-Dec",product: "Prod 1",revenue: 1300,cost: 1200},
      {year: "2015",month: "Jul-Dec",product: "Prod 2",revenue: 3100,cost: 2800}
      ]
};
var model = new sap.ui.model.json.JSONModel();
    model.setData(testdata);

3.  Create combination chart control.Set width and height.Also Define categoryRegions.

 var oChart = new sap.makit.CombinationChart({
            height: "80%",
            categoryRegions: [
                new sap.makit.Category({
                    column: "yearCategory",
                    displayName: "Year"
                }),
                new sap.makit.Category({
                    column: "monthCategory",
                    displayName: "Month"
                })
            ],
            legendPosition: sap.makit.LegendPosition.Top,
            showRangeSelector: false,
            showTableValue: false,
        });

4. Create the layers.Here set chart type,define the values regions,define series regions,define columns data.We will define columns data after creating layers.

         var layer1 = new sap.makit.Layer({
            type: sap.makit.ChartType.Column,
            series: new sap.makit.Series({
                column: "productSeries",
                displayName: "Product",
                format: "currency"
            }),
            values: [new sap.makit.Value({
                expression: "revenueValue",
                format: "currency",
                displayName: "Revenue"
            })],
        });

        var layer2 = new sap.makit.Layer({
            type: sap.makit.ChartType.Line,
            drawOnSecondaryAxis: true,
            series: new sap.makit.Series({
                column: "productSeries",
                displayName: "Product",
                format: "rounded2"
            }),
            values: [new sap.makit.Value({
                expression: "costValue",
                format: "currency",
                displayName: "Cost"
            })],
            lineThickness: 3
        });
//add columns
        layer1.addColumn(new sap.makit.Column({
            name: "yearCategory",
            value: "{year}"
        }));
        layer1.addColumn(new sap.makit.Column({
            name: "monthCategory",
            value: "{month}"
        }));
        layer1.addColumn(new sap.makit.Column({
            name: "productSeries",
            value: "{product}"
        }));
        layer1.addColumn(new sap.makit.Column({
            name: "revenueValue",
            value: "{revenue}",
            type: "number"
        }));

        layer2.addColumn(new sap.makit.Column({
            name: "yearCategory",
            value: "{year}"
        }));
        layer2.addColumn(new sap.makit.Column({
            name: "monthCategory",
            value: "{month}"
        }));
        layer2.addColumn(new sap.makit.Column({
            name: "productSeries",
            value: "{product}"
        }));
        layer2.addColumn(new sap.makit.Column({
            name: "costValue",
            value: "{cost}",
            type: "number"
        }));

5. Bind data to the layers.This step is important because each layer should have its own data.

        layer1.setModel(model);
        layer2.setModel(model);
        layer1.bindRows("/mydata");
        layer2.bindRows("/mydata");

6. Add layers to combination chart.

        oChart.addLayer(layer1);
        oChart.addLayer(layer2);

7. Add combination chart to page control.Add page to App control and place it.

        var oPage = new sap.m.Page({
            title: 'Combination Chart'

        });

        oPage.addContent(oChart);


        App = new sap.m.App({});

        App.addPage(oPage);
        App.placeAt("content");

8. See it in Action.Hope you likes this post.

Combination chart using makit library

If you enjoyed this post, Please Share!!