65.9K
CodeProject is changing. Read more.
Home

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

Wagner DosAnjos
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (39 votes)

Dec 16, 2002

viewsIcon

262603

downloadIcon

3110

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

Horizontal

Screen Shot 1 - Horizontal Bar/Line Graph

Vertical

Screen Shot 2 - Vertical Bar/Line Graph

Introduction

Browser Compatibility:

  • IE 5.5+
  • NS 6+

Limitations:

  1. Only handles positive values.
  2. Only supports one graph per page.
  3. 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'; // 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