Как сделать такую гистограмму?

$( document ).ready(function() { 
	$('.p5 span').css('height','5%'); 
	$('.p6 span').css('height','6%'); 
	$('.p7 span').css('height','7%'); 
	$('.p8 span').css('height','8%'); 
	$('.p9 span').css('height','9%'); 
	$('.p11 span').css('height','11%'); 
	$('.p12 span').css('height','12%'); 
	$('.p13 span').css('height','13%'); 
	$('.p15 span').css('height','15%'); 
	$('.p17 span').css('height','17%'); 
	$('.p19 span').css('height','19%'); 
	$('.p21 span').css('height','21%'); 
	$('.p23 span').css('height','23%'); 
	$('.p25 span').css('height','25%'); 
	$('.p28 span').css('height','28%'); 
	$('.p32 span').css('height','32%'); 
	$('.p35 span').css('height','35%'); 
	$('.p39 span').css('height','39%'); 
	$('.p42 span').css('height','42%'); 
	$('.p47 span').css('height','47%'); 
	$('.p51 span').css('height','51%'); 
	$('.p55 span').css('height','55%'); 
	$('.p61 span').css('height','61%'); 
	$('.p65 span').css('height','65%'); 
	$('.p69 span').css('height','69%'); 
	$('.p73 span').css('height','73%'); 
	$('.p76 span').css('height','76%'); 
	$('.p79 span').css('height','79%'); 
	$('.p81 span').css('height','81%'); 
	$('.p84 span').css('height','84%'); 
	$('.p87 span').css('height','87%'); 
	$('.p89 span').css('height','89%'); 
	$('.p91 span').css('height','91%'); 
	$('.p93 span').css('height','93%'); 
	$('.p95 span').css('height','95%'); 
	$('.p96 span').css('height','96%'); 
	$('.p97 span').css('height','97%'); 
	$('.p98 span').css('height','98%'); 
	$('.p99 span').css('height','99%'); 
	$('.gr-line').css('width','602px'); 
	$('.violet-line').css('width','598px'); 
}, 500);

ul.xAxis{margin:0;padding:0;float:left;clear:left;display:inline;} 
ul.yAxis { 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    margin-left: -66px; 
} 
ul.xAxis li{float:left;list-style:none;width:99.5px;} 
ul.xAxis li:last-child{width:30px;margin-top:5px} 
ul.yAxis li{ 
	list-style:none; 
	height:26px; 
	text-align:right; 
	float:left; 
	clear:left; 
} 
dl#csschart, dl#csschart dt, dl#csschart dd{ 
	margin:0; 
	padding: 0 3px; 
} 
.progress-bar { 
	background: url(http://iscr.ru/photo/1478751331_bg_chart.png) no-repeat; 
    width: 651px; 
    background-size: contain; 
    height: 251px; 
    margin: 0 auto; 
} 
.point { 
    background: url(http://iscr.ru/photo/1478751584_bg_point.png) repeat-x; 
    width: 602px; 
    background-position: left bottom; 
    margin-top: 242px; 
    height: 5px; 
    margin-left: -3px; 
    position: absolute; 
    z-index: 100; 
} 
.gr-line { 
    background: url(http://iscr.ru/photo/1478751479_bg_line.png) no-repeat; 
    width: 0; 
	transition: width 1.5s ease-out 0.5s; 
    margin-top: 188px; 
    height: 5px; 
    margin-left: -1px; 
    position: absolute; 
    z-index: 101; 
} 
.violet-line { 
    background: url(http://iscr.ru/photo/1478751427_violet_line.png) no-repeat; 
    width: 0; 
    transition: width 1.5s ease-out 0.5s; 
    height: 163px; 
    margin-top: 56px; 
    margin-left: -1px; 
    position: absolute; 
    z-index: 101; 
} 
dl#csschart dt{ 
	display:none; 
	} 
dl#csschart dd { 
    position: relative; 
    float: left; 
    display: inline; 
    width: 13px; 
    padding: 0 1px; 
    height: 247px; 
	bottom: 0; 
} 
dl#csschart span{ 
	position:absolute; 
	display:block; 
	width:10px;	 
	bottom:0; 
	left:0;	 
	z-index:1; 
	color:#555; 
	text-decoration:none; 
	} 	 
dl#csschart span{ 
	height: 0; 
	transition: height 1s ease-out 0.5s; 
	background:url(http://iscr.ru/photo/1478751392_bar.png) repeat-y; 
}  
dl#csschart .sub{ 
	margin-left:-33px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="progress-bar"> 
<ul class="yAxis"> 
	<li> </li> 
	<li> </li> 
	<li> </li> 
	<li> </li> 
	<li> </li> 
	<li> </li> 
	<li> </li> 
	<li>Затраты*</li> 
	<li>Клиенты</li> 
	<li>Прибыль</li> 
 
</ul> 
	<dl id="csschart"> 
		<div class="point"></div> 
		<div class="gr-line"></div> 
		<div class="violet-line"></div> 
		<dd class="p5"><span></span></dd> 
		<dd class="p5"><span></span></dd> 
		<dd class="p6"><span></span></dd> 
		<dd class="p7"><span></span></dd> 
		<dd class="p8"><span></span></dd> 
		<dd class="p9"><span></span></dd> 
		<dd class="p11"><span></span></dd> 
		<dd class="p12"><span></span></dd> 
		<dd class="p13"><span></span></dd> 
		<dd class="p15"><span></span></dd> 
		<dd class="p17"><span></span></dd> 
		<dd class="p19"><span></span></dd> 
		<dd class="p21"><span></span></dd> 
		<dd class="p23"><span></span></dd> 
		<dd class="p25"><span></span></dd> 
		<dd class="p28"><span></span></dd> 
		<dd class="p32"><span></span></dd> 
		<dd class="p35"><span></span></dd> 
		<dd class="p39"><span></span></dd> 
		<dd class="p42"><span></span></dd> 
		<dd class="p47"><span></span></dd> 
		<dd class="p51"><span></span></dd> 
		<dd class="p55"><span></span></dd> 
		<dd class="p61"><span></span></dd> 
		<dd class="p65"><span></span></dd> 
		<dd class="p69"><span></span></dd> 
		<dd class="p73"><span></span></dd> 
		<dd class="p76"><span></span></dd> 
		<dd class="p79"><span></span></dd> 
		<dd class="p81"><span></span></dd> 
		<dd class="p84"><span></span></dd> 
		<dd class="p87"><span></span></dd> 
		<dd class="p89"><span></span></dd> 
		<dd class="p91"><span></span></dd> 
		<dd class="p93"><span></span></dd> 
		<dd class="p95"><span></span></dd> 
		<dd class="p96"><span></span></dd> 
		<dd class="p97"><span></span></dd> 
		<dd class="p98"><span></span></dd> 
		<dd class="p99"><span></span></dd> 
</dl> 
<ul class="xAxis"> 
	<li>Старт</li> 
	<li>1</li> 
	<li>2</li> 
	<li>3</li> 
	<li>4</li> 
	<li>5</li> 
	<li>6</li> 
</ul> 
</div>