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: 

Issue while trying to display Google geochart in SAPUI5 app

Go to solution
ansonabraham
Participant

on ‎06-02-2015 12:17 AM

0 Kudos

Hi,

I am trying to integrate Google geochart in my SAPUI5 application. I have followed the steps provided in the official documentation (https://developers.google.com/chart/interactive/docs/gallery/geochart).

When I tried to execute the application, I have received the following error.

"Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined"

I have tried several ways to load the google api and chart but nothing worked.

Please help me if you are aware of this issue.

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Private_Member_15166
Active Contributor
‎06-02-2015 11:35 AM
0 Kudos

Hi Anson,

I used like this and it's working.

I just created index.html.

Please take a look.

<!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>

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

             google.setOnLoadCallback(drawRegionsMap);

             function drawRegionsMap() {

               var data = google.visualization.arrayToDataTable([

                 ['Country', 'Popularity'],

                 ['Germany', 200],

                 ['United States', 300],

                 ['Brazil', 400],

                 ['Canada', 500],

                 ['France', 600],

                 ['RU', 700]

               ]);

               var options = {};

               var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

               chart.draw(data, options);

             

               //chart.placeAt("content");

             }                   

              </script>

       </head>

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

              <div id="regions_div" style="width: 900px; height: 500px;"></div>

       </body>

</html>

Regards

Dhananjay

Show replies
Show replies
ansonabraham
Participant
‎06-02-2015 4:55 PM
0 Kudos

Thank you Dhananjay, it worked

Issue was with loading the Google API.

Answers (0)

Ask a Question