Integrate Dygraph into Twitter's Bootstrap Carousel element

Question

I'm trying to have a slide carousel for displaying different plots in my website. The plots are done with Dygraph. I can get one of the plots to show, but when I slide over to the left or the right, the other one doesn't show. Only the plot I make active is shown. Is this some canvas drawing conflict between bootstrap carousel/dygprah ?

Has anybody solved this problem? If I make first item active it will show first plot, but not second one when I slide, and vice-versa if I make second item active. More curious even, if I make both of them "active" they will both show at the same time (one on top of the other) but by then sliding around, I correctly get both plots shown in their right places. Here is the code for my carousel:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
            <div class="item active" id="plot1" style="height:300px;"></div>
            <div class="item" id="plot2" style="height:300px;"></div>
        </div>
        <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>

And the script generating the dygraph plots:

<script type="text/javascript" charset="UTF-8">
    $(function() {
        var plotdiv = document.getElementById("plot1");
        new Dygraph(plotdiv,csvdata,{});
        plotdiv = document.getElementById("plot2");
        new Dygraph(plotdiv,csvdata, {});
        return true;
    })
</script>

Thanks for any help

Answer 1

You're probably running into this issue: http://code.google.com/p/dygraphs/issues/detail?id=238

Star it to receive updates and increase the priority of a fix. A workaround is to call g.resize() on the dygraph object when it becomes visible to force it to recompute its plotting area.