Line Graph

Home

This code from GNU will plot a line graph with a shaded area under it. Either copy-and-paste the code below into a new file, or click here to see a ready-made example.

<HTML>
<body>
<SCRIPT LANGUAGE="JavaScript">
/* TableGraph v1.0 */
/* Copyright (C) 2001 Niklas Uhlin <niklas@uhlin.org> */
/* */
/* This program is free software; you can redistribute it and/or */
/* modify it under the terms of the GNU General Public License */
/* as published by the Free Software Foundation; either version 2 */
/* of the License, or (at your option) any later version. */
/* */
/* This program is distributed in the hope that it will be useful, */
/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the */
/* GNU General Public License for more details. */
/* */
/* You should have received a copy of the GNU General Public License */
/* along with this program; if not, write to the Free Software */
/* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */


/* These are the values that will be displayed in the graph */
/* Must be a comma-separated string (at this time, the graph can ONLY handle positive integers) */
var values = "13,14,15,14,15,16,16,17,16,15,15,14,15,16,17,17,18,17,18,17,17,17,18,19,20,21,22,21,21,20,19,19,19,19,18,17,16,15,14,13,12,12,12,11,11,11,10,10,11,12,13,14,15,16,17,17,17,17,18,19,20,21,22,23,24,25,25,25,25,26,27,28,29,30,31,31,31,31,31,31,32,33,33,33,34,34,35,34,34,33,34,35,36,37,38,39,40,41,42,43,44,45,45,45,45,46,47,48,49,49,48,47,46,47,47,47,48,49,50,51,52,53,52,51,50,49,49,48,48,47,46,45,45,46,45,44,43,42,42,41,42,43,42,41,40,39";
PlotGraph(values);

