cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Grpah is not appearing fully within the dialog

former_member213574
Participant

on ‎01-02-2015 9:59 AM

0 Kudos

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=&q...

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

Kindly help in this regard,

Regards,

Arun

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (1)

Answers (1)

former_member82178
Active Participant
‎01-05-2015 3:51 PM
0 Kudos

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

Show replies
Show replies
former_member213574
Participant
‎01-06-2015 7:02 AM
0 Kudos

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

Ask a Question