HTML Vertical Bar Chart

HTML Vertical Bar Chart can be easily generated smartly placing Divs in HTML Tableusing javascript.

Introduction

Recently I came across a requirement of displaying colorful bar charts in our web application. Since I am using ASP.NET 1.1, lot of wonderful ideas came to me like using MS Office web office components, using third party controls to generate charts, finding some great ways using System.Drawing things to display charts etc etc. And one of the approach that struck me was using just plain HTML, a bit of DHTML and javascript to do the same thing. Well, at first glance it could seem to be a  horrifying idea, but working with basics to achieving big requirement is never bad. Let me keep it very short and simple and see how this can be achieved.

Inside Look at the Script

Here we are going to look at the single and double vertical bar charts, which looks somewhat like this

Single Vertical Bar Chart

Let me explain in very simple way, how this colorful chart is generated. This bar chart is generated using HTML table and DIVs. It is basically a set of divs smartly placed inside the TDs of HTML table TR. This chart table needs only two rows one to contain DIVs to represent values and another one to show X-Axis labels. Let us cook this chart step by step.

1. Take a HTML table

2. Determine how many columns you need in the table by determining the number of items you want to have on chart. Let us say you got colNum as no. of columns you need. In example attached it is 24.

3. Take two rows in that table.

4. In the First Row, Add colNum number of TDs having Divs with appropriate Width and Height in it.

5. In the second Row, add colNum number of TDs having DIVs with labels for X axis.

This generates the skeleton for your chart.

Now to represent the values on the chart, we need to place DIVs inside each TD of First Row (Step 4) , with the appropriate height and width. Say tdwd is the width of your each bar and h is the height that you would need for this bar then it would be

  <TD> 
    <div style='background-color:blue; width:" + (tdwd-5) + "; height:" + h + ";' />
  <TD/>

Each of us can have a our own logic for determining the tdwd and h. Like if we have a fix area for the chart, then we can detremine the tdwd by dividing the chartwidth by number of columns you want The one that is used here is  

tdwd = parseInt((chartwidth-(HorX.length*4))/HorX.length);

h = parseInt(VerY[i] / (vmax / 200));

Have a look at the attached code to understand it completely.

Double Vertical Bar Chart

And now it won't be too hard to understand how to generate two bar chart. In the same TD, of Step 4, rather than adding one DIV we need to place two DIVs. The height of the second div should be guided by the second array of information. And thats it. Or to better format the stuff you can actually add another table inside the TD with one row and two columns, each column having a DIV representing the value. Let us see how it would the HTML code would look like

<TD>     
    <table cellpadding=0 cellspacing=0 border=0 width=" + (tdwd*2/3) + ">
        <tr>
            <td align=center valign=bottom width=50%>
                <font face=arial size='-2'> + VerY[i] + </font>				
                <div style='background-color:blue; height:" + h + "px; writing-mode:tb-rl;'></div>	
             </td>
             <td align=center valign=bottom width=50%>
                <font face=arial size='-2'> + VerY2[i] + </font>
                <div style='background-color:green; height:" + h2 + "px; writing-mode:tb-rl;'></div>
            </td>
         </tr>
     </table>			
<TD/>

Here h2 = parseInt(VerY2[i] / (vmax / 200)); can be used to determine the hieght of the second DIV and <font face=arial size='-2'> + VerY[i] + </font>  writes the value of the bar above the bar.

Benefits

The charts developed in such ways using basic HTML stuff can be used very effectively by clubbing it with any web development tools/technology like ASP, ASP.NET, JSP etc. All it needs is a array of values that needs to be displayed in the graphical manner. It works with Netscape as well, so scope is further increased automatically.

Conclusion

Basic building blocks of HTML/HTML with coating when used smartly can create wonders. User experience is best guided by UI and for UI to be facinating, you always do not need hi-fi things. This is just one of the HTML charts that I am putting across, there are more to come.