Mit Google Charts API und Anzeige von Inhalten über Ajax in Cluetip

Question

Ich habe eine JSP-Seite, die Google Diagramme API verwendet, um Daten in Form von Balkendiagrammen anzuzeigen. Here ist der Code dafür. Ich möchte diese Seite in einem Tooltip (cluetip) anzeigen.
Mein Google Diagramm-Code funktioniert gut, wenn ich diese Seite direkt im Browser öffne. Aber wenn ich versuche, es in einem Tooltip über Ajax anzuzeigen, wird im Tooltip kein Diagramm angezeigt. Die QuickInfo ist leer. Ich vermute wegen des externen Javascript, das in die JSP-Seite des Balkendiagramms importiert wird.

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

Verstößt es gegen die gleiche Herkunftsrichtlinie? Habe ich Recht damit? Gibt es eine Möglichkeit, es zum Laufen zu bringen?

EDIT # 1

Die Google Chrome-Entwickler-Konsole zeigt nur eine Anforderung an den Web-Seite gesendet (die die Google Chart verwendet), aber keine Anforderung an den externen Javascript gesendet wird, dass wird auf dieser Seite importiert (Das oben gezeigte externe Javascript).

EDIT # 2

Ich denke, der Grund für die Anfrage nicht gemacht wird, um die externe Javascript zu holen ist, dass

wenn Sie eine Seite über Ajax geladen werden, werden alle Script-Tags in die Seite wird nicht ausgeführt werden. Also wird das Javascript nicht ausgeführt.

Wie können wir das javscript manuell ausführen, nachdem wir die Daten in Ajax bekommen haben?

EDIT # 3

Eigentlich habe ich eine Tabelle mit vielen Zeilen in meinem JSP. Und jeder row contains a LINK; Wenn Sie den Mauszeiger über ein Google-Balkendiagramm bewegen, wird das Diagramm in einem Tooltip angezeigt (ein anderes für jede Zeile). Beim Schweben jeder Zeile wird die URL für das zu ladende Diagramm unterschiedlich sein. I want to pass this URL as a parameter. Und diese URL wird in Ajax verwendet, um die Daten in Tooltip zu holen.

Answer 1

Dies ist eine Art Pseudo-Code, da ich davon ausgehe, dass Sie die chart.jsp-Seite bereits fertig haben. Ich habe meine Tests in PHP gemacht und es hat gut funktioniert. Ich benutze auch QTip2.

Dies ist Ihre chart.jsp Seite:

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

Auf der anderen Seite, wo Sie die chart.jsp innerhalb des Tooltip über iframe sind Aufruf:

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