Google Charts With Tabs - Chart Area Incorrect

StackOverflow https://stackoverflow.com/questions/16445782

Question

Although this may seem a common problem but i was not able to find a solution to this particular problem..

I am trying to create 2 pie charts using GOOGLE CHARTING API..

The 1st Pie chart which is in the 1st TAB (default selected) shows the accurate width and height but the 2nd pie chart in the hidden tab does not show appropriate width..

Here is the fiddle...

In the Fiddle we can see the chart area in the hidden tab is less than the chart area in the active tab although the code for both the charts is the same...

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 options = {
      title: 'My Daily Activities',
  backgroundColor: '#ddd',
  chartArea: {width:500,height:200}
    };

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


chart.draw(data, options);

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


chart1.draw(data, options);
}

Update the fiddle if you can here..

Was it helpful?

Solution

I have half an answer for you. I can see what's happening, I can see a workaround, but I'm not sure yet why it's happening...

When you call .draw the vis api tries to calculate a 'best-fit' based on the dimensions of the container that it is being drawn in.

Your problem is that your container divs start off at different sizes

Change 

#content_2, #content_3 { display:none; }

to

#content_2, #content_3 { display:block; }

to see...

A workaround that fixes the problem is to 'init' the div inside the tab box by firing off the click event before drawing the chart with a

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

It looks ugly on the fiddle, but you can tidy that by playing with the display options

Here's the fiddle as a demo

Hope that helps

OTHER TIPS

You can simply make the DIV visible before invoking "draw" and then immediately after make it hidden again. For e.g.

//make div visible
chart.draw();
//make div hidden

Here is complete Working Example of Google graph with tabs 

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

<body>

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

If anybody still looking at this. I recommend just redraw the chart before activating tabs

 $("#tabs").tabs({
    beforeActivate: function (event, ui) {
        drawChart();
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top