jquery - Google Charts With Tabs - Chart Area Incorrect -
although may seem common problem not able find solution particular problem..
i trying create 2 pie charts using google charting api..
the 1st pie chart in 1st tab (default selected) shows accurate width , height 2nd pie chart in hidden tab not show appropriate width..
here fiddle...
in fiddle can see chart area in hidden tab less chart area in active tab although code both charts 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); }
i have half answer you. can see what's happening, can see workaround, i'm not sure yet why it's happening...
when call .draw vis api tries calculate 'best-fit' based on dimensions of container being drawn in.
your problem container divs start off @ different sizes
change
#content_2, #content_3 { display:none; }
to
#content_2, #content_3 { display:block; }
to see...
a workaround fixes problem 'init' div inside tab box firing off click event before drawing chart a
$(".tabs a[title='content_2']").click() $(".tabs a[title='content_1']").click()
it looks ugly on fiddle, can tidy playing display options
here's fiddle demo
hope helps
Comments
Post a Comment