Mootools and Google Visualization API conflict

73 views
Skip to first unread message

Eric Patrick

unread,
Jun 25, 2010, 11:15:21 AM6/25/10
to MooTools Users
I would like to use Mootools Request objects (v. 1.2) to load Google
Visualzation APIs into my pages, but appear to encounter a conflict
between Mootools core and google.load method.

Example that works:
---
<html>
<head>
<script type="text/javascript" src="/mylocalcache/mootools.js"></
script>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
</head>
<body>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['piechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// this will alert and object
alert(google.visualization);
// remove rest of sample code from code.google.com; this is enough
to prove the point
}
</script>
<div id="chart_div"/>
</body>
---

Example that fails (in Chrome 5.0 and IE 8):

---
<html>
<head>
<script type="text/javascript" src="/mylocalcache/mootools.js"></
script>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
</head>
<body>
<script type="text/javascript">
window.addEvent('domready', function() {
google.load('visualization', '1', {'packages':['piechart']});
google.setOnLoadCallback(drawChart);
}
function drawChart() {
// this will alert null
alert(google.visualization);
// remove rest of sample code from code.google.com; this is enough
to prove the point
}
</script>
<div id="chart_div"/>
</body>
---

My guess is that the Mootools function extension are causing a
conflict with the google jsapi code.

The only workaround I can see is to "hard code" the google.load call
into any pages from which I want to access the visualizations. While
technically doable, it defeats the purposes of "load on demand"; I
would incur the overhead of the visualization load even if the user
never clicks on the "tab(s)" that should display charts.

Any other suggested workarounds, or better yet, a fix?

Eric

André Fiedler

unread,
Jun 25, 2010, 11:31:08 AM6/25/10
to mootool...@googlegroups.com
How about:

 <script type="text/javascript">

   google.load('visualization', '1', {'packages':['piechart']});
   google.setOnLoadCallback(drawChart);
 
 function drawChart() {
   alert(google.visualization);
 }
 </script>

?

2010/6/25 Eric Patrick <patric...@gmail.com>

Eric Patrick

unread,
Jun 26, 2010, 3:00:19 PM6/26/10
to MooTools Users
That works on a static page, bu not when loaded via Request* Mootools
classes. I believe I hi the same binding issues from the request
callback that I hit with the window.addEvent.

Eric

On Jun 25, 11:31 am, André Fiedler <fiedler.an...@googlemail.com>
wrote:
> How about:
>
>  <script type="text/javascript">
>
>    google.load('visualization', '1', {'packages':['piechart']});
>    google.setOnLoadCallback(drawChart);
>
>  function drawChart() {
>    alert(google.visualization);
>  }
>  </script>
>
> ?
>
> 2010/6/25 Eric Patrick <patrick.e...@gmail.com>
Reply all
Reply to author
Forward
0 new messages