Screen Shot 1 - Horizontal Bar/Line Graph
Screen Shot 2 - Vertical Bar/Line Graph
Introduction
Browser Compatibility:
Limitations:
- Only handles positive values.
- Only supports one graph per page.
- In Netscape, Line Graphs are not supported.
Usage
This script bellow uses the Graph object to plot column and line graphs:
<HTML>
<head>
<script language="JavaScript" src=Graph.js></script>
</head>
<BODY style="font-family: Arial;">
<table align=center>
<tr>
<td width="5%"></td>
<td id=here align=center></td>
<td valign=top width="5%"><a href="">Help</a></td>
</tr>
</table>
</body>
</html>
<script language="JavaScript">
var bg = new Graph(10);
bg.parent = document.getElementById('here');
bg.title = 'Current Top 10 Servers';
bg.xCaption = 'Servers';
bg.yCaption = 'Number of Connetions<br>per Server';
bg.xValues[0] = [188,'Rio de Janeiro'];
bg.xValues[1] = [180,'Sao Paulo'];
bg.xValues[2] = [159,'Brasilia'];
bg.xValues[3] = [67 ,'Belo Horizonte'];
bg.xValues[4] = [66 ,'Fortaleza'];
bg.xValues[5] = [62 ,'Manaus'];
bg.xValues[6] = [48 ,'Porto Alegre'];
bg.xValues[7] = [26 ,'Curitiba'];
bg.xValues[8] = [16 ,'Salvador'];
bg.xValues[9] = [11 ,'Natal'];
bg.showLine = true;
bg.showBar = true;
bg.orientation = 'horizontal';
bg.draw();
</script>
</body>
</html>
Change History
- 10-03-2003: Release v2.1
- Limited support to Netscape 6+
- 09-30-2003: Release v2.0
- Support for vertical orientation
- Bug fixes
- New properties
- 12-16-2002: Release v1.0
