Using google charts api and displaying content via ajax in cluetip

Question

I have a jsp page that uses google charts api to display data in the form of bar charts. Here is the code for that. I want to display this page in a tooltip (cluetip).
My Google Chart code works well when I directly open that page in the browser. But when I try to display it in a tooltip via ajax, there is no chart drawn in the tooltip. The tooltip is blank. I suspect because of the external javascript that is imported inside the bar chart jsp page.

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

Is it violating the same origin policy?Am I right about it? Is there any way to make it work?

EDIT#1

The Google Chrome developer Console only shows a request sent to the Web Page(which uses the Google Chart) but no request is sent to the external javascript that is imported in that page (The external javascript shown above).

EDIT#2

I think the reason for the request not being made to fetch the external javascript is that

when you load a page via ajax,any script tags in that page will not be executed. So the javascript is not getting executed.

How can we manually execute the javscript after getting the 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 a Google bar Chart will be displayed inside a tooltip(different one for each row). So on hovering each row, the URL for the chart to be fetched will be different. I want to pass this URL as a parameter. And this URL will be used in ajax to fetch the data into tooltip.

Answer 1

This is kind of a pseudo-code since I'm assuming you already have the chart.jsp page ready to go. I did my tests in PHP and it worked fine. I'm also using 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 side, where you're calling the chart.jsp inside the tooltip via 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>