Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML
Article

HTML Horizontal Bar Chart

Rate me:
Please Sign up or sign in to vote.
4.78/5 (31 votes)
27 Jun 20076 min read 202.7K   2.2K   139   25
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

Table of contents

  • Introduction
  • Generating horizontal bar charts
    • Single horizontal bar chart
    • Double horizontal bar chart
  • Benefits
  • Printing the charts
  • Wrapping up

Introduction

We are now going a step ahead in continuation with what we saw in the HTML Vertical Bar Chart article. In line with what we have seen, we are now going to see how we can generate colorful horizontal bar charts for our web application. As mentioned earlier, we can work with any of the wonderful tools and technologies like Microsoft Office web office components, some third party controls to generate charts, some great ways using System.Drawing things to display charts, etc. Again, I found that using plain HTML with some JavaScript is 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 requirements is never bad. Let me keep it very short and simple and see how this can be achieved.

Generating horizontal bar charts

Here we are going to look at the steps we need to follow to have effective HTML-based horizontal bar charts. We are first going to see how we can generate the chart for one data series pair, i.e. a chart for a series that has Y-axis values and corresponding X-axis values. Later we are going to take a step ahead and see a chart for the series that has Y-axis values and a corresponding "set" of X-axis values. So let us get into action.

Single horizontal bar chart

Our single horizontal chart is going to look somewhat like this:

Image 1

As we have done with the 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 an HTML table, <DIV>s and <P> (the HTML paragraph tag). It is basically a set of <DIV>s and <P>s placed inside the <TD>s of HTML table <TR>s. This chart table needs only two columns in the desired number of rows. The first column will contain the axis values and the other will contain the <DIV>s with colorful backgrounds of the desired width to represent a bar in the chart. The values on each bar can be displayed with the <P></P> tags. Let us cook up this chart step-by-step.

  1. Take an HTML table. Your HTML code looks like this:
    ASP.NET
    <table></table>
  2. Determine how many rows you need in the table by determining the number of items you want to have in the chart. Let us say you got rowNum as the number of rows you need. In the example attached, it is 12.
  3. In each row, add two columns. With this, your HTML code should look something like this:
    ASP.NET
    <table>
        .
        .
        .
        <tr>
            <td> </td>
            <td> </td>
        </tr>
    </table>
  4. In the first column, add a <DIV> or <P> with labels for the Y-axis.
  5. In the second column, add a <DIV> with different background color and with fixed height and width the as same as the corresponding value of the X-axis. For any row with row number i, the code should look somewhat like this:
    ASP.NET
    <table>
        .
        .
        .
        <tr>
            <td><div> VerY[i] </div> </td>
            <td>
                <div style= 'background-color:blue; width:" + HorX[i] + "; />
                <p> HorX[i]</p>
            </td>
        </tr>
    </table>

The first <TD> contains the value for the axis. The second <TD> contains the <DIV> with background color as blue and with width the same as that of the X-axis value, along with a <P> tag with the value to display after the blue bar. This is the gist of the entire HTML horizontal bar chart. Steps 4 and 5 are repeated for each Y-axis value and then 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, that you have only a limited area for displaying the chart. You may consider dividing the width of the blue <DIV> by, say, 2 or 3 in the loop for each row. Note that the bar chart is all about displaying the data proportionately. The bar for value 10 should look half the width of a 20-valued bar.

Double horizontal bar chart

Now let us extend our horizontal bar chart to cater to the second most required feature: comparing sets of values. The chart for the double horizontal bar chart would look something like this:

Image 2

Now it won't be too hard to understand how to generate this double bar chart. In the same <TD> of Step 5, rather than adding one <DIV> and <P>, we need to place two <DIV>s and <P>s. The width of the second <DIV> should be guided by the second array of information.

That's it. To have better control over it, we can actually add another table inside the <TD> with two rows and one column, each column having a <DIV> representing the value. The HTML code would look somewhat like this:

ASP.NET
<table>
   .
   .
   .
    <tr>
       <td><div> VerY[i] </div> </td>
       <td>
          <table>
             <tr>
                <td>
                   <div style='background-color:blue;width:"+HorX1[i]+";/>
                   <p> HorX1[i]</p>
                </td>
                <td>
                   <div style='background-color:green;width:"+HorX2[i]+";/>
                   <p> HorX2[i]</p>
                </td>
              </tr>
          </table>
       </td>
    </tr>
</table>

Benefits

Charts developed in such ways using basic HTML can be used very effectively in combination with web development tools and technology such as ASP, ASP.NET, JSP, etc. The only requirement is an 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 customize and, last but not least, easy to find people to maintain it.

Printing the charts

There is an Internet Explorer setting that determines whether the printing of images and <DIV> background colors is to be allowed. By default, IE settings do not allow the printing of background colors. To change this setting in IE 6, go to the "Tools" menu of IE, select "Internet Options..." and then select the "Advanced" tab. Now scroll down to the "Printing" section and check the checkbox for "Print Background Color and Images." We have the equivalent for this in IE 7 and other good browsers.

