Использование google-диаграмм api и отображение содержимого через ajax в cluetip

Question

У меня есть страница jsp, которая использует диаграммы Google api для отображения данных в виде гистограмм. Here - код для этого. Я хочу отобразить эту страницу в подсказке (cluetip).
Мой код диаграммы Google хорошо работает, когда я открываю эту страницу непосредственно в браузере. Но когда я пытаюсь отобразить его во всплывающей подсказке через ajax, в всплывающей подсказке нет диаграммы. Всплывающая подсказка пуста. Я подозреваю из-за внешнего javascript, который импортируется внутри страницы jsp на гистограмме.

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

Является ли он нарушением той же политики происхождения? Я прав? Есть ли способ заставить его работать?

EDIT # 1

Google Chrome разработчика консоли только показывает запрос, отправленный на веб-страницу (которая использует таблицу Google), но никакой запрос не отправляется на внешний JavaScript что импортируется на этой странице (внешний javascript, показанный выше).

EDIT # 2

Я думаю, что причина запроса не сделал для извлечения внешнего JavaScript является то, что

при загрузке страницы с помощью Ajax, любой сценарий теги в этой странице не будет выполнен. Таким образом, javascript не выполняется.

Как мы можем вручную выполнить javscript после получения данных в ajax?

EDIT # 3

На самом деле у меня есть таблица с большим количеством строк в моем JSP. И каждый row contains a LINK; на котором, если вы наведете панель Google, диаграмма будет отображаться внутри всплывающей подсказки (по-разному для каждой строки). Таким образом, при зависании каждой строки URL-адрес диаграммы, которая будет выбрана, будет отличаться. I want to pass this URL as a parameter. И этот URL-адрес будет использоваться в ajax для извлечения данных в всплывающую подсказку.

Answer 1

Это своего рода псевдокод, так как я предполагаю, что у вас уже есть страница chart.jsp, готовая к работе. Я сделал свои тесты на PHP, и он работал нормально. Я также использую QTip2.

Это ваша страница chart.jsp:

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

С другой стороны, когда вы звоните в chart.jsp внутри всплывающей подсказки с помощью 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>