|
|
<!-- Version 1.1 :
To Fix : DIV not autmatically resizing in Netscape when chart is drawn in same window
Fix : Placed DIV inside a Table
-->
<html>
<HEAD>
<TITLE>Client-Side Vertical Bar Charts</TITLE>
<script language="javascript">
var Content;
var vmax;
var chartwidth=800;
var tdwd;
function GenerateChart(nSeriesType, nSeriesCount){
//testing for browsers
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;
//parse pairs
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++;
}
}
// Set the Desired Width of the window as per the no. of items
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 {
if (nSeriesType == 1){
//for Columns
tdwd = parseInt((chartwidth-(HorX.length*4))/HorX.length);
Content = "<html><head><title>Column Chart</title></head><body bgcolor=white text=black>";
Content += "<table id=tblgraph align=center width=" + chartwidth + " cellpadding=2 cellspacing=2 border=0>";
Content += "<tr bgcolor=#C0C0C0>";
for (i = 0; i < HorX.length; i++){
h = parseInt(VerY[i] / (vmax / 200));
h2 = parseInt(VerY2[i] / (vmax / 200));
Content+="<td align=center valign=bottom width=" + tdwd + ">"
if (nSeriesCount == 2)
{
Content+= "<table cellpadding=0 cellspacing=0 border=0 width=" + (tdwd*2/3) + "><tr><td align=center valign=bottom width=50%>"
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%>"
Content+= "<font face=arial size='-2'>" + VerY2[i] + "</font>"
Content+= "<div style='background-color:green; height:" + h2 + "px; writing-mode:tb-rl;'></div>"
Content+= "</td></tr></table>"
}
else
{
Content+= VerY[i] + "<br><div style=' background-color:blue; width:" + (tdwd-5) + "; height:" + h + ";' />"
}
Content+="</td>";
}
Content += "</tr><tr bgcolor=#C0C0C0>";
for (i=0; i < HorX.length; i++){
Content += "<td align=center>" + HorX[i] + "</td>";
}
Content += "</tr></table></body></html>";
if (document.getElementById("optShowInSameWindow").checked == true)
document.getElementById("dvChart").innerHTML = Content;
else
{
//create a window to display Column graph in top left corner
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(){
// dumb little function that fills random data into the input boxes...
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>
</HEAD>
<body>
<form name="f1">
<table valign="top" bgColor="#ffffcc" style="POSITION:absolute; ; TOP:expression(document.all('dvChart').clientTop + document.all('dvChart').clientHeight + 10)">
<tr>
<td>
<div id="dvChart"></div>
</td>
</tr>
<tr bgColor="gainsboro">
<TD align="left">
<A href="javascript:autofill();"><font color="blue">Autofill with random data</font></A>
<A href="javascript:GenerateChart(1,1);"><font color="blue">Single Bar chart</font></A>
<A href="javascript:GenerateChart(1,2);"><font color="blue">Double Bar Chart</font></A>
</TD>
</tr>
<tr bgColor="gainsboro">
<td colspan="5">
<input type="checkbox" name="chkvaluepoint" id="chkvaluepoint" checked>
<label for="chkvaluepoint">
<span style="font-size: 10pt; font-family: Arial">Show values on line</span></label>
<input type="checkbox" name="chkseparators" id="chkseparators" checked>
<label for="chkseparators">
<span style="font-size: 10pt; font-family: Arial">Line separators</span></label>
<input type="radio" id="optShowInSameWindow" name="opt"><span style="font-size: 10pt">
<label for="optShowInSameWindow">Show Chart in Same Window</label></span>
<input type="radio" id="optShowInNewWindow" name="opt" checked>
<span style="font-size: 10pt"><span style="font-family: Arial">
<label for="optShowInNewWindow">Show Chart in New Window</label>
</span></span>
</td>
</tr>
<tr>
<td>
<br>
<table>
<tr align="center">
<td>
<span style="font-size: 10pt; font-family: Arial">Label</span></td>
<td>
<span style="font-size: 10pt; font-family: Arial">Series 1</span></td>
<td>
<span style="font-size: 10pt; font-family: Arial">Series 2</span></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 rowspan="10" align="left" valign="top">
<span style="font-size: 10pt; font-family: Arial">
Getting started </span>
<OL>
<LI><span style="font-size: 10pt; font-family: Arial">
To get started with this Demo, click on the the link "Autofill with random
data". It will fill the data with Labels for X axis, and random values between
0 and 500 for Y Axis as Series 1 and Series 2. </span>
<LI><span style="font-size: 10pt; font-family: Arial">
Click on the link "Single Bar Chart" or "Double Bar Chart"</span></LI></OL>
<P>
<span style="font-size: 10pt; font-family: Arial">
Key Notes </span>
</P>
<OL>
<li><span style="font-size: 10pt; font-family: Arial">
This Charts Generation is completely javascript based do not need any third
party tool </span>
<li><span style="font-size: 10pt; font-family: Arial">
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 </span>
<li><span style="font-size: 10pt; font-family: Arial">
Like many chart tools, it does not produce any chart image. </span>
<LI><span style="font-size: 10pt; font-family: Arial">
For best performance results, open the graph in New Window.</span></LI></OL>
<P>
<span style="font-size: 10pt; font-family: Arial"> Scope of Enhancements </span></P>
<OL>
<LI><span style="font-size: 10pt; font-family: Arial">
Scale can be added to the Y Axis (Veritical Line). </span>
<LI><span style="font-size: 10pt; font-family: Arial">
Optional Legends can be added</span></LI></OL>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text1"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text2"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text3"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text4"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text5"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text6"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text7"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text8"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text9"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text10"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text11"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text12"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text13"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text14"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text15"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text16"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text17"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text18"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text19"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text20"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text21"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text22"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text23"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text24"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text25"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text26"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text27"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text28"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text29"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text30"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text31"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text32"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text33"></td>
</tr>
<tr>
<td><input type="text" size="4" name="label" ID="Text34"></td>
<td><input type="text" size="4" name="numvalue1" ID="Text35"></td>
<td><input type="text" size="4" name="numvalue2" ID="Text36"></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