Loading Google Visualisation page into div with jQuery .load()

I have a page which displays a Google Visualisation graph:

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>

I also have a second page:

page2.html

<div id="container">

</div>

From page2.html I would like开发者_开发知识库 to use this:

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

But, this doesn't work. Which I expected. My question is: is this possible to achieve? Can you load into a div, using ajax, a page containing a graph generated by Google Charts?

Cheers!

Enter code On page1 write this script to load API dynamically

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

On ready function of page 1, call the method loadAPI();

No you cannot just load a whole page into your div. What I would suggest is extracting your script into it's own file, then calling a function to generate your graph. 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});
     });
 }

Then you can just call loadChart(element) specifying where you want to the graph to go. This way you can draw a graph on any page, like

loadChart('#container');

Make sure to include your js file in your header!

Good luck :)