Skip to Content


Gooogle.com provides a lot of API’s for integration to websites and there are also a lot of apps provided by it.

Among them one is GeoCharts.

A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:


  • The region mode colors whole regions, such as countries, provinces, or states.

geo1.PNG

  • The markers mode uses circles to designate regions that are scaled according to a value that you specify.

geo2.PNG

  • The text mode labels the regions with identifiers (e.g., “Russia” or “Asia”).

geo3.PNG

A geochart is rendered within the browser using SVG or VML.

Note that the geochart is not scrollable or draggable, and it’s a line drawing rather than a terrain map; if you want any of that, consider a map visualization instead.

For more details you can follow this official link :- https://developers.google.com/chart/interactive/docs/gallery/geochart .

Many times we need to display our data in geographical location format and google provides the best API for it.

Here we are going to display Region GeoCharts.

First as usual we have to create an SAPUI5 Application.


              <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-uilibs‘ if required –>


First as usual we have to create an SAPUI5 Application.After this we have to load the Google GeoChart library.

For doing so write this line in another script tag.


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


After this we will write our code for displaying geochart.


              <script>

              function drawMap() {

                  var data = google.visualization.arrayToDataTable([

                      [‘Country’, ‘Projects’],

                      [‘Russia’, 3],

                      [‘France’, 2],

                      [‘Spain’, 4]

                  ]);

                

                  var options = {

                      dataMode: ‘regions’,

                      width: 834,                                        // Set Width

                      height: 521                                        // Set Height

                  };

                

                  var container = document.getElementById(‘map_canvas’);

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

                

                  function myClick(){                                                            // Click Handler event

                      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’, myClick);                         // Listener has been created for select event of any region.

                

                  chart.draw(data, options);

              }

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

              </script>


Here we have a <div> in our body where our geochart has been placed.


       <body class=“sapUiBody” role=“application”>

              <div id=“map_canvas”></div>

       </body>


I don’t remember the link from where i got some help but i want to thanks the contributor.

These are some SDN Queries.

Issue while trying to display Google geochart in SAPUI5 app 

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


I hope you all will like it.

I will keep updating this blog very frequently with different google API’s.



Thanks.


To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply