<div class="chart-container">
  <div class="chart-title">  
    <h2>MONKEY BUSINESS</h2>
    <p>What could we do to make more regular dudes act like monkeys? We asked a million people and here are the results:</p>
    <h3><span class="quetionsCounter">1/10  </span><span class="chart-question">More bananas</span></h3>
  <h3><span id="prev">PREV</span><span id="next">NEXT</span></h3>
  

<br />  
    
    </p>
  </div>
  <div class="chart-content">
    <div class="chart-y-axis">
      <p class="axis-value" style="bottom:300px">100&#37;</p>
      <p class="axis-value" style="bottom:240px">80&#37;</p>
      <p class="axis-value" style="bottom:180px">60&#37;</p>
      <p class="axis-value" style="bottom:120px">40&#37;</p>
      <p class="axis-value" style="bottom:60px">20&#37;</p>
      <p class="axis-value" style="bottom:0px">0&#37;</p>
    
    
    </div>
    <div class="chart-area">
      
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      
    </div>
    <div class="chart-x-axis"></div>
  </div>
</div>


<div id="surveyResults">

  <h2>MONKEY BUSINESS</h2>
    <p>What could we do to make more regular dudes act like monkeys? We asked a million people and here are the results:</p>

	<dl id="questions">
		<dt class="question">Give you bananas</dt>
		<dd><ul class="results">
			<li class="pos">Very important</li>
			<li class="percent">4.2%</li>
			<li class="pos">Quite important</li>
			<li class="percent">38.1%</li>
			<li class="pos">Not very important</li>
			<li class="percent">16.2%</li>
			<li class="pos">Not at all important</li>
			<li class="percent">3.2%</li>
			<li class="pos">I don&#039;t know</li>
			<li class="percent">0.3%</li>
		</ul>
		</dd>
		
		<dt class="question">Pay you hard cash</dt>
		<dd><ul class="results">
			<li class="pos">Very important</li>
			<li class="percent">30.9%</li>
			<li class="pos">Quite important</li>
			<li class="percent">46.3%</li>
			<li class="pos">Not very important</li>
			<li class="percent">20.6%</li>
			<li class="pos">Not at all important</li>
			<li class="percent">2.2%</li>
			<li class="pos">I don&#039;t know</li>
			<li class="percent">0.1%</li>
		</ul>
		</dd>
		<dt class="question">More respect for monkeys</dt>
		<dd><ul class="results">
			<li class="pos">Very important</li>
			<li class="percent">50.8%</li>
			<li class="pos">Quite important</li>
			<li class="percent">37.6%</li>
			<li class="pos">Not very important</li>
			<li class="percent">10.2%</li>
			<li class="pos">Not at all important</li>
			<li class="percent">1.2%</li>
			<li class="pos">I don&#039;t know</li>
			<li class="percent">0.2%</li>
		</ul>
		</dd>
		<dt class="question">Complement you on your body hair</dt>
		 <dd><ul class="results">
		 	<li class="pos">Very important</li>
		 	<li class="percent">16.3%</li>
		 	<li class="pos">Quite important</li>
		 	<li class="percent">39.8%</li>
		 	<li class="pos">Not very important</li>
		 	<li class="percent">34.2%</li>
		 	<li class="pos">Not at all important</li>
		 	<li class="percent">9.1%</li>
		 	<li class="pos">I don&#039;t know</li>
		 	<li class="percent">0.6%</li>
		 </ul>
		</dd>
		<dt class="question">Pick lots of insects from your head</dt>
		<dd><ul class="results">
			<li class="pos">Very important</li>
			<li class="percent">44.7%</li>
			<li class="pos">Quite important</li>
			<li class="percent">39.0%</li>
			<li class="pos">Not very important</li>
			<li class="percent">11.6%</li>
			<li class="pos">Not at all important</li>
			<li class="percent">3.0%</li>
			<li class="pos">I don&#039;t know</li>
			<li class="percent">1.7%</li>
		</ul>
		</dd>	

<dt class="question">Ask to see your big pink bum</dt>
<dd><ul class="results">
			<li class="neg">A very significant barrier</li>
			<li class="percent">77.1%</li>
			<li class="neg">A somewhat significant barrier</li>
			<li class="percent">16.3%</li>
			<li class="neg">Not a significant barrier</li>
			<li class="percent">4.7%</li>
			<li class="neg">Not a barrier at all</li>
			<li class="percent">1.2%</li>
			<li class="neg">I don&#039;t know</li>
			<li class="percent">0.7%</li>
		</ul>
		</dd>
<dt class="question">Take away your clothes</dt>
<dd><ul class="results">
			<li class="neg">A very significant barrier</li>
			<li class="percent">7.9%</li>
			<li class="neg">A somewhat significant barrier</li>
			<li class="percent">35.5%</li>
			<li class="neg">Not a significant barrier</li>
			<li class="percent">40.2%</li>
			<li class="neg">Not a barrier at all</li>
			<li class="percent">15.9%</li>
			<li class="neg">I don&#039;t know</li>
			<li class="percent">0.5%</li>
		</ul>
		</dd>
<dt class="question">Get a bunch of scientists to squirt shampoo into your eyes</dt>
<dd><ul class="results">
			<li class="neg">A very significant barrier</li>
			<li class="percent">20.7%</li>
			<li class="neg">A somewhat significant barrier</li>
			<li class="percent">39.2%</li>
			<li class="neg">Not a significant barrier</li>
			<li class="percent">33.7%</li>
			<li class="neg">Not a barrier at all</li>
			<li class="percent">6.0%</li>
			<li class="neg">I don&#039;t know</li>
			<li class="percent">0.4%</li>
		</ul>
		</dd>
<dt class="question">Lock you in a room with Michael Jackson</dt>
<dd><ul class="results">
			<li class="neg">A very significant barrier</li>
			<li class="percent">21.1%</li>
			<li class="neg">A somewhat significant barrier</li>
			<li class="percent">39.7%</li>
			<li class="neg">Not a significant barrier</li>
			<li class="percent">29.6%</li>
			<li class="neg">Not a barrier at all</li>
			<li class="percent">8.1%</li>
			<li class="neg">I don&#039;t know</li>
			<li class="percent">1.5%</li>
		</ul>
		</dd>
<dt class="question">How about Tarzan?</dt>
<dd><ul class="results">
			<li class="neg">A very significant barrier</li>
			<li class="percent">8.2%</li>
			<li class="neg">A somewhat significant barrier</li>
			<li class="percent">29.6%</li>
			<li class="neg">Not a significant barrier</li>
			<li class="percent">40.3%</li>
			<li class="neg">Not a barrier at all</li>
			<li class="percent">21.6%</li>
			<li class="neg">I don&#039;t know</li>
			<li class="percent">0.2%</li>
		</ul>
		</dd>
	</dl>
</div>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
} 

.chart-container {
	width: 610px;
	border: 1px none #888;
	background-color: #EFEFE1;
} 


.chart-container ul, .chart-container li {
  padding: 0; margin: 0;
  list-style: none;
}

.chart-container li {
  padding-left: 20px;
  padding-top: 4px;
  
}

.chart-title { padding: 5px 5px 10px 15px; margin: 0px; } 

.chart-title h2 {
	margin: 0px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
} 

