ChartJS won't draw graph inside bootstrap tab until window resize

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/

Asked By: Carl

Source

Answer #1:

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

Answered By: Didac Montero

Answer #2:

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

Answered By: Shimanyi Valentino

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .