javascript - ChartJS won't draw graph inside bootstrap tab until window resize - Stack Overflow

admin管理员组

文章数量:1315252

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

});

/

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/woqsazau/1/

• javascript
• jquery
• html
• twitter-bootstrap
• chart.js

Share Improve this question Follow asked Oct 3, 2014 at 11:48 CarlCarl 11311 silver badge1111 bronze badges 3

• Instead of console.log("TAB CHANGED");, you need to call whatever the charting library's "redraw" method is. – cvrebert Commented Oct 3, 2014 at 20:32
• Hi @carl i'm having the same issue, could you resolved it? Thanks – Agustin Haller Commented Oct 28, 2014 at 21:43
• Hey @AgustinHaller I'm sorry to say I have not solved it yet. I am currently working on other projects. – Carl Commented Nov 19, 2014 at 15:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./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

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

本文标签： javascriptChartJS won39t draw graph inside bootstrap tab until window resizeStack Overflow