Home > General Stuff > Neat CSS based horizontal bar charts

Neat CSS based horizontal bar charts

There’s plenty of examples of the web of how to do these. This is mine, based on some of them with some tweaking by me to add the drop shadows for webkit based browsers.

Here’s my code:

<html>
<head>

<style type="text/css" media="screen">

.bar {
 margin: 1px 1px 5px 1px;
 height: 25px;
 -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #000;
 }

.red {
 background-color:red;
 }

.green {
 background-color:green;
 }

.blue {
 background-color:blue;
 color:white;
 }

.indigo {
 background-color:indigo;
 color:white;
 }

</style>

</head>
<body>

<div>   
 <p>CPU Usage by Job</p>
 <div style="bar red" width: 95%">S3CMS56</div>
 <div style="bar green" width: 85%">S3SUB56</div>
 <div style="bar yellow" width: 25%">ITMTEMS</div>
 <div style="bar indigo" width: 99%">ANOTHER</div>
</div>

</body>
</html>

Now I have to figure out if I want to spend the time to integrate this into my iPhone web application or do something else.

Advertisements
Categories: General Stuff
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: