Using google diagram api and displaying content via ajax in cluetip

Question

I have a jsp page that uses google maps api to display histogram data. Here is the code for this. I want to display this page in a tooltip ( cluetip ).
My google chart code works well when I open this page directly in a browser. But when I try to display it in a tooltip via ajax, there is no chart in the tooltip. The tooltip is empty. I suspect due to external javascript that is imported inside the jsp chart page.

<script type="text/javascript" src="https://www.google.com/jsapi"></script 

Is this a violation of the same origin policy? I'm right? Is there any way to make it work?

EDIT # 1

The Google Chrome Developer Console displays only the request sent to the web page (which uses the Google chart), but no request is sent to the external javascript that is imported on this page (External javascript shown above).

EDIT # 2

I think the reason the request was not made to get external javascript is because

when you load the page via ajax, any script tags on this page will not be executed. Therefore, javascript is not executed.

How can we manually execute javscript after receiving data in ajax?

Edit # 3

Actually, I have a table with many rows in my JSP. And each row contains a LINK ; on which, if you hover over the Google panel, the chart will be displayed inside the tooltip (differently for each line). Thus, when each line freezes, the URL of the chart to be selected will be different. I want to pass this URL as a parameter. And that url will be used in ajax to retrieve the data in a tooltip.

Answer 1

This is a kind of pseudo code, as I assume that you already have a chart.jsp page ready to go. I did my tests in PHP and it worked fine. I also use QTip2 .

This is your chart.jsp page:

 <script type="text/javascript" src="http://www.google.com/jsapi"></script> int foo = Integer.parseInt(request.getParameter("foo")); switch(foo) { case 1: print <script> google.load('visualization', '1', {packages:['corechart']}); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }; var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); chart.draw(data, options); } google.setOnLoadCallback(drawChart); </script> break; ... } <div id="visualization"></div> 

On the other hand, where you call chart.jsp inside the tooltip via an iframe:

 <script> $(function() { $('.tip').qtip({ content: function(){ var rel = $(this).attr('rel'); return $('<iframe id="tip" frameBorder="0" src="chart.jsp?foo='+ rel +'" />') }, hide: 'unfocus, click' }); }); </script> <a class="tip" href="javascript:void(0)" rel="1">Hover</a>