|
|
<html>
<HEAD>
<TITLE>Client-Side Horizontal Bar Charts</TITLE>
<script language="javascript">
var Content;
var rowHTML;
var chartMaxValue = 500;
var chartHeight = 300;
var colNum;
var barHeight = 5;
var XAxisScale = 5;
function GenerateChart(nSeriesType, nSeriesCount){
VerY = new Array();
HorX1 = new Array();
HorX2 = new Array();
var j = 0;
// Get the Column Count from the numvalue1 Array
colNum = document.f1.numvalue1.length;
//parse pairs
for(i = 0; i < colNum; i++){
if (document.f1.numvalue1[i].value != '' && parseInt(document.f1.numvalue1[i].value) >= 0){
VerY[j] = document.f1.label[i].value;
HorX1[j] = document.f1.numvalue1[i].value;
HorX2[j] = document.f1.numvalue2[i].value;
j++;
}
}
// Reset the Column Count to the length of Array WITH VALUES
colNum = VerY.length;
if (colNum == 0){
alert ("No data found.");
} else {
if (nSeriesType == 2)
{
// Horizontal Bar Chart
Content = "<html><head><title>Horizontal Chart</title></head><body bgcolor=white text=black>";
if (document.getElementById("chkseparators").checked == true)
Content += "<table id=tblgraph style='background-color:#C0C0C0;' align=center width=" + (chartMaxValue+40) + " cellpadding=1 cellspacing=0 border=1>";
else
Content += "<table id=tblgraph style='background-color:#C0C0C0;' align=center width=" + (chartMaxValue+40) + " cellpadding=1 cellspacing=0 border=0>";
for (i = 0; i < VerY.length; i++){
w = parseInt(HorX1[i]);
w2 = parseInt(HorX2[i]);
rowHTML = "";
rowHTML += "<tr style='width:100%'>";
// Add the Labels of Y Axis
rowHTML+= "<td align=right><div style='background-color:#C0C0C0; width:40; height:" + (barHeight-2) + ";'><font face=arial size='-2'>" + VerY[i] + "</font></div></td>";
if ( nSeriesCount == 1 )
{
rowHTML+= "<td align=left width=" + (chartMaxValue) + " height=" + (barHeight-2) + " colspan=" + XAxisScale + ">";
if (w>2)
rowHTML+= "<div style='background-color:blue; width:" + (w-1) + ";' />";
// Display Value for each bar in graph
rowHTML+= "<p style='position:relative; left:" + w + "'><font face=arial size='-2'> "
// See if Values needs to be displayed on graphs
if (document.getElementById("chkvaluepoint").checked == true)
rowHTML+= HorX1[i]
rowHTML+= "</font></p>";
}
else
{
rowHTML+= "<td align=left width=" + (chartMaxValue) + " height=" + ((barHeight*2)-2) + " colspan=" + XAxisScale + ">";
rowHTML+= "<table cellpadding=o cellspacing=0 border=0><tr><td>";
// Add the First Blue DIV
if (w>2)
rowHTML+= "<div style='background-color:blue; width:" + (w-1) + ";' />";
// Display Value for each bar in graph
rowHTML+= "<p style='position:relative; left:" + w + "'><font face=arial size='-2'> "
// See if Values needs to be displayed on graphs
if (document.getElementById("chkvaluepoint").checked == true)
rowHTML+= HorX1[i]
rowHTML+= "</font></p>";
// Add the Second Green DIV
rowHTML += "</td></tr><tr><td>";
if (w2>2)
rowHTML+= "<div style='background-color:Green; width:" + (w2-1) + ";' />";
// Display Value for each bar in graph
rowHTML+= "<p style='position:relative; left:" + w2 + "'><font face=arial size='-2'> "
// See if Values needs to be displayed on graphs
if (document.getElementById("chkvaluepoint").checked == true)
rowHTML+= HorX2[i]
rowHTML+= "</font></p>";
rowHTML += "</td></tr></table>";
}
rowHTML+= "</td></tr>";
Content += rowHTML;
}
// Add the row for X Axis
Content += "<tr bgcolor=#C0C0C0>";
// Add the first blank Cell
Content += "<td align=right><div><font face=arial size='-2'> </font></div></td>";
for (i = 1; i <= XAxisScale; i++){
if (document.getElementById("chkseparators").checked == true)
Content += "<td align=right><div style='background-color:#C0C0C0; width:" + parseInt(chartMaxValue/XAxisScale - 4) + "; height:" + (barHeight-2) + ";'><font face=arial size='-2'>" + parseInt(i * chartMaxValue / XAxisScale) + "</font></div></td>";
else
Content += "<td align=right><div style='background-color:#C0C0C0; width:" + parseInt(chartMaxValue/XAxisScale - 4) + "; height:" + (barHeight-2) + ";'><font face=arial size='-2'>" + parseInt(i * chartMaxValue / XAxisScale) + "|</font></div></td>";
}
Content += "</tr>";
Content += "</table>";
if (document.getElementById("optShowInSameWindow").checked == true)
document.getElementById("dvChart").innerHTML = Content;
else
{
//create a window to display Column graph in top left corner
if ( nSeriesCount == 1 )
{
newWin1 = open('','chart1',"width=" + (chartMaxValue + 175) + ",height=320,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
}
else
{
newWin1 = open('','chart1',"width=" + (chartMaxValue + 175) + ",height=450,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
}
newWin1.document.write(Content);
newWin1.document.close();
newWin1.focus();
}
}
}
}
function autofill(){
// dumb little function that fills random data into the input boxes...
arrMonths = new Array("Jan 07", "Feb 07", "Mar 07", "Apr 07", "May 07", "Jun 07", "Jul 07", "Aug 07", "Sep 07", "Oct 07", "Nov 07", "Dec 07", "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 < 12; i++){
document.f1.label[i].value = arrMonths[i];
document.f1.numvalue1[i].value = parseInt(Math.random() * chartMaxValue);
document.f1.numvalue2[i].value = parseInt(Math.random() * chartMaxValue);
}
}
</script>
</HEAD>
<body onload="autofill()">
<form name="f1">
<table style="FONT-SIZE: 10pt; FONT-FAMILY: Arial; POSITION: absolute; ; TOP: expression(document.all('dvChart').clientTop + document.all('dvChart').clientHeight + 10)"
bgColor="#9999ff" valign="top">
<tr>
<td width="100%">
<hr>
</td>
</tr>
<tr>
<td align="center"><STRONG><FONT size="4">HTML Horizontal Bar Chart Demo</FONT></STRONG>
<br>
by Neeraj Saluja
</td>
</tr>
<tr>
<td width="100%">
<hr>
</td>
</tr>
<tr>
<td>
<div id="dvChart"></div>
</td>
</tr>
<tr>
<td width="100%">
<hr>
</td>
</tr>
<tr>
<TD align="left"> <A href="javascript:autofill();"><font color="blue">Autofill with
random data</font></A> <A href="javascript:GenerateChart(2,1);"><font color="blue">
Single Horizontal Bar chart</font></A> <A href="javascript:GenerateChart(2,2);">
<font color="blue">Double Horizontal Bar chart</font></A>
</TD>
</tr>
<tr>
<td colSpan="5"><input id="chkvaluepoint" type="checkbox" CHECKED name="chkvaluepoint">
<label for="chkvaluepoint">Show values on line </label><input id="chkseparators" type="checkbox" CHECKED name="chkseparators">
<label for="chkseparators">Line separators </label><input id="optShowInSameWindow" type="radio" name="opt">
<label for="optShowInSameWindow">Show Chart in Same
Window</label>
<input id="optShowInNewWindow" type="radio" CHECKED name="opt">
<label for="optShowInNewWindow">Show Chart in New Window</label>
</td>
</tr>
<tr>
<td width="100%">
<hr>
</td>
</tr>
<tr>
<td>
<table style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
<tr align="center">
<td>Y Axis Values</td>
<td>X Axis Series 1</td>
<td>X Axis Series 2</td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
<td vAlign="top" align="left" height="387" rowSpan="15">Getting started
<OL>
<LI>
By default the random data is loaded for Y Axis Values and Y Axis Values
on page (body) load. To further randomise the date, click on the the
link "Autofill with random data". It will fill the data with Labels for X axis
as Jan 07 to Dec 07, and random values between 0 and 500 for X Axis.
<LI>
Click on the link "Single Or Double Horizontal Bar Chart"
</LI>
</OL>
<P>Key Notes
</P>
<OL>
<li>
This Charts Generation is completely javascript based do not need any third
party tool
<li>
Since this chart generation is HTML/Javascript based, it can clubbed with any
web development tools/technology like ASP, ASP.NET, JSP etc to generate the
charts
<li>
Like many chart tools, it does not produce any chart image.
<LI>
For best results, limit the division
</LI>
</OL>
<P> Scope of Enhancements </P>
<OL>
<LI>
Optional Legends can be added</LI></OL>
<P>Request for Feedback :: Please spare some time to give feedback about this
tool. Your couple of minutes can help in enhancing the quality of this tool</P>
<P>Thanks
<br>
Neeraj Saluja
</P>
</td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
<tr>
<td><input type="text" size="4" name="label"></td>
<td><input type="text" size="4" name="numvalue1"></td>
<td><input type="text" size="4" name="numvalue2"></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip