Google Chart within Bootstrap 3 Nav

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

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

    

        


            

                

                    Side Details...
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                

            
        
    
    

        

            

                

                    
Projects

                    
Timeline Chart
                
            
            

                

                    

                        

                            

                                

                                    

                                
                                

                                    

                                        Project tab that is loaded by default but issue is with Timeline Chart tab chart being hidden