WebReference.com - Drawing Charts with JavaScript (7/7)

[previous]

Drawing Charts with JavaScript

The Entire Script

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!

About the Author

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.

[previous]

Created: March 6, 2002
Revised: March 6, 2002

URL: https://webreference.com/programming/javascript/charts/7.html