Home|Sitemap|Contact

How can you create 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 Roderick Divilbiss">
<title>Line Chart JavaScript</title>

<script language="javascript" type="text/javascript">
<!--
// You could write these scores from a database
// with a server side language, such as ASP/JSP/PHP.

var scores = new Array();
scores[0]=77;
scores[1]=100;
scores[2]=43;
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 ='';             // will be HTML markup when we are done.
var pixelsBetweenPoints = 50;  // adjust as you need to.
var scaleHeight = 100;         // adjust as you need to.

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>
<!--
.dot {
    position: relative;
    float: left;
    width: 1;
    height: 1;
    background-color: #FF0000;
}
.empty {
    position: relative;
    float: left;
    clear: left;
    width: 1;
    background-color: #EEEEEE;
}

#chart {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

<body>
<!-- This is the Chart -->
<div id="chart"></div>

<script>
  document.getElementById('chart').innerHTML=linechart;
</script>

</body>
</html>