ChartJS won't draw graph inside bootstrap tab

Question

I'm using bootstrap's tabs with chartjs charts inside every tab.

One problem that have occurred though is that the graph canvas wont be drawn until i resize the browser window. And this is happening in both latest Chrome and Firefox.

---

I've been trying different solutions as drawing the graph after the tab is changed but with no results.

Unfortunately I was unable to duplicate the problem in jsfiddle, somehow it seems to work there. But there's pretty much all the code, besides the html5 boilerplate.

Does anyone know possibly why this behavior happens? Thanks!

/**
 * ChartJS using JSON data and moment.js for time display
 * Code is quite ugly due to experimentation
 */

function getJSON(){

    $.getJSON( "data.json", function(data){
        var dataArray = [];
        console.log(data);
        var series = {};

        for (var x in data.Series) {
            var dates = [];
            var values = [];
            // Loop across all the measurements for every serie.
            for (var i = 0; i < data.Series[x].length; i++) {
                var obj = data.Series[x][i];
                dates.push(moment(obj.Date).format("MMMM Mo"));
                values.push(obj.Value);
            }
            // Keep the list of dates and values by serie name.
            series[x] = {
                dates: dates,
                values: values
            };
        }
    //some debug stuff
    console.log(series.height.dates);
    console.log(series.height.values);

    var dataArray = {
        labels: series.height.dates,
        datasets: [
        {
            label: "Height",

            strokeColor: "rgb(26, 188, 156)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: series.height.values
        }
        ]
    };

    function chartFunc(dataArray) {

        var ctx = document.getElementById("heightChart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(dataArray, { 
            scaleShowGridLines : true, 
            bezierCurve : true, 
            bezierCurveTension : 0.4, 
            datasetStroke : false, 
            fillColor: "rgba(0,0,0,0)", 
            datasetFill : false,
            responsive: true,
            showTooltips: true,
            animation: false,
        }); 
    } //chartFunc

    chartFunc(dataArray);

    }); //JQ getJSON

}//getJSON


$( document ).ready(function() {

    getJSON();

    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        console.log("TAB CHANGED");
    });

});

http://jsfiddle.net/woqsazau/1/

Answer 1

The panels accessed by the tabbed panes defined should have the attribute active:

<ul>
  <li role="presentation" class="active col-sm-3">
    <a href="#tab3primary" data-toggle="tab">Sample</a>
  </li>
</ul>

<div class="tab-pane fade in active" id="tab3primary"> 
  <canvas>---displays the image here ---</canvas>
</div>

This is the loading the graph

Answer 2

In my case I was using ChartJs inside a bootstrap tab inside a bootstrap modal. The problem in my case was the modal, and not the tab. The code related with Chartjs has to be set into

$('#modal').on('shown.bs.modal', function (event) {
  $.getJSON(http://whatever.com/file.js, function( data ) {
    var ctx = document.getElementById("heightChart").getContext("2d");
    window.myNewChart = new Chart(ctx).StackedBar(data,  {
      responsive : true,
      animation: true,
      showScale: true,
      multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
    });

  });
});

I have found a hint on this other issue: Bootstrap Modal with Chart.js linechart