Bootstrap carousel has conflict with morris.js chart?

Question

I am using morris.js to plot charts and I would like to show these charts by bootstrap carousel, however Firefox stops responding if I do so. They can work well separately but will crash if being put together. firebug told me there is something to do with Raphael library, but I still cannot figure out. Anyone out there had bumped into the similar problem and know how to solve this? Thanks.

Here is part of my code.

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
    <div class="active item">
        <div id="A-lineChart" style="height:250px;"></div>
    </div>
    <div class="item">
        <div id="B-lineChart" style="height:250px;"></div>
    </div>
    <div class="item">
        <div id="C-lineChart" style="height:250px;"></div>
    </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<script>
$('.carousel').carousel({
    interval: 1000
});

$.post('/my/handler.json',{ 
    parameter:value},
    function(data){
    if(data.hasOwnProperty('error')){
        alert('error');
    }
    else{
        var r = data['results']
        var AData = new Array();
        var BData = new Array();
        var CData = new Array();
        for(var i = 0; i < r.length; i++){
            d = r[i];
            col = {'date':date, 'A': A};
            AData.push(col);
            col = {'date':date, 'B': B};
            BData.push(col);
            col = {'date':date, 'C': C};
            CData.push(col);
        }
        new Morris.Line({
            element: 'A-lineChart',
            data: AData,
            xkey: 'date',
            ykeys: ['A'],
            labels: ['A']
        });
        new Morris.Line({
            element: 'B-lineChart',
            data:BData,
            xkey:'date',
            ykeys:['B'],
            labels:['B']
        });
        new Morris.Line({
            element: 'C-lineChart',
            data:CData,
            xkey:'date',
            ykeys:['C'],
            labels:['C']
        });

    }
});

</script>

Answer 1

This is the same issue as when using tabs. I would assume that the first graph shows up (if not, you may have multiple issues), but none of the graphs after that render once they are called upon in the carousel. The charts are drawn on document.ready, but since they are in a carousel they are not drawn because they are display:none until called upon.

This has been solved in another thread.

You'll have to put together a function that uses .redraw() See working fiddle here: http://jsfiddle.net/b3rgstrom/vbfzr/

You should be able to piece together something based off of what you find in the resources I provided. I hope this helps!

Answer 2

This is not the perfect solution but this will work. insert active class to <div class="item active" id="graphElemnt>

then remove that class "active"

<script type="text/javascript"> $(document).ready(function () { setTimeout(function () { $('#graphElemnt').removeClass("active"); //your code to be executed after 1 seconds }, 5000); }) </script>

keeping the active class only for one item remove the class from the rest.