Chargement Google Page de visualisation en div avec jQuery .load()

Question

J'ai une page qui affiche un graphique de visualisation Google:

page1.html

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    // Added data 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 900, height: 400}); 
    } 
</script> 

J'ai aussi une deuxième page:

page2.html

<div id="container"> 

</div> 

De page2.html Je voudrais utiliser ceci:

$('#container').load("page1.html"); 

Mais, cela ne fonctionne pas. Ce que j'attendais. Ma question est la suivante: est-ce possible? Pouvez-vous charger dans un div, en utilisant ajax, une page contenant un graphique généré par Google Charts?

À la votre!

Answer 1

Non, vous ne pouvez pas charger une page entière dans votre div. Ce que je suggère est d'extraire votre script dans son propre fichier, puis d'appeler une fonction pour générer votre graphique. So..first

function loadChart(element) { 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(function() { 
      var data = new google.visualization.DataTable(); 
      // Added data 

      var chart = new google.visualization.LineChart(document.getElementById(element)); 
      chart.draw(data, {width: 900, height: 400}); 
    }); 
} 

Ensuite, vous pouvez simplement appeler loadChart(element) spécifiant où vous voulez le graphique pour aller. De cette façon, vous pouvez dessiner un graphique sur n'importe quelle page, comme

loadChart('#container'); 

Assurez-vous d'inclure votre fichier js dans votre en-tête!

Bonne chance :)

Answer 2

Entrez le code sur page1 écrire ce script pour charger dynamiquement API

<script type="text/javascript"> 
     var chartLoaded = false; 
     function loadAPI() 
     {    
      var script = document.createElement("script"); 
      script.src = "http://www.google.com/jsapi?callback=loadChart"; 
      script.type = "text/javascript"; 
      document.getElementsByTagName("head")[0].appendChild(script); 
     } 

     function loadChart() 
     { 
      google.load("visualization", "1", { packages: ["corechart"], "callback": loaded }); 
     } 

     function loaded() 
     { 
      chartLoaded = true; 
      //alert('loaded. Now you can load the chart'); 
      drawChart(); 
     } 

     function drawChart() 
     { 
      if (!chartLoaded) 
      { 
       alert('chart api not loaded yet.'); 
       return; 
      } 
      else 
       alert('chart api has loaded.'); 

      var data = new google.visualization.DataTable(); 

      data.addColumn('string', 'Years'); 
      data.addColumn('number', 'sales'); 

      data.addColumn('number', 'Expenses'); 

      data.addRows([ 
           ['2004', 1000, 400], 
           ['2006', 2500, 100], 
           ]); 

      var options = { 
       title: 'Company Performance', 
       vAxis: { title: 'Year', titleTextStyle: { color: 'red'} } 
      }; 

      var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } 
    </script> 

En fonction de prêt page 1, appelez la méthode loadAPI();