Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
 New Feature: Community Sites:
Create your own .NET community website and start earning from Google AdSense !
It's Free !
|
HTML Vertical Bar Chart
|
Introduction
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.
1. Take an HTML table.
2. 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.
3. Take two rows in that table.
4. In the first row, add the colNum number of <TD>s having <DIV>s with appropriate width and height.
5. 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.
Wrapping Up...
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.
 Attachments
 HTML Vertical Bar Chart Demo (16035-13553-HTMLVerticalBarChart_demo.zip)HTML Vertical Chart Demo With ASP.NET (16035-13554-HTMLVerticalChartWithASPDOTNET.zip)
|
Responses
|
| Author: Manjunatha 07 Jun 2008 | Member Level: Silver Points : 1 | Realy it is too good & i learned how to integrate the chart in web pages
| | Author: Mahesh Raj 07 Jun 2008 | Member Level: Gold Points : 1 | This is very good information,Continue posting such useful articles.
|
|