HTML Vertical Bar Chart

Introduction

Recently, I came across a requirement of displaying colorful bar charts in our web application. Since I am using ASP.NET 1.1, a lot of wonderful ideas came to me, such as using MS Office web office components, using third party controls to generate charts, finding some great ways of using System.Drawing things to display charts, etc. One of the approaches that struck me was using just plain HTML, a bit of DHTML and JavaScript to do the same thing. At first glance, it could seem to be a horrifying idea, but working with basics to achieving big requirements 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 look somewhat like this:

Single vertical bar chart

Let me explain in a very simple way how this colorful chart is generated. This bar chart is generated using an HTML table and <DIV>s. It is basically a set of <DIV>s smartly placed inside the <TD>s of HTML table <TR>s. This chart table needs only two rows: one to contain <DIV>s that represent values and another one to show X-axis labels. Let us cook this chart up step by step.

Take an HTML table.
Determine how many columns you need in the table by determining the number of items you want to have on the chart. Let us say you got colNum as the number of columns you need. In the example attached, it is 24.
Take two rows in that table.
In the first row, add the colNum number of <TD>s having <DIV>s with appropriate width and height.
In the second row, add the colNum number of <TD>s having <DIV>s with labels for the X-axis.

This generates the skeleton for your chart. Now to represent the values on the chart, we need to place <DIV>s inside each <TD> of the first row (Step 4) , with the appropriate height and width. Say tdwd is the width of 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 our own logic for determining the tdwd and h. For instance, if we have a fixed area for the chart then we can determine the tdwd by dividing the chart width by number of columns we 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

Now it won't be too hard to understand how to generate a double bar chart. In the same <TD> of Step 4, rather than adding one <DIV> we need to place two <DIV>s. The height of the second <DIV> should be guided by the second array of information. That's it. 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 the HTML code would look:

<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 height of the second <DIV> and <font face=arial size='-2'> + VerY[i] + </font> writes the value of the bar above the bar.

Printing the charts

There is an Internet Explorer setting that determines whether or not to allow printing of the background color of <DIV>s and background Images. 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..." -> Select the "Advanced" tab. Now scroll down to the "Printing" section and check the checkbox for "Print Background Color and Images." We must have the equivalent for them in IE 7 and other good browsers.

IE stores and picks this information from the 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:

<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>

Benefits

Charts developed in such ways using basic HTML can be used very effectively by clubbing them with web development tools and technology like ASP, ASP.NET, JSP, etc. All that's needed is an array of values to be displayed in the graphical manner. This works with Netscape as well, so scope is further increased automatically.

Version history

Version 1.1

Fixed issue in demo: Chart not getting displayed in Netscape browser when user selects "Show Chart in same Window."

Version 1.2

Feature included: Y-axis scale can now be displayed, guided by user settings. Presently, the following settings are made in the demo, which would display the Y-axis scale as shown in the 3rd chart in the figure above:

var chartHeight = 500;
var chartYAxisInterval = 100; 
var displayYAxisScale = true;

Version 1.3

Added demo: Added a sample demo to show how HTML vertical bar charts can be generated very easily in ASP.NET, with DataTable being the data source. The complete solution can be downloaded here. Key notes for Version 1.3: ASP.NET Version 1.1 is used in the demo and can be used in similar ways with ASP.NET 2.0.

The texts of the X-axis labels are now displayed in the vertical way to avoid issues with the alignments when the X-axis label text is too long. This works fine with IE 6, SP 2 on the Windows XP platform and also with Netscape 8.04 if the options configured properly. To make this work in Netscape 8.04, set the rendering engine to IE by going to Menu -> Tools-> Options-> Site Controls -> Site List Tab. The writing-mode property is presently supported by IE only. With this setting done, when Netscape comes across any property which it does not support, it goes to the IE rendering engine and checks whether it is supported by IE. If IE supports it, Netscape uses its feature and renders it as per the IE rendering engine.

For User convenience, the HTML demo contains the script with X-axis horizontal text. The ASP.NET demo contains the script with X-axis vertical text.

Version 1.4

Included support for X-axis and Y-axis labels on demand in the base demo. Also, limited the number of columns in the demo from 24 to 12 for better understanding of it.

