I want to create a graph using pure HTML&CSS like shown below: alt text

I will appreciate if anyone can guide me to achive this.

2 answers

2
points
This was chosen as the best answer

You can do a mix of list items and divs in this one. If the chart is going to be static, this is the solution for you.

First, let's set up our unordered list in CSS:

ul.grid { /* this will contain the containers of the bars */
         width:300px;
         height:150px;
         list-style:none;
         background:#fff;
         } /* let's say we have 3 bars -- we'll do a 91px width below */

ul.grid li { /* this will contain the bars */
         width:91px; /* leaves us 27px of spacing to add to margin below */
         margin-right:9px;
         float:left;
         height:150px;
         }

ul.grid li div { /* these are the bars themselves */
         width:91px;
         background:#00f; /* makes the background a nice, limey green */
         }

Next, our HTML:

<ul class="grid">
         <li><div style="height:33%">&nbsp;</div></li>
         <li><div style="height:66%">&nbsp;</div></li>
         <li><div style="height:75%">&nbsp;</div></li>
</ul>

And you're done!

Adjust the height percentages of the inline styling to match what you need. If you need more bars, just make the ul.grid li width smaller, or the ul.grid width larger, and add more li's.

Answered about 7 years ago by elitesouth
0
points

Use Google's Charts API. You just embed an <IMG> with certain parameters in the URL of the SRC attribute.

alt text

See http://code.google.com/apis/chart/

Answered about 7 years ago by Kevin Crawford
  • Thanks for your reply. This will be an intranet application so Google API may not be an option.. tozden about 7 years ago