Google Chart within Bootstrap 3 Nav - twitter-bootstrap-3

Question

I have a page using bootstrap 3 nav tabs and on one of the tabs I have a google timeline chart that is too far to the left. I have tried setting the chartArea.left option to different values but that doesn't seem to do anything, as well as setting different widths.
var selectedLanguage = 'en';
if ($("#selected-language") && $("#selected-language").val()) {
selectedLanguage = $("#selected-language").val();
}
google.charts.load('current', {
'packages': ['timeline'],
'language': selectedLanguage
});
google.charts.setOnLoadCallback(drawTimelineChart);
function drawTimelineChart() {
//Do ajax call to get json
var json = {
"timelineCharts": [{
"rowLabel": "Commissioned",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-18T16:25:29",
"end": "2018-07-20T10:48:42"
}, {
"rowLabel": "Pre-Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-20T10:48:42",
"end": "2018-07-20T10:48:45"
}, {
"rowLabel": "Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-20T10:48:45",
"end": "2018-09-28T14:08:03"
}, {
"rowLabel": "Pre-Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-20T10:48:45",
"end": "2018-09-28T12:22:05"
}, {
"rowLabel": "Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-09-28T12:22:05",
"end": "2018-09-28T14:08:03"
}]
};
setTimelineChartData(json);
}
function setTimelineChartData(jsonObj) {
if (jsonObj) {
var container = document.getElementById('portfolio-time-management-chart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
if (jsonObj && jsonObj.timelineCharts) {
dataTable.addColumn({
type: 'string',
id: 'Status'
});
dataTable.addColumn({
type: 'string',
id: 'Label'
});
dataTable.addColumn({
type: 'string',
role: 'Tooltip'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var hasData = false;
$.each(jsonObj.timelineCharts, function(index, timelineChart) {
if (timelineChart) {
var startDate = new Date(timelineChart.start);
var endDate = new Date(timelineChart.end);
dataTable.addRow(
[timelineChart.rowLabel, timelineChart.barLabel, timelineChart.barLabel, startDate, endDate]
);
hasData = true;
}
});
var windowHeight = $(window).height() * 0.5;
var windowWidth = $(window).width() * 0.7;
var options = {
height: windowHeight,
width: windowWidth,
chartArea: {
left: '30%'
}
};
if (hasData) {
chart.draw(dataTable, options);
}
}
}
}
.panel.with-nav-tabs.panel-tab-block {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {
color: #ffffff;
background-color: #999999;
}
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a,
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {
color: #fff;
background-color: #666666;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:focus {
color: #fff;
background-color: #2f70b1;
border-color: #2f70b1;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #fff;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
background-color: #4a9fe9;
}
.list-group-item {
color: #000000;
background-color: #e4e4e4;
padding: 0.5em;
overflow: auto;
border: 1px solid #1d3c5c;
}
.list-group-item-title {
background-color: #fff;
}
.list-group label {
margin-bottom: 0px;
}
.spacer-sml {
margin: 0;
padding: 0;
height: 2em;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid portfolio-overview-container">
<div class="col-sm-2 ">
<div class="row ">
<ul class="list-group">
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details">Side Details...</label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
</ul>
</div>
</div>
<div class="col-sm-10">
<div class="panel with-nav-tabs panel-tab-block">
<div class="panel-heading ">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" role="tab" class="" href="#portfolio-projects-tab">Projects</a></li>
<li><a data-toggle="tab" role="tab" class="" href="#portfolio-time-management-tab">Timeline Chart</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="portfolio-projects-tab" class="tab-pane fade in active">
<div class="tab-block-content ">
<div class="row ">
<div class="col-sm-12 ">
<div class="spacer-sml"></div>
</div>
<div class="col-sm-12">
<h1>
Project tab that is loaded by default but issue is with Timeline Chart tab chart being hidden
</h1>
</div>
</div>
</div>
</div>
<div id="portfolio-time-management-tab" class="tab-pane fade">
<div class="row col-xs-12">
<div class="spacer-sml"></div>
</div>
<div class="col-xs-11">
<div id="portfolio-time-management-chart" style="position:relative;"></div>
</div>
<div class="row col-xs-12">
<div class="spacer-sml"></div>
</div>
<div class="row ">
<div class="spacer-sml"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Does anyone know how I can get the full chart visible?

Answer 1

by default, google charts will follow the size of their container.
if the container is hidden when its drawn,
then it cannot determine a proper size for the specific chart elements.
need to wait until the tab is shown,
before drawing for the first time.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'Timeline Chart':
drawTimelineChart();
break;
}
});
see following working snippet...
var selectedLanguage = 'en';
if ($("#selected-language") && $("#selected-language").val()) {
selectedLanguage = $("#selected-language").val();
}
google.charts.load('current', {
'packages': ['timeline'],
'language': selectedLanguage
}).then(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'Timeline Chart':
drawTimelineChart();
window.addEventListener('resize', drawTimelineChart);
break;
}
});
});
function drawTimelineChart() {
//Do ajax call to get json
var json = {
"timelineCharts": [{
"rowLabel": "Commissioned",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-18T16:25:29",
"end": "2018-07-20T10:48:42"
}, {
"rowLabel": "Pre-Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-20T10:48:42",
"end": "2018-07-20T10:48:45"
}, {
"rowLabel": "Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-20T10:48:45",
"end": "2018-09-28T14:08:03"
}, {
"rowLabel": "Pre-Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-07-20T10:48:45",
"end": "2018-09-28T12:22:05"
}, {
"rowLabel": "Production",
"barLabel": "Actual",
"tooltip": "",
"start": "2018-09-28T12:22:05",
"end": "2018-09-28T14:08:03"
}]
};
setTimelineChartData(json);
}
function setTimelineChartData(jsonObj) {
if (jsonObj) {
var container = document.getElementById('portfolio-time-management-chart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
if (jsonObj && jsonObj.timelineCharts) {
dataTable.addColumn({
type: 'string',
id: 'Status'
});
dataTable.addColumn({
type: 'string',
id: 'Label'
});
dataTable.addColumn({
type: 'string',
role: 'Tooltip'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var hasData = false;
$.each(jsonObj.timelineCharts, function(index, timelineChart) {
if (timelineChart) {
var startDate = new Date(timelineChart.start);
var endDate = new Date(timelineChart.end);
dataTable.addRow(
[timelineChart.rowLabel, timelineChart.barLabel, timelineChart.barLabel, startDate, endDate]
);
hasData = true;
}
});
var windowHeight = $(window).height() * 0.5;
var windowWidth = $(window).width() * 0.7;
var options = {
height: windowHeight,
width: windowWidth,
};
if (hasData) {
chart.draw(dataTable, options);
}
}
}
}
.panel.with-nav-tabs.panel-tab-block {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {
color: #ffffff;
background-color: #999999;
}
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a,
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {
color: #fff;
background-color: #666666;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:focus {
color: #fff;
background-color: #2f70b1;
border-color: #2f70b1;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #fff;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
background-color: #4a9fe9;
}
.list-group-item {
color: #000000;
background-color: #e4e4e4;
padding: 0.5em;
overflow: auto;
border: 1px solid #1d3c5c;
}
.list-group-item-title {
background-color: #fff;
}
.list-group label {
margin-bottom: 0px;
}
.spacer-sml {
margin: 0;
padding: 0;
height: 2em;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid portfolio-overview-container">
<div class="col-sm-2 ">
<div class="row ">
<ul class="list-group">
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details">Side Details...</label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
<li class="list-group-item list-group-item-title text-center ">
<label class="portfolio-details"></label>
</li>
</ul>
</div>
</div>
<div class="col-sm-10">
<div class="panel with-nav-tabs panel-tab-block">
<div class="panel-heading ">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" role="tab" class="" href="#portfolio-projects-tab">Projects</a></li>
<li><a data-toggle="tab" role="tab" class="" href="#portfolio-time-management-tab">Timeline Chart</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="portfolio-projects-tab" class="tab-pane fade in active">
<div class="tab-block-content ">
<div class="row ">
<div class="col-sm-12 ">
<div class="spacer-sml"></div>
</div>
<div class="col-sm-12">
<h1>
Project tab that is loaded by default but issue is with Timeline Chart tab chart being hidden
</h1>
</div>
</div>
</div>
</div>
<div id="portfolio-time-management-tab" class="tab-pane fade">
<div class="row col-xs-12">
<div class="spacer-sml"></div>
</div>
<div class="col-xs-11">
<div id="portfolio-time-management-chart" style="position:relative;"></div>
</div>
<div class="row col-xs-12">
<div class="spacer-sml"></div>
</div>
<div class="row ">
<div class="spacer-sml"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>