Conclusion

Basic building blocks of HTML/DHTML with coating can create wonders when used smartly. User experience is best guided by UI. This is just one of the HTML charts that I am putting across; there are more to come. If interested, click here to view all my published articles.

History

5 October, 2006 -- Original version posted
2 January, 2007 -- Article moved
19 March, 2007 -- Updated
3 July, 2007 -- Updated

You must Sign In to use this message board.


Per page

PRINT
scorpioyas

1:12 8 May '07

NEERAJ, can you tell us how can we print this bar chart in ASP.NET 1.1. thanks regardsd
Sign In·View Thread·PermaLink

Re: PRINT
Neeraj_Saluja

2:25 8 May '07

That is IE Default Setting that disables the printing of Background Colors of HTML Objects. To changes that in IE 6, go to "Tools" Menu of IE -> Select "Internet Options..." -> Select "Advanced" Tab
Now scroll down to "Printing" Section and ensure that checkbox for "Print Background Color and Images" is checked. We must have the equivalent for them in other good browsers.

If you want to force that with Script add the following code in the HTML part of the landing page:

<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>

Hope it helps.

Thanks
NS

width of bars
scorpioyas

3:09 24 Apr '07

hey v.nice work
dear can you tell me how to reduce the width of bars?
i am retreving the values from database which is usually like 6 to 8 digits values,,,,
the single bar graph logic is working fine,,
but my graph width is increasing when i am having double bar chart.

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

for single bar it is ok i can change width of bar if i add value in tdwd,,,but it's not happening for triple bar,,,it's taking width how much the text length is....

can you help me in this??
thank you.
regards..

Re: width of bars [modified]
Neeraj Saluja

3:14 24 Apr '07

Hi,

For the quick fix I can suggest you alternate way. Rather that displaying the X-Axis text in Horixontal way, we can display the text in

vertical way

To do this we need to change two lines of code and they are ( line numbers with reference to demo) :
1. Line Number 118
Old : Content += "<td align=center><font face=arial size='-2' color=white>" + HorX[i] + "</font></td>";
New : Content += "<td align=left style='writing-mode:tb-rl;'><font face=arial <b>size='-1'</b> color=white>" + HorX[i] + "</font></td>";

2. Line Number 129
Old : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=300,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
New : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=350,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");

Note : Changes highlighted in bold. In Second line change the only thing that we are changing is height, so keep the height as per the need.

Hope it helps.
Thanks
NS

modified on Thursday, March 27, 2008 1:00 AM

HTML Horizontal Bar Chart
Neeraj_Saluja

2:40 9 Apr '07

On the similar lines, I have posted another article for genarating Horizozntal Bar Chart. Click here[^] for accessing the same. Thanks,NS
Sign In·View Thread·PermaLink	2.00/5

triple bar chart or tetra(4 lines)
scorpioyas

2:19 9 Apr '07

hi nice work can you tell me will this work for triple bar chart or tetra bar chart... thank you.
Sign In·View Thread·PermaLink

Re: triple bar chart or tetra(4 lines)
Neeraj_Saluja

2:35 9 Apr '07

Thanks. You can have more bars by modifying this code from the Demo.

if (nSeriesCount == 2)
{
Content+= "<table cellpadding=0 cellspacing=0 border=0 width=" + (tdwd*2/3) + "><tr><td align=center valign=bottom width=50%>"

      if (document.getElementById("chkvaluepoint").checked == true)
            Content+= "<font face=arial size='-2'>" + VerY[i] + "</font>"

   Content+= "<div style='background-color:blue; height:" + h + "px; writing-mode:tb-rl;'></div>"
   Content+= "</td><td align=center valign=bottom width=50%>"
   if (document.getElementById("chkvaluepoint").checked == true)
            Content+= "<font face=arial size='-2'>" + VerY2[i] + "</font>"
     Content+= "<div style='background-color:green; height:" + h2 + "px; '></div>"
     Content+= "</td></tr></table>"
}
else
{     if (document.getElementById("chkvaluepoint").checked == true)
              Content+= "<font face=arial size='-2'>" + VerY[i] + "</font>"
            Content+= "<br><div style='writing-mode:tb-rl; background-color:blue; width:" + (tdwd-5) + "; height:" + h + ";' />"
}

