sap.makit library is deprecated use Vizframe instead.
Pre-requisites
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:
- sap.makit/CombinationChart control
- sap.makit/Layer element
Steps
- First step is to include sap.makit library in index.html file.Hope you already did that.
- 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.
- Create combination chart control.Set width and height.Also Define categoryRegions.
- 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.
- Bind data to the layers.This step is important because each layer should have its own data.
- Add layers to combination chart.
- Add combination chart to page control.Add page to App control and place it.
- See it in Action.Hope you likes this post.
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);
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, });
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" }));
layer1.setModel(model); layer2.setModel(model); layer1.bindRows("/mydata"); layer2.bindRows("/mydata");
oChart.addLayer(layer1); oChart.addLayer(layer2);
var oPage = new sap.m.Page({ title: 'Combination Chart' }); oPage.addContent(oChart); App = new sap.m.App({}); App.addPage(oPage); App.placeAt("content");
Combination chart using makit library
If you enjoyed this post, Please Share!!
0 comments :
Post a Comment