function PlotGraph(values)
{
/* Default environment variables */
/* Use these to change the appearance of the graph */
var COLS = 365; // [1..n] Max number of columns in the graph
var ROWS = 100; // [1..n] Max number of rows in the graph
var POINTHEIGHT = 1; // [1..n] Height of each point in the graph
var POINTWIDTH = 1; // [1..n] Width of each point in the graph (values > 1 will stretch graph)
var SHOWSCALE = true; // [true|false] Toggle display of scale
var SCALEHEIGHT = false; // [true|false] Toggle compression of background-height to height of graph
var SCALEWIDTH = false; // [true|false] Toggle compression of background-width to width of graph
var SOLID = true; // [true|false] Toggle solid display of the graph
var XCAPTION = 'Day'; // [anything] Title on x-scale (displayed when the user moves the mouse across the graph)
var YCAPTION = 'Stock price'; // [anything] Title on y-scale (displayed when the user moves the mouse across the graph)
var BGCOL = '#CCCCCC'; // ['#000000 - #FFFFFF'] Background color
var LINECOL = '#000000'; // ['#000000 - #FFFFFF'] Line color
var BORDERCOL = '#000000'; // ['#000000 - #FFFFFF'] Color of border surrounding the graph
var SOLIDCOL = '#FF9900'; // ['#000000 - #FFFFFF'] In SOLID-mode, this is the color that will be used for the solid part of the graph
var MARKERCOL = '#FF0000'; // ['#000000 - #FFFFFF'] Color to be used for the marker when the user moves the mouse across the graph

/* Split input-string into an array of values */
var graph = values.split(",");

/* Misc stuff */
var i = 0;
var x = 0;
var y = 0;
var min = graph[0];
var max = graph[0];
var xScale = 0;
var yScale = 0;
var point = 0;
var colHeightAbovePoint = 0;
var colHeightBelowPoint = 0;
var solidNonSolid = 0;

/* Replace all spaces with &nbsp; in the x/y-caption */
XCAPTION = XCAPTION.replace(/\ /gi, '\&nbsp\;');
YCAPTION = YCAPTION.replace(/\ /gi, '\&nbsp\;');

/* Retrieve min & max values from graph data */
for (i=0; i<graph.length; i++)
{
if (graph[i] > max)
max = graph[i];
if (graph[i] < min)
min = graph[i];
}

/* Scale the graph background */
(SCALEHEIGHT) ? yScale=max : yScale=ROWS;

/* Draw graph background & plot graph data */
with (document)
{
write('<HTML>');
write('<HEAD>');
write(' <TITLE>TableGraph v1.0</TITLE>');
write('</HEAD>');
write('<body>');
/* The DIV tag below is used for displaying the graph value when the user moves the mouse over the graph */
write('<DIV ID="pointInfo" STYLE="visibility:hidden; position:absolute; font-family:verdana; font-size:10px; background:#FFFFCC; border-color:#000000; border-width:1; border-style:solid;"></DIV>');

write('<table BORDER=0 CELLPADDING=1 CELLSPACING=0>');
write(' <tr>');

/* Y-axis scale (max value) */
if (SHOWSCALE)
{
write('<td>');
write(' <table HEIGHT=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>');
write(' <tr>');
write(' <td VALIGN=top><FONT FACE="Courier New" SIZE=1>'+ yScale +'</FONT></td>');
write(' </tr>');
write(' </table>');
write('</td>');
}
write(' <td BGCOLOR='+ BORDERCOL +'>');
write(' <table BORDER=0 CELLPADDING=0 CELLSPACING=0>');

/* Plot actual graph */
for (x=0; x<COLS; x++)
{
if (graph[x])
point=graph[x];
else if (SCALEWIDTH)
break;

/* Determine the height of columns above and below actual point */
if (point <= 0)
{
colHeightBelowPoint = 0;
colHeightAbovePoint = yScale;
}
else
{
colHeightBelowPoint = point-1;
colHeightAbovePoint = yScale-point+1;
}
write('<td HEIGHT='+ yScale +' WIDTH='+ POINTWIDTH +' BGCOLOR='+ BGCOL +'>');

/* Plot point in graph */
if (point)
{
write(' <table BORDER=0 CELLPADDING=0 CELLSPACING=0>');
write(' <tr>');
write(' <td HEIGHT='+ colHeightAbovePoint +' WIDTH='+ POINTWIDTH +'></td>');
write(' </tr>');
write(' <tr>');

/* SolidNonSolid is used in the onMouseOut-event to determine which background-color */
/* the graph had -before- the vertical marker was drawn, so we know which color to */
/* change back to. */
(SOLID) ? solidNonSolid = SOLIDCOL : solidNonSolid = BGCOL;

write(' <td ID=point'+ x +' HEIGHT='+ POINTHEIGHT +' WIDTH='+ POINTWIDTH +' BGCOLOR='+ LINECOL +' onMouseOver=SetPointInfo('+ x +','+point+',\''+MARKERCOL+'\',\''+XCAPTION+'\',\''+YCAPTION+'\') onMouseOut=ResetPointInfo('+ x +',\''+LINECOL+'\',\''+solidNonSolid+'\')></td>');
write(' </tr>');
write(' <tr>');

/* Should the graph be displayed solid or not? */
if (SOLID)
write(' <td ID=below'+ x +' BGCOLOR='+ SOLIDCOL +' HEIGHT='+ colHeightBelowPoint +' WIDTH='+ POINTWIDTH +' onMouseOver=SetPointInfo('+ x +','+point+',\''+MARKERCOL+'\',\''+XCAPTION+'\',\''+YCAPTION+'\') onMouseOut=ResetPointInfo('+ x +',\''+LINECOL+'\',\''+solidNonSolid+'\')></td>');
else
write(' <td ID=below'+ x +' HEIGHT='+ colHeightBelowPoint +' WIDTH='+ POINTWIDTH +' onMouseOver=SetPointInfo('+ x +','+point+',\''+MARKERCOL+'\',\''+XCAPTION+'\',\''+YCAPTION+'\') onMouseOut=ResetPointInfo('+ x +',\''+LINECOL+'\',\''+solidNonSolid+'\')></td>');

write(' </tr>');
write(' </table>');
}

point=0;
write('</td>');
}
write(' </table>');
write(' </td>');
write(' </tr>');

/* Should we display the scale? */
if (SHOWSCALE)
{
/* If so, should we scale it according to the number of elements in the graph? */
(SCALEWIDTH) ? xScale=graph.length : xScale=COLS;

write(' <tr>');
write(' <td ALIGN=center><FONT FACE="Courier New" SIZE=1>0</FONT></td>'); //origo
write(' <td>');
write(' <table WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>');
write(' <tr>');
/* X-axis (max value) */
write(' <td ALIGN=right><FONT FACE="Courier New" SIZE=1>'+ xScale +'</FONT></td>');
write(' </tr>');
write(' </table>');
write(' </td>');
write(' </tr>');
}
write('</table>');
write('</body>');
write('</HTML>');
}
}

/* Displays point value and vertical marker when mouse is moved over the graph */
function SetPointInfo(x, value, markercol, xcaption, ycaption)
{
document.all.item('point'+x).style.background=markercol;
document.all.item('below'+x).style.background=markercol;
document.all.item('pointInfo').style.visibility='visible';
document.all.item('pointInfo').style.top=window.event.y-20;
document.all.item('pointInfo').style.left=window.event.x+10;
document.all.item('pointInfo').innerHTML=xcaption +'='+ x +'<BR>'+ ycaption +'='+ value;
}

/* Hides point value and erases vertical marker */
function ResetPointInfo(x, linecol, solidNonSolid)
{
document.all.item('point'+x).style.background=linecol;
document.all.item('below'+x).style.background=solidNonSolid;
document.all.item('pointInfo').style.visibility='hidden';
}
</SCRIPT>
</body>
</HTML>

Click here to view the full licence.