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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. M B

    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.

    (0) 
  2. Amit Anand 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

    (0) 

Leave a Reply