Cool Graph object to plot Column and Line Graphs in your web pages.

Wagner DosAnjos

Rate me:

4.60/5 (40 votes)

30 Sep 2003

260.2K

3.1K

JavaScript Graph object to plot Column and Line Graphs. Only JavaScript and DHTML required.

Download source files - 8.05 Kb

Screen Shot 1 - Horizontal Bar/Line Graph

Screen Shot 2 - Vertical Bar/Line Graph

Introduction

Browser Compatibility:

IE 5.5+
NS 6+

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

<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'; // or = 'vertical';

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here