.chart-title p { margin: 0px; color: #222; } 

.chart-question {

	text-align: left;  
}

.chart-content { height: 380px; position: relative; overflow: hidden; margin: 5px 0px 0px 0px; } 

.chart-y-axis { width: 50px; height: 315px; position: absolute; top: 0px; left: 0px; } 

.chart-y-axis p { margin: 0px 0px 0px 10px; padding: 0px 0px 0px 5px; width: 35px; position: absolute; border-bottom: 1px solid #ccc; } 

.chart-x-axis { height: 50px; position: absolute; top: 310px; left: 50px; } 

.chart-x-axis p {
	position: absolute; 
	top: 0px; 
	width: 70px; 
	color: #000; 
	text-align: center; 
	font-family: Arial, Helvetica, sans-serif; 
} 

.chart-area {
	width: 540px;
	height: 315px;
	position: absolute;
	left: 50px;
	background-color: #FFF;
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.chart-area .chart-bar {
	position: absolute;
	bottom: 0px;
	width: 75px;
	height: 0px;
	background-repeat: no-repeat;
	background-position: 50% bottom;
	background-color:#1e3d76;
} 



.chart-area .chart-bar p {
	margin: 5px 0px 0px 0px;
	text-align: center;
	color: #fff;
	display: none;
}

.chart-area .chart-bar p .over {
	margin: -20px 0px 0px 0px;
	color: #000;
	display: none;
}

p.axis-value {
	
}

#next, #prev {
	cursor: pointer;
	border: 2px solid #AAA;
	background: white;
 	-webkit-border-radius: 10px;
 	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
  	border-radius: 10px;
	padding: 6px;
	margin: 0 10px 0 0;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	 -moz-user-select: none;
	 -o-user-select: none;
	user-select: none;

}


.chart-area .chart-bar span {
	display: none;
}

.percent{
	 list-style: none;
}

.chart-container {
	display: none;
}
// Fancy annonomous function to check for jquery
;(function() {
        var init = function($)
        {
    
    // Set up all the variables I'll need later      
    var barSpacing = 30, 
    barWidth,
		highestYlabel,
		firstLabelHeight,
		chartHeight,
		chartHeightArea,
		chartScale,
		maxValue,
		valueMultiplier,
		questionCounter = 0,
    
    //Grab some info from the html and CSS to use to put the chart together
        
		chartHeight = $('.chart-area').height(),
		
		 barWidth = $('.chart-area .chart-bar').width(),
		highestYlabel = parseInt($('.chart-y-axis p').first().html()),
		
		firstLableHeight = $('p.axis-value').first().height(),
			
		chartHeightArea = chartHeight - firstLableHeight,
			
		chartScale = chartHeightArea / highestYlabel,
     
    // a bunch of arrays to hold the info pinched from the html list    
        
		driverQuestions = [],
		barAnswers = [answer1 = [],
						answer2 = [],
						answer3 = [],	
						answer4 = [],
						answer5 = [],
						answer6 = [],
						answer7 = [],
						answer8 = [],
						answer9 = [],
						answer10 = []
						];

		 

		$('.question').each(function(index){ 
		    driverQuestions.push($(this).html());

		});

		
    // Ugly way to loop though the html list and pump the info into arrays      
		for ( var i = 0; i < $('.percent').length ; i++){
					if (i >= 0 && i <= 4){
					
						answer1.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 5 && i <= 9){
					
						answer2.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 10 && i <= 14){
					
						answer3.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 15 && i <= 19){
					
						answer4.push(parseFloat($('.percent').slice(i).html()));
						}	
					else if (i >= 20 && i <= 24){
					
						answer5.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 25 && i <= 29){
					
						answer6.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 30 && i <= 34){
					
						answer7.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 35 && i <= 39){
					
						answer8.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 40 && i <= 44){
					
						answer9.push(parseFloat($('.percent').slice(i).html()));	
						}
					else if (i >= 45 && i <= 49){
					
						answer10.push(parseFloat($('.percent').slice(i).html()));	
						}
					

		}


		// First position all the elements of the chart and then call animateChart() to bring it to life
		function positionBars(){

	
		$('.chart-area .chart-bar').each(function(index){

			var barPosition = (barWidth * index) + (index * barSpacing) + barSpacing;

			$(this).css('left',barPosition + 'px');
			
			$(this).html('<p>' + barAnswers[questionCounter][index] + '&#37;</p>');
			
			if ( questionCounter >= 0 && questionCounter <= 4) {
				$('.chart-x-axis').append('<p style="left:'+ barPosition +'px;">' + $('.pos').slice(index).html() + '</p>');
			} else {
				$('.chart-x-axis').append('<p style="left:'+ barPosition +'px;">' + $('.neg').slice(index).html() + '</p>');
			}

			

			if (barAnswers[questionCounter][index] < 10 ){
				$(this).find('p').css({'margin-top':'-20px','color':'#000'});	
			} else {
				$(this).find('p').css({'margin-top':'5px','color':'#fff'});	
			}

			});
			animateChart();
						
		};


		function animateChart() {
			$('.chart-area .chart-bar').each(function(index){
				
				var revisedValue = barAnswers[questionCounter][index] * chartScale;
	
				$(this).animate({height:revisedValue},1000, function(){
					
						$(this).children('p').delay(500).fadeIn(250);
					
					});
				
				});
	
		}

    //Cause the bars to drop away in between states
          
		function resetBars() {

			$('.chart-question').html(driverQuestions[questionCounter]);

			$('.chart-area .chart-bar').each(function(){
			
				$(this).animate({height:0},1000, function(){
					
						$(this).children('p').fadeOut(250);
					
					});
				});

				$('.chart-x-axis').html('');

				$('.quetionsCounter').html((questionCounter + 1) + '/10  ');
		}


    //Add click events to next and prev buttons 
          
		$('#next').bind('click', function() {

			if(!$('.chart-area .chart-bar').is(':animated')){
				
			if (questionCounter === 9){
				questionCounter = 0;
			} else {
				questionCounter ++;
			}

			resetBars();
			
		 	positionBars();

		 	}
		});


		$('#prev').bind('click', function() {

			if(!$('.chart-area .chart-bar').is(':animated')){

			if (questionCounter === 0){
				questionCounter = 9
			} else {
				questionCounter --;
			}

			resetBars();

		  	positionBars();
		  }
		});
		
		$('#next, #prev').hover(
			function () {
			    $(this).css({'background':'#AAA','border':'2px solid #878787'});
			  }, 
			  function () {
			    $(this).css({'background':'white','border':'2px solid #AAA'});
			  }


		);

		positionBars();	
          
    // Hide the list and show the chart      

		$('#surveyResults').hide();

		$('.chart-container').fadeIn(300);
		
		};

        setTimeout(function()
        {
        if (typeof jQuery !== 'undefined')
        {
          init(jQuery);
        } else
        {
          setTimeout(arguments.callee, 60);
        }
        }, 60);
        
        
    })();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js