HTML Horizontal Bar Chart

HTML Horizontal Bar Chart generated using HTML Table, DIVs and Javascript. This mechanism can be clubbed with any web development tool like ASP, ASP.NET, JSP etc to generate effective charts. Demo Attached: HTML Horizontal Bar Chart using plain HTML/Javascript

Introduction

We are now going a step ahead in continuation with what we have seen in HTML Vertical Bar Chart article. In line with what we have seen, we are now going to see how can we generate the colorful horizontal bar charts for our web application. Again as said earlier, we can work with any of the wonderful tools and technologies like MS Office web office components, some third party controls to generate charts, some great ways using System.Drawing things to display charts etc etc. And again I found using plain HTML with some javascript as the simplest among all of them to do the same thing. Well, at first glance it could seem to be a horrifying idea, but working with basics for achieving big requirement is never bad. Let me keep it very short and simple and see how this can be achieved.

Inside Look

Here we are going to look at the horizontal bar charts, which would look somewhat like this

Screenshot - HTMLHorizontalChart.jpg

Generating the Horizontal Bar Chart

As we have done with HTML Vertical Bar Chart, we are going to follow some very simple steps and see how this colorful chart is generated. The basic building blocks of this horizontal bar chart are going to be HTML table, DIVs and P ( <P> : HTML Paragraph Tag ). It is basically a set of divs and P simply placed inside the TDs of HTML table TR. This chart table needs only two Columns in desired number of rows. First Column would contain the axis values and the other one would contain the DIVs with colorful background of desired width to represent bar in the chart. The values on the each bar can be displayed with the <p> Value </p> tags. Let us cook this chart step by step.

1. Take a HTML table. Your HTML Code becomes <table></table>

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

3. In each row, add two columns. With this, your HTML Code for each row would look something like this

          
            <tr>
                <td> </td>
                <td> </td>
            </tr>
        

4. In the First Column, Add a Div or P with the labels for Y axis.

5. In the Second Column, add a Div with different background color with fixed height and width as same as corresponding value of X Axis. For any row, with row number i, the code would look somewhat like this

            <tr> 
                <td><div> VerY[i] </div> </td>
                <td>
                    <div style= 'background-color:blue; width:" + HorX[i] + "; /> 
                    <p> HorX[i]</p>                    
                </td>
            </tr>
        

The first TD contains the value for the axis, the second TD contains the DIV with background color as Blue with width as that of X Axis value along with a <p> tag with value to display after the blue bar. This is the gist of the entire your HTML horizontal bar chart.

The steps 4 and 5 are repeated for each Y Axis value and our bar chart is ready.

Well, HorX[i] is used directly as width in the attached demo, but as per requirement it can be reduced/increased proportionately. Say for example you have a just a limited area for displaying the chart, you may consider dividing the width of blue div by say 2 or 3 in the loop for each row. Note that bar chart is all about displaying the data proproportionately, the bar for value 10 should look half the width of 20 valued 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. HTML and Javascript being the basic building blocks for this chart, it is easy to develop, easy to customise and last but not the least easy to find the people to maintain it.

Conclusion

Basic building blocks of HTML/DHTML with any useful script like javascript or vbscript etc when used smartly can create wonders. User experience is best guided by UI and for UI to be facinating, you always need not do the hi-fi things. This is the second HTML charts that I am putting across, watch out this space for more.

Please spare some time to provide feedback about this article. Your couple of minutes can help in enhancing the quality of this article.

By Neeraj Saluja   Popularity  (12705 Views)