Help, bar chart design

HTML & CSS
1

[LEFT]Can you please help me on how to start this design of this bar chart using html, css and jquery :http://www.estetica-design-forum.com/attachments/css-forum/7197d1334080295-newbie-needs-help-widget.jpg
[COLOR=#000000][FONT=Arial]I did the bar chart with for example 25% at the end, my problem is how to display at the end of the horizontal bar like this :

[/FONT][/COLOR][COLOR=#000000][FONT=Arial]2.9Mn
16% image of the small triangle

[/FONT][/COLOR]http://imageshack.us/photo/my-images/96/barcw.jpg/
Thanks, your help is appreciated.[/LEFT]

2

Hello mlotfi :). Show us your current attempt and we will go from there. No point starting from scratch.

3

Here is what I have :

index.html :

<ul id="chart">
		<li title="25" class="red">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="80" class="blue">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="65" class="yellow">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="50" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="100" class="purple">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
	</ul>
	
	<form id="form_values" action="" method="post">
	
		<input name="" id="li_1" value="25" class="field" />
		<input name="" id="li_2" value="80" class="field" />
		<input name="" id="li_3" value="65" class="field" />
		<input name="" id="li_4" value="50" class="field" />
		<input name="" id="li_5" value="100" class="field" />
	
	</form>

…

chart.js :

$('#chart li').each(function() {
		
		var pc = $(this).attr('title');
		pc = pc > 100 ? 100 : pc;
		$(this).children('.percent').html(pc+'%');
		var ww = $(this).width();
		var len = parseInt(ww, 10) * parseInt(pc, 10) / 100;
		$(this).children('.bar').animate({ 'width' : len + 'px' }, 1500);
		
	});

from here you can see that at the end of the bar there is only for example 45%

Thanks