IE stores and picks this information from a registry. So, if you want to enable the printing of background colors and images with the script, add the following code in the HTML part of the landing page:

ASP.NET
<script language="vbscript">
    on error resume next 
    'Change IE Print Settings to Print Background Color and Images 
    Set WSHShell = CreateObject("WScript.Shell") 
    WSHShell.RegWrite 
        "HKCU\Software\Microsoft\Internet Explorer\Main\Print_Background", 
        "yes"
    Set WSHShell = Nothing 
</script> 

Wrapping up

Wonders can be created using the basic building blocks of HTML and DHTML in conjunction with scripts such as JavaScript and VBScript. User experience is best guided by UI and for UI to be fascinating, you don't always need to do hi-fi things. This is the second HTML chart that I am putting across; watch out in this space for more.

Please spare some time to rate and provide feedback about this article. Your couple of minutes can really help enhance its quality. If you're interested, click here to view all my CodeProject articles.

History

  • 28 March, 2007 -- Original version posted
  • 19 April, 2007 -- First update
  • 27 June, 2007 -- Second update: Benefits section added and downloads updated

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
.NET Professional, working with a leading global firm.

Primarily works in .NET using C# with Oracle and MS SQL Server 2000 as backend.

Learning .Net ...

[ My Linked In Profile ^ ]

Comments and Discussions

 
Questionstacked bars Pin
globe12341-Dec-15 14:33
globe12341-Dec-15 14:33 
GeneralMy vote of 3 Pin
Sandesh M Patil27-Nov-12 22:27
Sandesh M Patil27-Nov-12 22:27 
Explain Java script code
GeneralMy vote of 5 Pin
Manoj Kumar Choubey27-Mar-12 22:25
professionalManoj Kumar Choubey27-Mar-12 22:25 
GeneralMy vote of 5 Pin
Sandesh M Patil16-Jun-11 2:32
Sandesh M Patil16-Jun-11 2:32 
GeneralMy vote of 5 Pin
dohyah8-Aug-10 20:57
dohyah8-Aug-10 20:57 
GeneralAbout Style Pin
zhuangyao8-Aug-09 3:00
zhuangyao8-Aug-09 3:00 
GeneralTQ Pin
Selene7878-Jul-09 15:45
Selene7878-Jul-09 15:45 
GeneralVery useful Pin
Degryse Kris27-Apr-09 20:33
Degryse Kris27-Apr-09 20:33 
GeneralImpressive Pin
Crusiatus Black19-Mar-09 8:19
Crusiatus Black19-Mar-09 8:19 
QuestionHorizontal Bar Chart Pin
ramakrishnajolla20-Mar-08 23:30
ramakrishnajolla20-Mar-08 23:30 
Generalbar chart Pin
taoquandecor29-Feb-08 5:27
taoquandecor29-Feb-08 5:27 
Generalthe bar's length does not display correctly if the X axis data is low number Pin
dpthinh26-Feb-08 14:49
dpthinh26-Feb-08 14:49 
Generaldisplay like a tree struture in asp.net 1.1 Pin
karthikeyan_pa3-Jul-07 2:36
karthikeyan_pa3-Jul-07 2:36 
GeneralPrinting the bar chart Pin
SimonGulliver126-Apr-07 1:51
SimonGulliver126-Apr-07 1:51 
GeneralRe: Printing the bar chart Pin
Neeraj Saluja27-Apr-07 0:15
Neeraj Saluja27-Apr-07 0:15 
GeneralNeed help [modified] Pin
bolar_smitha19-Apr-07 10:51
bolar_smitha19-Apr-07 10:51 
GeneralRe: Need help [modified] Pin
Neeraj Saluja19-Apr-07 21:02
Neeraj Saluja19-Apr-07 21:02 
GeneralRe: Need help Pin
bolar_smitha20-Apr-07 6:26
bolar_smitha20-Apr-07 6:26 
GeneralRe: Need help Pin
Neeraj Saluja20-Apr-07 6:41
Neeraj Saluja20-Apr-07 6:41 
GeneralRe: Need help [modified] Pin
bolar_smitha20-Apr-07 6:46
bolar_smitha20-Apr-07 6:46 
GeneralRe: Need help Pin
karthikeyan_pa3-Jul-07 2:31
karthikeyan_pa3-Jul-07 2:31 
Generalerror Pin
doctrane28-Mar-07 2:03
doctrane28-Mar-07 2:03 
GeneralRe: error Pin
Neeraj Saluja28-Mar-07 2:08
Neeraj Saluja28-Mar-07 2:08 
Generallike it Pin
Sacha Barber27-Mar-07 23:47
Sacha Barber27-Mar-07 23:47 
GeneralRe: like it Pin
Neeraj Saluja18-Apr-07 21:04
Neeraj Saluja18-Apr-07 21:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.