ansaurus

Question

Loading Google Visualizations via AJAX in jQueryUI tabs

Answer 1

+1 A:

Your pages that will be used as tabs should not have HTML, HEAD or BODY tags. I'm pretty sure they should just exist as raw HTML.

EDIT

Okay, here's what the index.php HEAD section should look like (the rest of the page remains the same):

<head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript" src="/ui/js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="/ui/js/jquery-ui-1.8.2.custom.min.js"></script> 
    <script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.tabs.js"></script> 
    <script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.core.js"></script> 
    <link type="text/css" href="/ui/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> 
    <script type='text/javascript' src='http://www.google.com/jsapi'&gt;&lt;/script&gt; 
    <script type="text/javascript"> 
        $(document).ready(function () {
            $("#tabs").tabs({
                ajaxOptions: {
                    error: function (xhr, status, index, anchor) {
                        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
                    }
                }
            });
        });
        google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });   
    </script> 
<title></title> 
</head>

And here's what lazarus.php should look like:

<script type='text/javascript'>
     var data = new google.visualization.DataTable();
     data.addColumn('date', 'Date');
     data.addColumn('number', 'Sold Pencils');
     data.addColumn('string', 'title1');
     data.addColumn('string', 'text1');
     data.addColumn('number', 'Sold Pens');
     data.addColumn('string', 'title2');
     data.addColumn('string', 'text2');
     data.addRows([
      [new Date(2008, 1, 1), 30000, undefined, undefined, 40645, undefined, undefined],
      [new Date(2008, 1, 2), 14045, undefined, undefined, 20374, undefined, undefined],
      [new Date(2008, 1, 3), 55022, undefined, undefined, 50766, undefined, undefined],
      [new Date(2008, 1, 4), 75284, undefined, undefined, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
      [new Date(2008, 1, 5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, undefined, undefined],
      [new Date(2008, 1, 6), 33322, undefined, undefined, 39463, undefined, undefined]
    ]);

     var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
     chart.draw(data, { displayAnnotations: true });
 </script>

<div id='chart_div' style='width: 700px; height: 240px;'></div>

This worked for me.

Lazarus 2010-07-29 15:08:51

Implemented that suggestion as a new tab. Fails worse. :(

yc 2010-07-29 15:14:53

I still see the same tab1.php on your sample site. Can you post the version without the HTML, HEAD and BODY tags so that I can see how it's failing.

Lazarus 2010-07-29 15:16:39

You'll need to move the existing tags in the tab1.php HEAD into the main page HEAD. Remember, the tab content will be injected into the main page so needs to fit within the BODY tags with all the limitations therein.

Lazarus 2010-07-29 15:23:37

Doesn't do the trick either. I tried just leaving the <div> tag into which the google js injects the visualization on the tab, even that didn't work. Even if that did work, I need the data to be specified on the tab end, not the head of the main document

yc 2010-07-29 16:12:23

Sorry @yc but you aren't following what I've said. Your tab1.php must be just the code in my answer. No `<html></html>` tags, no `<head></head>` tags, and no `<body></body>` tags. Any CSS files you need to load along with any other scripts that are needed, should be loaded in your index.php header.

Lazarus 2010-07-29 18:19:16

I left tab1.php the same; I created a Lazarus tab trying exactly what you're suggesting. That shouldn't even work in theory, since it needs the designated <div> tag to insert the chart into; but I tried both ways. Still nothing.

yc 2010-07-30 01:32:44

@yc - See revised answer above. Proven working.

Lazarus 2010-07-30 07:49:09

!!! Thank you! I swear, I'd tried every iteration imaginable, and nothing worked. I might go around your various past answers and upvote them as well.

yc 2010-07-30 12:21:14

@yc - Absolutely not necessary, I knew you were close and it had to work. Enjoy! Don't up vote me, go find a question or two to answer :)

Lazarus 2010-07-30 12:33:41

ansaurus

tags:

views:

answers:

Loading Google Visualizations via AJAX in jQueryUI tabs

related questions