Creating A Line Chart Using JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<title>bar chart JavaScript</title>

<script language="javascript" type="text/javascript">
var scores = new Array();
scores[0]=77;
scores[1]=100;
scores[2]=83;
scores[3]=87;
scores[4]=91;
scores[5]=65;
scores[6]=89;

var names = new Array();
names[0]='John';
names[1]='Jessee';
names[2]='Judy';
names[3]='Jacob';
names[4]='Jessica';
names[5]='James';
names[6]='Julie';

var linechart ='';
var pixelsBetweenPoints = 50;
var scaleHeight = 100;

var currentPos = scores[0];
var nextPos;
var pixelPos;
var factor;
linechart = '<table id="chartTbl" width="'+(scores.length*pixelsBetweenPoints)+'" cellspacing="0" style="border-collapse: collapse; border-left: 2px solid #000000; border-bottom: 2px solid #000000"><tr>';
linechart = linechart + '<td valign="bottom" width="1" height="'+scaleHeight+'"><div class="dot"><img border="0" src="images/1x1red.gif" width="1" height="1"></div><div class="empty" style="height:'+(currentPos-1)+'px"></div></td>';

for (var idx=1;idx<scores.length; idx++) {
currentPos = scores[idx-1];
nextPos=scores[idx];
factor = (currentPos - nextPos) / pixelsBetweenPoints; // how much the line height changes per pixel;
for (var jdx=1;jdx<=pixelsBetweenPoints;jdx++){
if (factor<0) {
pixelPos = Math.floor(currentPos-(jdx*factor));
} else {
pixelPos = Math.ceil(currentPos-(jdx*factor));
}
linechart += '<td valign="bottom" width="1" height="'+scaleHeight+'"><div class="dot"><img border="0" src="images/1x1red.gif" width="1" height="1"></div><div class="empty" style="height:'+(pixelPos-1)+'px"></div></td>';
}
linechart += '<td valign="bottom" width="1" height="'+scaleHeight+'"><img border="0" src="images/1x1bk.gif" width="1" height="'+scaleHeight+'"></td>';


}
linechart = linechart + '</tr></table>';
</script>
</head>

<style>
body {
  font-family:Verdana;
  font-size:10pt;
}
.dot {
  position:relative;
  float:left;
  width:3px;
  height:1px;
  background-color:#FF0000;
}
.empty {
  position:relative;
  float:left;
  clear:left;
  width:1px;
  background-color:#EEEEEE;
}

#chartTbl {
  background-image:url('images/scale.gif');
  background-repeat:repeat-x;
  background-position:left;
}
</style>
</head>

<body>
<div id="chart"></div>
<script>
  document.getElementById('chart').innerHTML=linechart;
</script>
</body>

</html>
How can you create a line chart using JavaScript?
