Today, I've encountered an interesting problem. It seems that when an object is hidden, it breaks the properties of width and height for Google Charts. Using Bootstrap 3.3, I had a set of tabs. Each tab contained a graph of some sort. In the initial tab, the chart was being displayed correctly. However, the charts in the remaining tabs (those that were initially hidden) were 'squeezed' into much smaller size than desired.
There was no easy solution to this problem (i.e. styles didn't work). The best thing that I was able to come up with was to redraw the graph when the tab was activated:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(function () { $("a[href='#tab1']").on('shown.bs.tab', function (e) { drawTab1Chart(); }); $("a[href='#tab3']").on('shown.bs.tab', function (e) { drawTab2Chart(); }); $("a[href='#tab3']").on('shown.bs.tab', function (e) { drawTab3Chart(); }); }); </script> |
The functions contained the standard precedures for drawing the graphs:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function drawTab1Chart() { // Some raw data (not necessarily accurate) var data = google.visualization.arrayToDataTable([ ['Date', 'Data'], [null, null] ]); var options = { title: 'Patients Wellbeing', vAxis: { title: "Test Type" }, hAxis: { title: "Month" }, seriesType: "line" }; var chart = new google.visualization.ComboChart(document.getElementById('overall-chart')); chart.draw(data, options); } |
One thought on “Bootstrap Tabs with Google Charts - how to make it work?”