Utilizzo di google maps api e visualizzazione di contenuti tramite ajax in cluetip

Question

Ho una pagina jsp che utilizza google maps api per visualizzare i dati sotto forma di grafici a barre. Here è il codice per questo. Voglio visualizzare questa pagina in un suggerimento (cluetip).
Il mio codice grafico Google funziona bene quando apro direttamente quella pagina nel browser. Ma quando provo a visualizzarlo in un tooltip tramite ajax, non vi è alcun grafico disegnato nel tooltip. Il suggerimento è vuoto. Sospetto a causa del javascript esterno che viene importato all'interno della pagina jsp del grafico a barre.

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

È violare la stessa politica di origine? Ho ragione? C'è un modo per farlo funzionare?

EDIT # 1

Il Google Chrome Console per gli sviluppatori mostra solo una richiesta inviata alla pagina Web (che utilizza la Carta di Google), ma nessuna richiesta viene inviata al JavaScript esterno che è importato in quella pagina (il javascript esterno mostrato sopra).

EDIT # 2

Penso che la ragione per la richiesta di non essere fatta per andare a prendere il JavaScript esterno è che

quando si carica una pagina tramite la tecnologia AJAX, eventuali tag di script in quella pagina non sarà effettuato . Quindi il javascript non viene eseguito.

Come possiamo eseguire manualmente il javscript dopo aver ottenuto i dati in ajax?

EDIT # 3

In realtà ho una tabella con molte righe nel mio JSP. E ogni row contains a LINK; su cui se passi il mouse su una barra di Google, il grafico verrà visualizzato all'interno di un suggerimento (diverso per ogni riga). Quindi, al passaggio del mouse su ciascuna riga, l'URL per il grafico da recuperare sarà diverso. I want to pass this URL as a parameter. E questo URL verrà utilizzato in ajax per recuperare i dati in tooltip.

Answer 1

Questo è un pseudo-codice poiché suppongo che tu abbia già la pagina chart.jsp pronta per l'uso. Ho fatto i miei test in PHP e ha funzionato bene. Sto anche usando QTip2.

Questa è la pagina 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> 

D'altra parte, dove si sta chiamando il chart.jsp all'interno del tooltip tramite 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>