Whats happening here is that if nSeriesCount is Zero, then add a Table with a Single having two TDs. Each TD contains the DIV with appropriate heights h ( Corresponding to Series 1 ) and h2 ( Representing Series 2). Here you can add as many series you want.

Hope it helps.

Thanks,NS

HTML Vertical Bar Chart
sheenysadath

23:46 7 Nov '06

Hi Neerja, I am new to javascript.Whati would like to ask is instead of entering values for the x-axis and y-axis in those fields,is it possible to send 2 arrays -1 for labels and another for y-values to the funcion GenerateChart? can u pls help me with the syntax
Sign In·View Thread·PermaLink	1.00/5

Re: HTML Vertical Bar Chart
Neeraj_Saluja

23:59 7 Nov '06

Yes you can use the array of values for X axis and Y axis.

Note in the function GenerateChart(nSeriesType, nSeriesCount),
HorX = new Array();
VerY = new Array();
And later in the same function
vmax = 0;
for(i = 0; i < 24; i++){
if (document.f1.numvalue1[i].value != '' && parseInt(document.f1.numvalue1[i].value) >= 0){
HorX[j] = document.f1.label[i].value;
VerY[j] = document.f1.numvalue1[i].value;
VerY2[j] = document.f1.numvalue2[i].value; if (parseInt(VerY[j]) > vmax){
vmax = parseInt(VerY[j]);
}
if (parseInt(VerY2[j]) > vmax){
vmax = parseInt(VerY2[j]);
}
j++;
}
}

So at the end the values provided by the user in "Label" is stored in HorX array and is used for X Axis and values provided for "Series 1" are strored in VerY array and is used for Y Axis.

Try modifying this function as per your need. If you get some errors on modifying the function, post your code in this forum and we will debug it together.

Thanks,NS

Re: HTML Vertical Bar Chart
sheenysadath

21:58 8 Nov '06

I am sending in the procedure i created using your code.Your example works fine.
Now i have created 3 arrays and hardcoded values into it.How can i now pass values of these arrays -v_HorX1,v_VerY1,v_VerY2 to HorX,VerY,VerY2 in your Generate Chart Function.Please HELP

CREATE OR REPLACE PROCEDURE PMG_TEST_GRAPHS_SP AS

TYPE v_HorX IS TABLE of varchar2(50) INDEX BY BINARY_INTEGER;
TYPE v_VerY IS TABLE of number(17,3) INDEX BY BINARY_INTEGER;

v_HorX1 v_HorX;
v_VerY1 v_VerY;
v_VerY2 v_VerY;

BEGIN
/*
*/

--=======================================================================
--for eg: now i am just hardcoding values to the three arrays
--=======================================================================

for i in 0..24 loop
v_HorX1(i) :='Past';
v_VerY1(i) :=100;
v_VerY2(i) :=200;
end loop;
HTP.BR;

--====================================================================

HTP.P('<html>');

