Bootstrap Carousel With High Charts

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">  
        
    <script src="http://code.highcharts.com/highcharts.js"></script>


<!-- <div id="container">test1</div>-->


<div class="content" >
         <div class="hero-unit hero-unit-main" >
		     <div id="mainCarousel" class="carousel slide">
		      <div class="carousel-inner">
		        <div class="item active">
					<h2 style="padding-left: 22px">Hello1</h2>
					<div id="container2" class="container-main" >This slide intentionally left blank...click for next slide that doesn't initially autoresize</div>
					<a style="margin-left: 22px" href="#" class="btn btn-primary btn-large">Hello1 &raquo;</a>
		        </div>
		        <div class="item">
					<h2 style="padding-left: 22px">Hello2</h2>
		 				<div id="container"  style="height: 540px; margin: 0 auto"></div>
					<a href="#" class="btn btn-primary btn-large">Hello2 &raquo;</a> 
		        </div>
		        <div class="item">
					<h2 style="padding-left: 22px">Hello3</h2>
		 			<div id="container3" class="container-main" ></div>
		 			<a  href="#" class="btn btn-primary btn-large">Hello3 &raquo;</a>
		          </div>
		        </div>		        
		        <a class="left carousel-control" href="#mainCarousel" data-slide="prev" >&lsaquo;</a>
		      	<a class="right carousel-control" href="#mainCarousel" data-slide="next" >&rsaquo;</a>
		 </div>
      </div> 			    
    </div>

CSS

.hero-unit-main  {
     background-color:  #fff ;   
     height: 665px;    
      padding-left: 0px;
      padding-right: 25px;
      padding-top: 10px;
      padding-bottom: 0px;
 	}
 	.container-main {
/*  		min-width: 400px; */ 
 		height: 540px; 
/*  		margin: 0 auto 20px" */
 	}

JavaScript

$(function () {
   
    var chart = new Highcharts.Chart({
        chart: {
            //renderTo: $container2[1],
            renderTo: 'container',
            height: 400
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});