Skip to Content
Author's profile photo Former Member

Creating Pie or Donut Charts using MAKIT library along with the various operations on the Charts

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


/wp-content/uploads/2014/05/pic1_448800.png/wp-content/uploads/2014/05/pic2_448801.png

/wp-content/uploads/2014/05/pic3_448805.png

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);


/wp-content/uploads/2014/05/pic5_448806.png

3) Create an Open dialog to show the Table Data while clicking on the particular module of the below Pie chart


/wp-content/uploads/2014/05/pic6_448807.png


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)

/wp-content/uploads/2014/05/pic7_448817.png

The config.js has been used to put a Configure button to change the properties of the chart at runtime.


Screenshot as below:-


/wp-content/uploads/2014/05/pic8_448824.png


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

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Praveer Kumar Sen
      Praveer Kumar Sen

      Nice sharing...

      Author's profile photo Suneel Manyam
      Suneel Manyam

      Thanks for sharing, can you please share the code as well that would be more help full for reference

      Author's profile photo Former Member
      Former Member

      Nice blog and very helpful