Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Jul 23, 1999

Draw a Simple Bar Chart in HTML

There are a lot of graphics packages for Web pages on the market, but sometimes you still want a homegrown solution. Using just HTML, it is possible to create simple bar charts. The trick is to embed tables inside a table and change the width property of the <td> tag of the inner table. To create a simple positive only bar chart, use this template. Just repeat the code between the <tr> tag for each item you want to display. Note that there is a blank space in the <td> field. Without this blank space, the bar would not be displayed in Netscape.

 
<table border="0" width="100%" cellpadding = "0" cellspacing="0">
  <tr>
    <td width="20%">Item 1 </td> 
    <td width="75%">
      <table border = "0" width = "100%" cellpadding = "1" cellspacing="1">
        <tr>
          <td align="left" bgcolor="blue" width="37%"> </td>
          <td align="left">37%</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

This code produces this bar chart:

Item 1
37%

It is a little trickier if you want to display positive and negative data. Instead of having one nested table, you have two tables, each nested in its own <td> tag. Also, you have to change the alignment so that negatives are right-aligned while positives are left-aligned. You can play with the widths of the <td> tags of the outside table for different effects.

 
<table border="0" width="100%" cellpadding = "0" cellspacing="0">
  <tr>
    <td width="30%">Item 1</td> 
    <td width="35%">
      <table border = "0" width = "100%" cellpadding = "1" cellspacing="1">
        <tr>
          <td align="right"> </td>
          <td align="right" width="0%"></td>
        </tr>
      </table>
    </td>
    <td width="35%">
      <table border = "0" width = "100%" cellpadding = "1" cellspacing="1">
        <tr>
          <td align="left" bgcolor="blue" width="15%"> </td>
          <td align="left">15%</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="30%">Item 2</td> 
    <td width="35%">
      <table border = "0" width = "100%" cellpadding = "1" cellspacing="1">
        <tr>
          <td align="right">-3%</td>
          <td align="right" bgcolor="red" width="3%"> </td>
        </tr>
      </table>
    </td>
    <td width="35%">
      <table border = "0" width = "100%" cellpadding = "1" cellspacing="1">
        <tr>
          <td align="left" width="0%"></td>
          <td align="left"> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

This code produces this bar chart:

Item 1
15%
Item 2
-3%
William Wen
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date