Using Chart.js Using Bootstrap Carousel

Question

I am trying to add twp diagrams to the Bootstrap carousel with very little success. When I have two charts inside an internal .carousel element, they either appear on the stack or one does not load. I checked both charts side by side outside the carousel element and they work great. I also tested both graphs in another carousel, which works fine until I add two diagrams. I tried to figure this out for hours, someone please help, thanks.

<div id="hourComparison" class="carousel slide">

    <div class="carousel-inner">        
        <div class="item active">
            <div class="container">
                <div class="col-md-4 chart"><canvas id="oneHour" width="500" height="500"></canvas></div>
                <div class="col-md-8">Lorem ipsum Sunt Ut eu sed dolore incididunt irure culpa ea in adipisicing fugiat dolore tempor Ut dolor eu Ut adipisicing eu.</div>
            </div> <!-- End .container -->
        </div> <!-- End .item -->

        <div class="item">
            <div class="container">
                <div class="col-md-4 chart"><canvas id="twoHour" width="500" height="500"></canvas></div>
                <div class="col-md-8">Lorem ipsum Sunt Ut eu sed dolore incididunt irure culpa ea in adipisicing fugiat dolore tempor Ut dolor eu Ut adipisicing eu.</div>
            </div> <!-- End .container -->
        </div> <!-- End .item -->
    </div> <!-- End .carousel-inner -->

    </div> <!-- End #hourComparison -->

    var doughnutDataOne = [
    {
        value: 50,
        color:"#f47d31",
        highlight: "#f47d31",
        label: "5 Minutes"
    },
    {
        value: 100,
        color: "#82ccc8",
        highlight: "#82ccc8",
        label: "10 Minutes"
    },
    {
        value: 50,
        color: "#57bb89",
        highlight: "#57bb89",
        label: "5 Minutes"
    },
    {
        value: 50,
        color: "#facb43",
        highlight: "#facb43",
        label: "5 Minutes"
    },
    {
        value: 270,
        color: "#4c5365",
        highlight: "#4c5365",
        label: "35 Minutes"
    }

    ];

    var doughnutDataTwo = [
    {
        value: 50,
        color:"#f47d31",
        highlight: "#f47d31",
        label: "5 Minutes"
    },
    {
        value: 100,
        color: "#000",
        highlight: "#82ccc8",
        label: "10 Minutes"
    },
    {
        value: 50,
        color: "#57bb89",
        highlight: "#57bb89",
        label: "5 Minutes"
    },
    {
        value: 50,
        color: "#facb43",
        highlight: "#facb43",
        label: "5 Minutes"
    },
    {
        value: 270,
        color: "#4c5365",
        highlight: "#4c5365",
        label: "35 Minutes"
    }

    ];


    var ctx = document.getElementById("oneHour").getContext("2d");
    window.chartOne = new Chart(ctx).Doughnut(doughnutDataOne, {
    responsive: true
    });


   var ctx2 = document.getElementById("twoHour").getContext("2d");
    window.chartTwo = new Chart(ctx2).Doughnut(doughnutDataTwo, {
        responsive: true
    });