CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
xBoarder
xBoarder

Reputation:

jQuery load - Google visualizations page

I have a page with a few links and a div, on the same page that I will load other content into. Some of that content is google visualizations charts.

Just as a test, I popped in the google line chart code. The page loads well on it's own, but when I try to load it into div (using jQuery), it doesn't work. Firefox says transfering data from google.com and does nothing, and IE 6 has a JS error saying googleis undefined.

I don`t see why this would be a problem, but the page is on an intranet...if this helps troubleshooting.

Thanks for any and all help in advance..

Here is the code that loads the mainContent.html file into the div.

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#A2W").click(function(){
                $("#loadContent").load("mainContent.html");
            });
        }); 
    </script>

Contents of the mainContent.html

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["linechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Upvotes: 0

Views: 1850

Answers (1)

NickFitz
NickFitz

Reputation: 35031

Trying to stuff an entire HTML page into a div, which is already part of an HTML page, is a recipe for disaster. You'll finish up with the browser trying to work out what to do with all the things that are in the wrong place. Take the <head> element you just inserted, for example - should it try to move it up? It can't stay where it is, as that makes no sense. If it moves it under the original <html>, should it replace the existing <head> element?

Then what about the <body> It's already got a <body>; should it throw that away? Ah, but it can't because then it throws away the <body> inside the <html> inside the <div>...

Suffice to say that a browser's behaviour when you do something like this is completely undefined, and it probably just throws its hands up in despair and does nothing.

Upvotes: 1

Related Questions