CSS BarCharts


CSS Barcharts

Here is the example for CSS bar Charts

<html>
<head>
<style type=’text/css’>

div.chart_div {
border: 1px solid #ccc;
width: 125px;
margin: 2px 5px 2px 0;
padding: 1px;
float:  left;
background: white;
}
div.chart_div > div {
background-color: #99CCFF;
height: 12px
}

</style>
</head>

<body>

<b>2010 JOB MARKET</b>

<div style=’clear:both;’>
<div style=’float:left;width:150px;’>Developers</div>
<div style=’float:left;width:150px;’><div class=’chart_div’> <div style=’float:left;width:90%’></div> </div><div style=’float:left;width:15px;’>90%</div>
</div>
<div style=’clear:both;’>
<div style=’float:left;width:150px;’>Administrators</div>
<div style=’float:left;width:150px;’><div class=’chart_div’> <div style=’float:left;width:55%’></div> </div><div style=’float:left;width:15px;’>55%</div>
</div>
<div style=’clear:both;’>
<div style=’float:left;width:150px;’>Designers</div>
<div style=’float:left;width:150px;’><div class=’chart_div’> <div style=’float:left;width:70%’></div> </div><div style=’float:left;width:15px;’>70%</div>
</div>
<div style=’clear:both;’>
<div style=’float:left;width:150px;’>Project Management</div>
<div style=’float:left;width:150px;’><div class=’chart_div’> <div style=’float:left;width:40%’></div> </div><div style=’float:left;width:15px;’>40%</div>
</div>
</body>
</html>

OUTPUT of the HTML code is as follows ….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s