title: Bootstrap carousel has conflict with morris.js chart?
body: <p>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.</p>
  
  <p>Here is part of my code.</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
  &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;!-- Carousel items --&gt;
  &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;
          &lt;div id="A-lineChart" style="height:250px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;div id="B-lineChart" style="height:250px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;div id="C-lineChart" style="height:250px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Carousel nav --&gt;
  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('.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 &lt; 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']
          });
  
      }
  });
  
  &lt;/script&gt;
  </code></pre>