HTP.P('<HEAD>');
HTP.P('<TITLE>Client-Side Vertical Bar Charts</TITLE>');
HTP.P('<script>
var Content;
var vmax;
var chartwidth=800;
var tdwd;

function GenerateChart(nSeriesType, nSeriesCount){
ms = 0;
nc = 0;
if (navigator.appName == "Netscape") nc = 1
if (navigator.appName.indexOf("Microsoft") != -1) ms = 1
HorX = new Array();
VerY = new Array();
VerY2 = new Array();
var j = 0;
vmax = 0;
for(i = 0; i < 24; i++){
if (document.f1.numvalue1[i].value != '' '' && parseInt(document.f1.numvalue1[i].value) >= 0){
HorX[j] = document.f1.label[i].value;
VerY[j] = document.f1.numvalue1[i].value;
VerY2[j] = document.f1.numvalue2[i].value;
if (parseInt(VerY[j]) > vmax){
vmax = parseInt(VerY[j]);
}
if (parseInt(VerY2[j]) > vmax){
vmax = parseInt(VerY2[j]);
}
j++;
}
}

if ( nSeriesType==1 && nSeriesCount ==2 )
chartwidth = (HorX.length * 45);
else
chartwidth = (HorX.length * 33);

if (chartwidth>900)
chartwidth = 900;

if (j == 0)
alert ("No data found.");
else {

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

Content = "<html><head><title>Column Chart</title></head><body bgcolor=white text=black>";
Content += "";
Content += "";

for (var i = 0; i < HorX.length; i++){
h = parseInt(VerY[i] / (vmax / 200));
h2 = parseInt(VerY2[i] / (vmax / 200));

Content+="";
}

Content += "";
for (i=0; i < HorX.length; i++){
Content += "";
}
Content += "

"
if (nSeriesCount == 2)
{
Content+= "

Content+= "" + VerY[i] + ""
Content+= "

"
Content+= "

Content+= "" + VerY2[i] + ""
Content+= "

"
Content+= "

"
}
else
{
Content+= VerY[i] + "

"
}

Content+="

"
Content+="" + HorX[i] + "

</body></html>";

if (document.getElementById("optShowInSameWindow").checked == true)
document.getElementById("dvChart").innerHTML = Content;
else
{

newWin1 = open('' '',''chart1'',"width=" + (chartwidth + 30) + ",height=320,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
newWin1.document.write(Content);
newWin1.document.close();
newWin1.focus();
}
}
}

function autofill(){

arrMonths = new Array("Jan 06", "Feb 06", "Mar 06", "Apr 06", "May 06", "Jun 06", "Jul 06", "Aug 06", "Sep 06", "Oct 06", "Nov 06", "Dec 06", "Jan 07", "Feb 07", "Mar 07", "Apr 07", "May 07", "Jun 07", "Jul 07", "Aug 07", "Sep 07", "Oct 07", "Nov 07", "Dec 07");
for (i = 0; i < 24; i++){
document.f1.label[i].value = arrMonths[i];
document.f1.numvalue1[i].value = parseInt(Math.random() * 500);
document.f1.numvalue2[i].value = parseInt(Math.random() * 500);
}
}
</script>');

htp.p('</HEAD>');

htp.p('<body>
<form name="f1">

Autofill with random data Single Bar chart Double Bar Chart

<input type="checkbox" name="chkvaluepoint" id="chkvaluepoint" checked>
<label for="chkvaluepoint">
Show values on line</label>
<input type="checkbox" name="chkseparators" id="chkseparators" checked>
<label for="chkseparators">
Line separators</label>
<input type="radio" id="optShowInSameWindow" name="opt"> <label for="optShowInSameWindow">Show Chart in Same Window</label> <input type="radio" id="optShowInNewWindow" name="opt" checked>
<label for="optShowInNewWindow">Show Chart in New Window</label>

</form>
</body>');

htp.p('</html>');

END;
/

Re: HTML Vertical Bar Chart
Neeraj_Saluja

0:17 9 Nov '06

I understand that you want to get the values from database and use it to display the graph. Using just HTML/Javascript it would be tough to connect to database to get the values from database. If you use ASP.NET or java like web development tools, then it would be quite easy for you. Which technology (.NET, java etc) do you want to use? Thanks,NS
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart
sheenysadath

0:20 9 Nov '06

Is it not possible to use pl/sql.Because i am using only PL/SQL and have no experience whatsoever in java or .NET
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart
Neeraj_Saluja

0:45 9 Nov '06

Which database ( MY SQL, MS SQL Server, Oracle, MS Access etc ) are you using? And for the front end if you could use any server side scripting language like ASP, ASP.NET, JSP etc then it would be very easy. See the link, it can help to understand how to fetch the data from PL/SQL Stored procs. : http://www.w3schools.com/ado/[^ Just with HTML/Javasript, it is not possible directly. Thanks,NS
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart
sheenysadath

23:02 12 Nov '06

and another 12 rows are in this format

can u explain why out of the 24 rows,12 rows are in this format		<input type="text" size="4" name="label" >	<input type="text" size="4" name="label" ID="Text7">
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart [modified]
Neeraj_Saluja

23:23 12 Nov '06

You can ignore the ID="Text7 part. Actually when I started, I developed the solution with just 12 boxes using notepad. Later using Microsft Visual Studio IDE, I extended the demo from 12 textboxes to 24 textboxes. and MS IDE created the ID tags automatically.

I am using just the name and not the ID of the HTML Objects, so you can ignore the Id of them.

-- modified at 7:52 Monday 13th November, 2006

Thanks,NS

Re: HTML Vertical Bar Chart
sheenysadath

23:26 12 Nov '06

but if i remove that part from the code i am getting an error as document.f1.numvalue1[] ..is null or not an object. Can you imagine y i am getting such an error. An btw,Thanx for giving me immediate replies,because i am under a lot of pressure to complete this!
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart
sheenysadath

23:53 12 Nov '06

Hey thanx,my graph works now.Instead of passing arrays to the javascript function i assigned the values to the form variables and its working now
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart
Neeraj_Saluja

23:58 12 Nov '06

Great !!! Thanks,NS
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart
Neeraj_Saluja

0:34 14 Nov '06

The functionality to display the Y Axis scale has been added to the Graph and uploaded in thie article. Thanks,NS
Sign In·View Thread·PermaLink	5.00/5

Re: HTML Vertical Bar Chart
Shaheena.kareem

3:50 22 Nov '06

can you please tell me how to modify the code so that the single bar is aligned at the center of the div.for eg - if my x-axis name is long,then the label is aligned to the center but the bar is aligned to the left.please help
Sign In·View Thread·PermaLink	2.00/5

Re: HTML Vertical Bar Chart
Neeraj_Saluja

22:00 22 Nov '06

";
New : Content += "";

2. Line Number 129
Old : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=300,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
New : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=350,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");

Note : Changes highlighted in bold. In Second line change the only thing that we are changing is height, so keep the height as per the need.

Thanks,NS

Hi, It seems to be a bug to me. I think it would take some time to fix this issue completely. But for the quick fix I can suggest you alternate way. Rather that displaying the X-Axis text in Horixontal way, we can display the text in vertical way To do this we need to change two lines of code and they are ( line numbers with reference to demo) : 1. Line Number 118 Old : Content += "		<font face=arial size='-2' color=white>" + HorX[i] + "</font>	align=left style='writing-mode:tb-rl;'><font face=arial size='-1' color=white>" + HorX[i] + "
Sign In·View Thread·PermaLink	5.00/5

Re: HTML Vertical Bar Chart
Neeraj_Saluja

0:21 23 Nov '06

The chart that you sent looks really great. Well, you can modify some conditions if you always want to show graphs in Same Window, always with Line Seperator and always numbers on the graph. I am glad to see it worked for you... Thanks,NS
Sign In·View Thread·PermaLink	3.00/5

sending direct emails
all2dark

1:00 12 Oct '06

I need to develop exe for send emails to given recepient thet carry some details. Is there any format for this. It should be send only to one recipient time to time carries stream of data by double clicking it. Pls let me know the codings for this.? all2dark
Sign In·View Thread·PermaLink	1.00/5

HTML Vertical Bar Chart generated using HTML Table, DIVs and Javascript
Rajya sree

17:56 11 Oct '06

Hi, I have read your Article and tried it but in Lotus notes Environment.it is not working in this environment giving an error as:document.f1.label is null or not an object.could please specify why this is happening. Thanks in advance
Sign In·View Thread·PermaLink	3.29/5

Re: HTML Vertical Bar Chart generated using HTML Table, DIVs and Javascript
Neeraj_Saluja

21:46 11 Oct '06

Rajya sree,

There is a array of "label" object in the demo which contains the label for the X-Axis and its HTML Code looks like this
<input type="text" size="4" name="label"> I have verified that it works fine on Netscape Navigator and IE on Windows XP.

Well, let us debug it together. Let us try this:
1. Find and Replace name="label" to name="XAxisText" 2. Find and replace document.f1.label[ with document.f1.XAxisText[ 3. Save and run the demo.
See if that works for you and share the results with us.

Also, Can you please provide me more details like
1. What is the browser and its version that you are using?
2. What is the OS ?
3. Did you try debugging it? If Yes, What are your observations?

Thanks,NS