Loading Google Visualizations via AJAX in jQueryUI tabs

I'm trying to use jQueryUI tabs, loading the Tabs via AJAX.

The problem I'm having is with Google Visualizations placed on those tabs -- they don't appear when retrieved via AJAX.

I've setup a simple demonstration:

http://htmlto.com/ui/index.php is the tab page. Tab 1 should load the page seen here: http://htmlto.com/ui/tab1.php

But, it doesn't. I've seen similar solutions to this problem that involve altering the AJAX call, except, my AJAX calls are part of the jQueryUI, so I need a solution that plays well with their setup.

I'll be loading many different, dynamically generated visualizations; the data populating needs to take place on the tab, rather than the footer of the main page, otherwise the load time will be untenable.

What should I do?

Upvotes: 2

Answers (2)

M Maavia

Reputation: 340

Work For me

<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {


    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
    ]);

    var data1 = google.visualization.arrayToDataTable([
        ['Tasks', 'Hours per Day'],
        ['Works',     12],
        ['Eats',      20],
        ['Commutes',  21],
        ['Watch TVs', 12],
        ['Sleeps',    17]
    ]);
    var options = {'title':'Score Chart',
        'width':600,
        'height':300};



    $(".tabs a[title='content_2']").click()
    $(".tabs a[title='content_1']").click()

    var chart = new      google.visualization.BarChart(document.getElementById('chart'));


    chart.draw(data, options);


    var chart1= new      google.visualization.BarChart(document.getElementById('chart1'));


    chart1.draw(data1, options);

}





// When the document loads do everything inside here ...
$(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();

    });

});
</script>


<div id="tabbed_box_1" class="tabbed_box">
<br />
<div class="tabbed_area">
    <ul class="tabs">
        <li><a href="#" title="content_1" class="tab active">Tab1</a></li>
        <li><a href="#" title="content_2" class="tab">Tab2</a></li>
        <li><a href="#" title="content_3" class="tab">Tab3</a></li>
    </ul>
    <div id="content_1" class="content">
        <div id="chart"></div>
    </div>
    <div id="content_2" class="content">
        <div id="chart1"></div>
    </div>
    <div id="content_3" class="content">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
    </div>
</div>

Upvotes: 0

Lazarus

Reputation: 43064

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'></script> 
    <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.

Upvotes: 4

Loading Google Visualizations via AJAX in jQueryUI tabs

Answers (2)

Related Questions