We help IT Professionals succeed at work.

CSS flowchart

jaxstorm
jaxstorm asked
on
1,469 Views
Last Modified: 2012-05-11
I need a very simply, straightforward CSS/HTML flowchart in the format below:


Node1
    |
Node2
    |
Node3
    |
Node4
    |
Node5
    |
Node6

I would guess someone has already done this before, so wondering if anyone could share their code
Comment
Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Here is the screenshot, I forgot to upload it:
Screenshot
Top Expert 2010

Commented:
I've written a simple example for you based on one that we've used before but the link below might be useful as it contains variety of options that you can choose from and they are all CSS based, Also my code was based on one of their examples

http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and-techniques/

Cheers!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple CSS Chart</title>
    <style type="text/css">
        div.progress-container {
          border: 1px solid #ccc; 
          width: 100px; 
          margin: 2px 5px 2px 0; 
          padding: 1px; 
          background: white;
        }

        div.progress-container > div {
          background-color: #313183; 
          height: 12px
        }
        .ctitle {
            font:normal 11px Tahoma, Arial, Helvetica, Serif;
        }
    </style>
</head>
<body>
<div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 95%"></div>
    </div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 40%"></div>
    </div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 78%"></div>
    </div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 19%"></div>
    </div>
</div>
</body>
</html>

Open in new window

Top Expert 2010

Commented:
Apologies as I seem to have misunderstood your question for a CSS charts not flowcharts.

I've also included a comprehensive CSS flow chart example below

Cheers!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>CSS Flow Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
        <!-- 
        h1
        {
            width: 580px;
            font-family: verdana,arial,helvetica,sans-serif;
            font-size: 18px;
            text-align: center;
            margin: 40px auto;
        }
        .container
        {
            width: 580px;
            font-family: verdana,arial,helvetica,sans-serif;
            font-size: 11px;
            text-align: center;
            margin: auto;
        }
        .container a
        {
            display: block;
            color: #000;
            text-decoration: none;
            background-color: #f6f6ff;
        }
        .container a:hover
        {
            color: #900;
            background-color: #f6f6ff;
        }
        .no1
        {
            width: 190px;
            line-height: 60px;
            border: 1px solid #000;
            margin: auto;
        }
        .no1 a
        {
            height: 60px;
        }
        .line1
        {
            font-size: 0;
            width: 1px;
            height: 20px;
            color: #fff;
            background-color: #000;
            margin: auto;
        }
        .line2
        {
            font-size: 0;
            width: 424px;
            height: 1px;
            color: #fff;
            background-color: #000;
            margin: auto;
        }
        .line3
        {
            font-size: 0;
            display: inline;
            width: 1px;
            height: 20px;
            color: #fff;
            background-color: #000;
            margin-left: 78px;
            float: left;
        }
        .line4, .line5, .line6
        {
            font-size: 0;
            display: inline;
            width: 1px;
            height: 20px;
            color: #fff;
            background-color: #000;
            margin-left: 140px;
            float: left;
        }
        .no2
        {
            display: inline;
            border: 1px solid #000;
            clear: both;
            margin-left: 35px;
            float: left;
        }
        .no2 a, .no4 a, .no8 a
        {
            width: 84px;
            height: 50px;
            padding-top: 8px;
        }
        .no3
        {
            display: inline;
            border: 1px solid #000;
            margin-left: 58px;
            float: left;
        }
        .no3 a, .no5 a, .no6 a, .no7 a, .no9 a
        {
            width: 84px;
            height: 42px;
            padding-top: 16px;
        }
        .no4
        {
            display: inline;
            border: 1px solid #000;
            margin-left: 53px;
            float: left;
        }
        .no5
        {
            display: inline;
            border: 1px solid #000;
            margin-left: 55px;
            float: left;
        }
        .line7, .line13
        {
            font-size: 0;
            display: inline;
            width: 1px;
            height: 38px;
            color: #fff;
            background-color: #000;
            margin-left: 219px;
            float: left;
        }
        .line8, .line14
        {
            font-size: 0;
            display: inline;
            width: 1px;
            height: 38px;
            color: #fff;
            background-color: #000;
            margin-left: 281px;
            float: left;
        }
        .no6, .no8
        {
            display: inline;
            border: 1px solid #000;
            margin-left: 107px;
            float: left;
        }
        .line9, .line11, .line15, .line17
        {
            font-size: 0;
            display: inline;
            width: 26px;
            height: 1px;
            color: #fff;
            background-color: #000;
            margin-top: 29px;
            float: left;
        }
        .line10, .line12, .line16, .line18
        {
            font-size: 0;
            display: inline;
            width: 1px;
            height: 60px;
            color: #fff;
            background-color: #000;
            float: left;
        }
        .line16, .line18
        {
            height: 30px;
        }
        .no7, .no9
        {
            display: inline;
            border: 1px solid #000;
            margin-left: 169px;
            float: left;
        }
        .clear
        {
            clear: both;
        }
        -->
        </style>
</head>
<body>
    <h1>Simple Chart</h1>
    <div class="container">
        <div class="no1"><a href="">Node 1</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="">Node 2</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="">Node 3</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="">Node 4</a></div>
    </div>
    
    <h1>Full Chart</h1>
    <div class="container">
        <div class="no1">
            <a href="">Node 1</a></div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="no2"><a href="#">Node 2</a></div>
        <div class="no3"><a href="#">Node 3</a></div>
        <div class="no4"><a href="#">Node 4</a></div>
        <div class="no5"><a href="#">Node 5</a></div>
        <div class="line7"></div>
        <div class="line8"></div>
        <div class="clear"></div>
        <div class="no6"><a href="#">Node 6</a></div>
        <div class="line9"></div>
        <div class="line10"></div>
        <div class="no7"><a href="#">Node 7</a></div>
        <div class="line11"></div>
        <div class="line12"></div>
        <div class="clear"></div>
        <div class="line13"></div>
        <div class="line14"></div>
        <div class="clear"></div>
        <div class="no8"><a href="#">Node 8</a></div>
        <div class="line15"></div>
        <div class="line16"></div>
        <div class="no9"><a href="#">Node 9</a></div>
        <div class="line17"></div>
        <div class="line18"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

Open in new window

Author

Commented:
great stuff, thanks
You're Welcome.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.