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 ….
