Control to render a flow chart - html

Question

This might be a very silly question but here goes nothing: is there any asp net control, ajax control toolkit or html/css tag to create something like a radiobuttonlist, horizontally aligned with all radiobuttons connected by a line or dotted line? I would have uploaded a picture but I lost all my reputation on a previous bounty and it seems I have to have at least 10 rep to upload an image.
Basically, I have a web form in which the user inputs some data and then that data has 4 steps: draft, completed, sent to approval, approved. I would like to have these 4 steps at the top of the page and based on the current status, check the appropriate status on that ribbon.
UPDATE:
A picture's worth a 1000 words so therefore this is what I need:
And also this control should be "controlled" in the code-behind.

Answer 1

You can easily make this with html/css.
<div class="bubble active"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
And some basic css
.bubble
{
border-radius:50%;
height:40px;
width:40px;
background: #aaa;
display:inline-block;
margin:0 -3px;
}
.bubble.active
{
background:red;
}
.connector
{
display:inline-block;
height:3px;
width:10%;
background: #aaa;
vertical-align:middle;
margin-top:-30px;
}
Check out this fiddle. Just add/remove the active class to the bubbles at will. And you can also add a done class or something.