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: 

How to access and work with SAPUI5 controls from a google chart's event handler method.

ansonabraham
Participant

on ‎06-04-2015 1:02 AM

0 Kudos

Hi experts,

I am  developing a SAPUI5 application integrated with Google geochart. I have successfully generated the geochart in my view; my next task is to navigate into an another view based on the interactions made on this chart. I have implemented a listener method for this chart, but I am unable to bind the data elements of the sapui5 controls present in my next view from this method.

It will be grateful if someone can guide me to implement this functionality.

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (2)

Answers (2)

Private_Member_15166
Active Contributor
‎06-04-2015 10:19 AM
0 Kudos

See this example, if it's helpful.

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

              <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

             

              <script src="resources/sap-ui-core.js"

                           id="sap-ui-bootstrap"

                           data-sap-ui-libs="sap.ui.commons"

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

              </script>

              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

              <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>

              <script>

              function drawMap() {

                  var data = google.visualization.arrayToDataTable([

                      ['Country', 'Projects'],

                      ['Russia', 3],

                      ['France', 2],

                      ['Spain', 4]

                  ]);

                 

                  var options = {

                      dataMode: 'regions',

                      width: 834,

                      height: 521

                  };

                 

                  var container = document.getElementById('map_canvas');

                  var chart = new google.visualization.GeoChart(container);

                 

                  function myClickHandler(){

                      var selection = chart.getSelection();

                      var message = '';

                      for (var i = 0; i < selection.length; i++) {

                          var item = selection[i];

                          if (item.row != null && item.column != null) {

                              message += '{row:' + item.row + ',column:' + item.column + '}';

                          } else if (item.row != null) {

                              message += '{row:' + item.row + '}';

                          } else if (item.column != null) {

                              message += '{column:' + item.column + '}';

                          }

                      }

                      if (message == '') {

                          message = 'nothing';

                      }

                      alert('You selected ' + message);

                  }

                 

google.visualization.events.addListener(chart, 'select', myClickHandler);

                 

                  chart.draw(data, options);

              }

              google.load('visualization', '1', {packages: ['geochart'], callback: drawMap});         

              </script>

       </head>

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

              <div id="map_canvas"></div>

       </body>

</html>


In Alert Message you can change according to your need.


Regards

Dhananjay

Show replies
Show replies
ansonabraham
Participant
‎06-10-2015 6:59 PM
0 Kudos

Hi Dhananjay,

Thanks for the responses.

The actual issue was with sapui5 control; for some reason the control was not getting displayed while I was navigating to it from another view. I have fixed the issue by making few additions in the style sheet.

Regards,

Anson

agentry_src
Active Contributor
‎06-10-2015 9:16 PM
0 Kudos

Please mark this Discussion with a Correct Answer (closes, but does not lock the Discussion) and Helpful Answer where appropriate. See http://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why   Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be.


Thanks, Mike (Moderator)
SAP Technology RIG

Private_Member_15166
Active Contributor
‎06-04-2015 7:03 AM
0 Kudos 


I have implemented a listener method for this chart, but I am unable to bind the data elements of the sapui5 controls present in my next view from this method.

Can you please tell me that which listener you have used and how?

Show replies
Show replies
Ask a Question