Skip to Content
avatar image
Former Member

Grpah is not appearing fully within the dialog

Hi All,

I was trying to create a graph within a dialog.

I am using sap.makit charts ,and i achieved this. Please find the jsbin for the same.

JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type="application/jso…

I am having a small issue like the graph is not appearing fully within the Dialogbox

Kindly help in this regard,

Regards,

Arun

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Jan 05, 2015 at 03:51 PM

    Hi Arun,

    Have some problem accessing provided JS bin link. Could you attachment some screenshot or code extract to better explain the issue.

    Thanks & Regards,

    Madhu Sudhan

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Madhu,

      The jsbin working from my end.

      Anyway please find the code for the same,

      <!DOCTYPE html>

      <html>

      <head>

      <meta name="description" content="[add your bin description]" />

        <meta charset="utf-8">

        <title>JS Bin</title>

      </head>

       

        <script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" 

                data-sap-ui-libs="sap.ui.commons, sap.suite.ui.commons,sap.m,sap.makit" 

                data-sap-ui-theme="sap_bluecrystal"> 

       

      </script>

        <script>

          var oChart = new sap.makit.Chart({

        

        showRangeSelector :false,

        showTableValue:false,

        type : sap.makit.ChartType.Line,

      // height: "80%", width: "100%",

          category : new sap.makit.Category({ column : "dayCategory" }),

          series : new sap.makit.Series({ column : "productSeries" }),

          values : [new sap.makit.Value({ expression : "consumption", format : "rounded2" })]

      });

       

        var testDatamakit = {

           mycollection : [

              { day : 2, product : "Cons:", consumption : 95 },           

               { day : 5, product : "Cons:", consumption : 135 },           

               { day : 8, product : "Cons:", consumption : 90 },

        { day : 9, product : "Cons:", consumption : 70 },

        { day : 10, product : "Cons:", consumption : 110 },

              { day : 12, product : "Cons:", consumption : 50 },

               { day : 15, product : "Cons:", consumption : 120 },

               { day : 18, product : "Cons:", consumption : 65 },

               { day : 20, product : "Cons:", consumption : 100 },

               { day : 21, product : "Cons:", consumption : 50 },

               { day : 23, product : "Cons:", consumption : 105 },

               { day : 25, product : "Cons:", consumption : 57 },

               { day : 28, product : "Cons:", consumption : 87 },

               { day : 31, product : "Cons:", consumption : 107 },

           ]

        };

        var jsonModel = new sap.ui.model.json.JSONModel();

        sap.ui.getCore().setModel(jsonModel,"jsonModel");

        jsonModel.setData(testDatamakit);

        oChart.addColumn(new sap.makit.Column({name:"dayCategory", value:"{jsonModel>day}"}));

        oChart.addColumn(new sap.makit.Column({name:"productSeries", value:"{jsonModel>product}"}));

        oChart.addColumn(new sap.makit.Column({name:"consumption", value:"{jsonModel>consumption}", type:"number"}));

        oChart.setModel(jsonModel);

        oChart.bindRows("jsonModel>/mycollection");

      var app = new sap.m.App("myApp", {initialPage:"page1"});

         

          var page1 = new sap.m.Page("page1", {

        title:"Mobile Busy Indicator Controls",

        //headerContent: [busyCSS],

        content:[

                      new sap.m.Button({

          text: 'open',

          press: function() {

            dlg.open();

            oChart.rerender();

          }

          })

                     

                      ]

        });

        app.addPage(page1).placeAt("content");

      var dlg = new sap.m.Dialog({

          title: 'Text',

          contentWidth :"1200px",contentHeight : "300px", 

          content : [oChart],

          horizontalScrolling :true

        });

         

         

         

         

         

        </script>

      <body>

      <body class="sapUiBody" role="application"> 

                <div id="content"></div> 

      </body>

      </html>

      Regards,

      Arun