| home / programming / javascript / charts |   [previous] |
|
|
|
IE4=(document.all)?1:0;
NS4=(document.layers)?1:0;
DOM=(document.getElementById)?1:0;
NS6=((DOM)&&(!IE4))?1:0;
ver4=(IE4||DOM||NS4)?1:0;
nav=navigator.appVersion;
nav=nav.toLowerCase();
isMac=(nav.indexOf("mac")!=-1)?1:0;
IEmac=((document.all)&&(isMac))?1:0;
imRed = new Image();
imYellow = new Image();
imRed.src = "red.gif";
imYellow.src = "yellow.gif";
strImage = "";
strToWrite = "";
arScores = new Array("",90,100,78,86,52,99,99,100);
arStudents = new Array("","Alan", "Bob", "Joe", "Mary", "Dunce", "Sally", "Allison", "Jacob");
arScoresToChart = new Array();
arStudentsToChart = new Array();
chartWidth = 275;
maxWidth=0;
barHeight=10;
for(i=0; i<arScores.length; i++) {
if(arScores[i] > maxWidth)
maxWidth = arScores[i];
}
function makeChart() {
if(!ver4) return;
strToWrite = "<table bgcolor='#cccccc' cellpadding=0 cellspacing=2 width=" + (chartWidth+80) + "><tr><td>";
strToWrite += "<table bgcolor='#cccccc' cellpadding=0 cellspacing=2 width=" + (chartWidth+80) + ">"
for(i=0;i<arScoresToChart.length;i++) {
if(i%3 == 0)
strImage = "red.gif";
if(i%3 == 1)
strImage = "yellow.gif";
if(i%3 == 2)
strImage = "orange.gif";
strToWrite += "<tr><td align=right>" + arStudentsToChart[i] + "</td>"
strToWrite += "<td><img src='" + strImage + "' width=" + parseInt((arScoresToChart[i]/maxWidth) * chartWidth) + " height=" + barHeight + " hspace=2>" + arScoresToChart[i] + "</td></tr>";
}
strToWrite += "</table>";
strToWrite += "</td></tr></table>";
// now show it!
if(IE4) {
if((IEmac) && (DOM)) return;
winInnerWidth = document.body.clientWidth;
winInnerHeight = document.body.clientHeight;
screenWidth = screen.availWidth;
screenHeight = screen.availHeight;
window.offscreenBuffering = true;
theChart.innerHTML=strToWrite;
theChart.innerHTML=strToWrite;
}
if(NS4) {
with(document.theChart) {
document.open();
document.write(strToWrite);
document.close();
}
}
if(NS6) {
document.getElementById("theChart").innerHTML=strToWrite;
}
}
function addItemToChart(whichItem) {
if(whichItem==0)
return
arStudentsToChart[arStudentsToChart.length] = arStudents[whichItem];
arScoresToChart[arScoresToChart.length] = arScores[whichItem];
document.chartForm.chartItems.options[whichItem]=null;
v1=pull(arStudents,whichItem);
v2=pull(arScores,whichItem);
makeChart();
window.focus();
}
function undo() {
if(arScoresToChart.length > 0) {
tStudent = arStudentsToChart[arStudentsToChart.length-1];
tValue = arScoresToChart[arScoresToChart.length-1];
arStudents[arStudents.length]=tStudent;
arScores[arScores.length]=tValue;
document.chartForm.chartItems.options[document.chartForm.chartItems.options.length]=new Option(tStudent+" "+tValue);
arStudentsToChart.length=arStudentsToChart.length-1;
arScoresToChart.length=arScoresToChart.length-1;
makeChart();
}
}
function pull(ar,whichEl) {
tempEl=ar[whichEl];
idx=whichEl;
for(i=idx;i<ar.length-1;i++) {
ar[i] = ar[i+1];
}
ar.length = ar.length-1;
return tempEl;
}
function addNewStudent() {
newStudent = document.chartForm.student.value;
newScore = document.chartForm.score.value;
// now validate the input
if(newStudent.length<1) {
alert("You must enter a name.");
document.chartForm.student.focus();
return;
}
newScore = parseInt(newScore);
if(isNaN(newScore)) {
alert("Please Enter a numerical value for this student");
document.chartForm.score.focus();
return;
}
// if we get here add the student & score to the arrays
arStudents[arStudents.length] = newStudent;
arScores[arScores.length] = newScore;
document.chartForm.chartItems.options[document.chartForm.chartItems.options.length]=new Option(newStudent+" "+newScore);
document.chartForm.reset();
// now reset maxWidth in case we have a larger value
for(i=0;i<arScores.length;i++) {
if(arScores[i] > maxWidth)
maxWidth = arScores[i];
}
return;
}And the HTML:
<form name=chartForm>
<table bgcolor="#ddccdd">
<tr>
<td colspan=3><b>Add Student to List</b></td>
</tr><tr>
<td>Name</td><td><input name=student type=text size=12></td>
<td> </td>
</tr><tr>
<td>Score</td><td><input name=score type=text size=12></td>
<td><input type=button value="Add Student" onclick="addNewStudent()"></td>
</tr>
</table><br>
<select name=chartItems onchange=addItemToChart(this.selectedIndex)>
<script><!--
for(i=0;i<arStudents.length;i++) {
document.write("<option>" + arStudents[i] + " " + arScores[i]);
}
// -->
</script>
</select>
<input type=button value="undo" onclick="undo()">
</form>
<div id=theChart style="position:absolute"></div>Well, that's it for now. To do: add grid lines to the chart. Sort the chart items. Consider drawing phase charts (hint: one circle moves incrementally over another). Plot a line chart.
I hope this has given you some food for thought, and added a new tool to your toolbox. Many thanks for reading!
Russell Bloom is a professional software developer and information architect, specializing in E-Commerce and retail software solutions. He is currently employed by a national retailer with nearly 700 outlets throughout the U.S. and is based in Benicia, California. While he is fluent in several programming languages, his hobby is writing OS type applications in JavaScript/DHTML. He resides with his wife and two children in the San Francisco Bay area.
| home / programming / javascript / charts | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 6, 2002
Revised: March 6, 2002
URL: http://webreference.com/programming/javascript/charts/7.html
