Sharing a Blog as document, like how we can create charts using MAKIT library along with the various operations on the charts. hope it might help who are totally new for SAP UI5 or HTML5 . By using or following the steps in this Blog, any newcomer/learner can easily would be able to make the charts in sap ui5 or HTML5.
Creating Pie or Donut Charts using MAKIT library along with the various operations on the Charts:-
Create a Project in Eclipse as below
Change the index.html (which has been created while creating the project) page with the below code
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<script src=“https://sapui5.netweaver.ondemand.com/sdk/resources/sap-ui-core.js“
id=“sap-ui-bootstrap”
data-sap-ui-libs=“sap.m, sap.ui.commons,sap.makit, sap.viz,sap.ui.core, sap.ui.layout, sap.ui.table”
data-sap-ui-theme=“sap_bluecrystal” >
</script>
</script>
<!– only load the mobile lib “sap.m” and the “sap_mvi” theme –>
<script src=“./graphs_chart/Config.js”></script>
<script>
sap.ui.localResources(“graphs_chart”);
var app = new sap.m.App({initialPage:“idPieChart1”});
var page = sap.ui.view({id:“idPieChart1”, viewName:“graphs_chart.PieChart”, type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt(“content”);
</script>
</head>
<body class=“sapUiBody” role=“application”>
<div id=“content”></div>
</body>
</html>
1) Create a JSON Model
function getMyModel_Pie() {
var data = [{Module:“Custom”,volume:897},
{Module:“FI”, volume:319},
{Module:“BC”, volume:250},
{Module:“MM”, volume:212},
{Module:“CA”, volume:178},
{Module:“LE”, volume:164},
{Module:“CO”, volume:140},
{Module:“SD”, volume:115},
{Module:“PP”, volume:112},
{Module:“QM”, volume:104},
{Module:“PM”, volume:70},
{Module:“LO”, volume:60},
{Module:“FIN”, volume:39},
{Module:“IS-B”, volume:17},
{Module:“EC”, volume:4},
{Module:“BW”, volume:4},
{Module:“PA”, volume:2},
{Module:“TR”, volume:2},
{Module:“AP”, volume:2},
{Module:“SV”, volume:1},
{Module:“IM”, volume:1},
{Module:“PY”, volume:1},
{Module:“EHS”, volume:1},
{Module:“PSM”, volume:1},
{Module:“HCM”, volume:150}]
var model = new sap.ui.model.json.JSONModel();
model.setData(data);
return model;
}
2) Create a Pie Chart by using the sap.makit library with the above JSON model data
function makechart_Pie(model,chart)
{
var bluePalette = [ 0x67DFFF, 0x0A74F8, 0x0100FD, 0x030979 ];
var customPalette = [ “red”, “yellow”, “green”, “orange”, “blue” ];
oChart = new sap.makit.Chart({
width : “90%”,
height: “100%”,
type : chart,
//toolBar : sap.m.Bar,
// showRangeSelector : false,
// showTableValue : true,
showTotalValue : false,
//primaryColorPalette : customPalette,
valueAxis: new sap.makit.ValueAxis({}),
categoryAxis: new sap.makit.CategoryAxis({}),
category : new sap.makit.Category({
column : “Module”
}),
values : [new sap.makit.Value({
expression : “”,
format : “number”
})]
});
oChart.addColumn(new sap.makit.Column({name:“Module”, value:“{Module}”}));
oChart.addColumn(new sap.makit.Column({name:“”, value:“{volume}”, type:“number”}));
oChart.setModel(model);
oChart.bindRows(“/”);
oChart.attachEvent(“tap”,function(oEvent){
var temp=this.getSelectedCategory().toString();
// alert(temp);
openDialog(temp); //Calling OpenDialog() Method (The code of this method is mentioned below)
});
return oChart;
}
This is the Pie Chart has been created by calling the below function
Var Pie_chart= makechart_pie(getMyModel_Pie(),sap.makit.ChartType.Pie);
3) Create an Open dialog to show the Table Data while clicking on the particular module of the below Pie chart
function openDialog(name) {
var oDialog1 = new sap.m.Dialog();
var oButton2 = new sap.m.Button({text: “Close” , press: function() {
oDialog1.removeContent();
oDialog1.close();
}});
oDialog1.setEndButton(oButton2);
var temp= name;
if(temp==“Custom”)
{ oDialog1.setTitle(” Process Coverage for “+ name);
var tempdata= details_custom;
oDialog1.addContent(tempdata);
}
oDialog1.open();
}
Creating List as a Table the method (maketable_details()) has been used and called as follows:-
var details_custom= maketable_details(“Custom”,getMyModel_Details(),”items1″,”listItems1″);
function getMyModel_Details() {
var data = {
navigation : [{“Process”:”Custom”,”Transaction”:”Custom Transaction”,”Coverage”:”NO”,”usage”:235552.672,”users_impacted”:8055},
{“Process”:”Custom”,”Transaction”:”tes transaction”,”Coverage”:”NO”,”usage”:4121,”users_impacted”:38},
{“Process”:”Custom”,”Transaction”:”bjhgh”,”Coverage”:”NO”,”usage”:12,”users_impacted”:9},
{“Process”:”Custom”,”Transaction”:”Maintain Organizational Plan”,”Coverage”:”NO”,”usage”:6,”users_impacted”:3},
{“Process”:”Custom”,”Transaction”:”to create tcode for the table”,”Coverage”:”NO”,”usage”:5,”users_impacted”:3}]
};
var model = new sap.ui.model.json.JSONModel();
model.setData(data);
return model;
}
]};
function maketable_details(process,imodels,list_id, listitem_id)
{
var model = new sap.ui.model.json.JSONModel();
model.setData({
col1 : “Transaction”,
col2 : “Fiori Coverage”,
col3 : “Usage”,
col4 : “Users Impacted”
});
sap.ui.getCore().setModel(model, “i18n”);
var page = new sap.m.Page({
title : “Table”,
content : [list = new sap.m.List(list_id, {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
headerText : “Process Coverage for “+ process,
columns : [new sap.m.Column({
styleClass : “name”,
hAlign : “Left”,
header : new sap.m.Label({
text : “{i18n>/col1}”
}),
sortProperty: “{Transaction}”
}), new sap.m.Column({
hAlign : “Center”,
header : new sap.m.Label({
text : “{i18n>/col2}”
}),
}), new sap.m.Column({
hAlign : “Center”,
width : “30%”,
header : new sap.m.Label({
text : “{i18n>/col3}”
}),
}), new sap.m.Column({
hAlign : “Right”,
width : “30%”,
header : new sap.m.Label({
text : “{i18n>/col4}”
}),
//
})]
})]
});
var template = new sap.m.ColumnListItem(listitem_id,{
unread : false,
cells : [
new sap.m.Label({
text : “{Transaction}”
}),
new sap.m.Label({
text : “{Fiori_Coverage}”
}),
new sap.m.Label({
text : “{usage}”
}),
new sap.m.Label({
text : “{users_impacted}”
}),
]
});
oFilter = new sap.ui.model.Filter(“Process”, sap.ui.model.FilterOperator.EQ, process);
list.setModel(imodels);
list.bindAggregation(“items”, “/navigation”, template);
list.getBinding(“items”).filter(oFilter, sap.ui.model.FilterType.Application);
return list;
}
Table as a list— (this table will be openup while clicking on the particular module of the pie chart)
The config.js has been used to put a Configure button to change the properties of the chart at runtime.
Screenshot as below:-
Var Pie_Button = generatePieConfigPopover(Pie_chart);
Config.js
**********************************************************************************
function generatePieConfigPopover(oChart) {
var oConfigList = new sap.m.List({
inset : true
});
generatePieConfigurationList(oConfigList, oChart);
var oScrollContainer = new sap.m.ScrollContainer({
horizontal: false,
vertical: true,
content: oConfigList
});
var oConfigPopOver = new sap.m.Popover({
placement: sap.m.PlacementType.Bottom,
showHeader: false,
content: [
oScrollContainer
]
});
var oButton = new sap.m.Button({
//text: “Configure”, icon: “img/settings.png”,
text: “Configure”, icon: sap.ui.core.IconPool.getIconURI(“settings”),
press : function() {
oConfigPopOver.openBy(this);
}
});
return oButton;
};
function generateDonutConfigPopover(oChart) {
var oConfigList = new sap.m.List({
inset : true
});
generateDonutConfigurationList(oConfigList, oChart);
var oScrollContainer = new sap.m.ScrollContainer({
horizontal: false,
vertical: true,
content: oConfigList
});
var oConfigPopOver = new sap.m.Popover({
placement: sap.m.PlacementType.Bottom,
showHeader: false,
content: [
oScrollContainer
]
});
var oButton = new sap.m.Button({
//text: “Configure”, icon: “img/settings.png”,
text: “Configure”, icon: sap.ui.core.IconPool.getIconURI(“settings”),
press : function() {
oConfigPopOver.openBy(this);
}
});
return oButton;
};
function generatePieConfigurationList(oList, oChart) {
var oListItem = null;
//================================================================
//Chart Type
oListItem = new sap.m.InputListItem({label:“Type”});
var chartTypes = [sap.makit.ChartType.Pie,
sap.makit.ChartType.Donut];
var oChartTypeSelect = new sap.m.Select({
change: function(oControlEvent) {
oChart.setType(oControlEvent.getParameter(“selectedItem”).getKey());
}
});
var len = chartTypes.length;
for(var i = 0; i < len; i++) {
oChartTypeSelect.addItem(new sap.ui.core.Item({
key: chartTypes[i], text: chartTypes[i]
}));
}
oListItem.addContent(oChartTypeSelect);
oList.addItem(oListItem);
//================================================================
//Legend Position
oListItem = new sap.m.InputListItem({label:“Legend Position”});
var legendPos = [sap.makit.LegendPosition.Top,
sap.makit.LegendPosition.Right,
sap.makit.LegendPosition.Bottom,
sap.makit.LegendPosition.Left,
sap.makit.LegendPosition.None];
var oLegendPosSelect = new sap.m.Select({
change: function(oControlEvent) {
oChart.setLegendPosition(oControlEvent.getParameter(“selectedItem”).getKey());
}
});
var len = legendPos.length;
for(var i = 0; i < len; i++) {
oLegendPosSelect.addItem(new sap.ui.core.Item({
key: legendPos[i], text: legendPos[i]
}));
}
oListItem.addContent(oLegendPosSelect);
oList.addItem(oListItem);
//================================================================
//Value Bubble Position
oListItem = new sap.m.InputListItem({label:“Value Bubble Position”});
var valBubPos = [sap.makit.ValueBubblePosition.Top,
sap.makit.ValueBubblePosition.Side];
var oValBubPosSelect = new sap.m.Select({
change: function(oControlEvent) {
oChart.getValueBubble().setPosition(oControlEvent.getParameter(“selectedItem”).getKey());
}
});
var len = valBubPos.length;
for(var i = 0; i < len; i++) {
oValBubPosSelect.addItem(new sap.ui.core.Item({
key: valBubPos[i], text: valBubPos[i]
}));
}
oListItem.addContent(oValBubPosSelect);
oList.addItem(oListItem);
};
function generateDonutConfigurationList(oList, oChart) {
var oListItem = null;
//================================================================
//Chart Type
oListItem = new sap.m.InputListItem({label:“Type”});
var chartTypes = [sap.makit.ChartType.Donut,
sap.makit.ChartType.Pie
];
var oChartTypeSelect = new sap.m.Select({
change: function(oControlEvent) {
oChart.setType(oControlEvent.getParameter(“selectedItem”).getKey());
}
});
var len = chartTypes.length;
for(var i = 0; i < len; i++) {
oChartTypeSelect.addItem(new sap.ui.core.Item({
key: chartTypes[i], text: chartTypes[i]
}));
}
oListItem.addContent(oChartTypeSelect);
oList.addItem(oListItem);
//================================================================
//Legend Position
oListItem = new sap.m.InputListItem({label:“Legend Position”});
var legendPos = [sap.makit.LegendPosition.Top,
sap.makit.LegendPosition.Right,
sap.makit.LegendPosition.Bottom,
sap.makit.LegendPosition.Left,
sap.makit.LegendPosition.None];
var oLegendPosSelect = new sap.m.Select({
change: function(oControlEvent) {
oChart.setLegendPosition(oControlEvent.getParameter(“selectedItem”).getKey());
}
});
var len = legendPos.length;
for(var i = 0; i < len; i++) {
oLegendPosSelect.addItem(new sap.ui.core.Item({
key: legendPos[i], text: legendPos[i]
}));
}
oListItem.addContent(oLegendPosSelect);
oList.addItem(oListItem);
//================================================================
//Value Bubble Position
oListItem = new sap.m.InputListItem({label:“Value Bubble Position”});
var valBubPos = [sap.makit.ValueBubblePosition.Top,
sap.makit.ValueBubblePosition.Side];
var oValBubPosSelect = new sap.m.Select({
change: function(oControlEvent) {
oChart.getValueBubble().setPosition(oControlEvent.getParameter(“selectedItem”).getKey());
}
});
var len = valBubPos.length;
for(var i = 0; i < len; i++) {
oValBubPosSelect.addItem(new sap.ui.core.Item({
key: valBubPos[i], text: valBubPos[i]
}));
}
oListItem.addContent(oValBubPosSelect);
oList.addItem(oListItem);
};
**********************************************************************************
Regards,
Amit Anand
Hello Amit,
Thank you for sharing a wonderful blog.This would be very useful.
Can you also mention how to bind Odata service directly to the graphs , without manually passing the values in the code.
Hi,
PFB the function that contains the code for, how to bind Odata service directly to the graphs , without manually passing the values in the code.
function getMyModel_Pie() {
var aData = [];
var jModel = new sap.ui.model.json.JSONModel();
var SserviceURL = “Service URL”;
$.ajax( {
url : SserviceURL,
type : “GET”,
async : false,
dataType : ‘json’,
contentType : “application/json”,
username:”user id”,
password:”password”,
success : function(C, textStatus, jqXHR) {
for(var i = 0; i < C.d.results.length; i++) {
aData.push({
Module: C.d.results[i].Module,
volume: C.d.results[i].volume
}
)
};
},
error : function(data) {
console.log(“Error” + data.responseText);
}
});
jModel.setData(aData);
//sap.ui.getCore().setModel(jModel,”model”);
return jModel;
}
and call this function as below :-
var Pie_chart= makechart_pie(getMyModel_Pie(),sap.makit.ChartType.Pie);
Thanks &Regards,
Amit Anand
Nice sharing…
Thanks for sharing, can you please share the code as well that would be more help full for reference
Nice blog and very helpful