Sorted Bar charts using AngularJS

Creating bar charts/progress bars using HTML and CSS is very easy, we can create it using two DIV tags. Following image shows outer div in gray color and inner div in green color. Width of inner div can be set dynamically based on the required value.

42%

<style>
.outer{width:100%; background-color:#ddd; height:5px;}
.inner{width:42%; background-color:green; height:5px;}
.chart-label{color:#555; font-size:12px;}
</style>
<span class="chart-label">42%</span>
<div class="outer">
    <div class="inner"></div>
</div>

Today I tried to create sorted bar charts using Angular JS. Following chart shows number of blog posts I wrote each year. We can change the sort order by clicking the yellow buttons. The demo code is available here.

The idea is to write a blog post every Tuesday and celebrate as #blogTuesday. The chart shows how far I succeeded. :)

52 weeks per year, 52 Tuesdays, 52 blog posts? #blogTuesday
— Aravinda (@aravindavk) March 4, 2013