Click here to Skip to main content
15,868,141 members
Articles / Web Development / HTML
Article

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

Rate me:
Please Sign up or sign in to vote.
4.60/5 (40 votes)
30 Sep 2003 259.3K   3.1K   67   37
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
<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


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionPrinting Pin
Member 407347615-Feb-08 10:13
Member 407347615-Feb-08 10:13 
Generalcomparison of two date Pin
yesu prakash6-Aug-07 17:46
yesu prakash6-Aug-07 17:46 
QuestionCan you assist me... Pin
Punprom Kasemsant6-Jun-07 6:52
Punprom Kasemsant6-Jun-07 6:52 
GeneralSuper! Pin
dgaudian9-May-07 2:20
professionaldgaudian9-May-07 2:20 
GeneralChange markColor for each "dot" Pin
ssalter200314-Jun-06 8:36
ssalter200314-Jun-06 8:36 
GeneralRe: Change markColor for each "dot" Pin
ssalter200314-Jun-06 14:00
ssalter200314-Jun-06 14:00 
GeneralCall from within a function Pin
Su_3019-Jan-06 12:43
Su_3019-Jan-06 12:43 
QuestionAny updates on Mozilla Support? Pin
ibhotla12-Sep-05 11:52
ibhotla12-Sep-05 11:52 
GeneralPrinting Problem Headway (some) Pin
MaHeidHurtz29-Apr-05 5:14
MaHeidHurtz29-Apr-05 5:14 
GeneralN series Pin
jhony_vazquez16-Jul-04 14:37
jhony_vazquez16-Jul-04 14:37 
GeneralPassing variables Pin
murthy6417-Apr-04 15:34
murthy6417-Apr-04 15:34 
GeneralRe: Passing variables Pin
murthy6420-Apr-04 9:48
murthy6420-Apr-04 9:48 
GeneralPrinting Pin
jerry0davis18-Mar-04 3:14
jerry0davis18-Mar-04 3:14 
GeneralRe: Printing Pin
johnpwalker9-Dec-04 3:43
johnpwalker9-Dec-04 3:43 
GeneralAnother tool based on this stuff Pin
bertaud7-Oct-03 21:55
bertaud7-Oct-03 21:55 
GeneralRe: Another tool based on this stuff Pin
johnpwalker9-Dec-04 5:48
johnpwalker9-Dec-04 5:48 
GeneralRe: Another tool based on this stuff Pin
Anonymous13-Dec-04 2:49
Anonymous13-Dec-04 2:49 
GeneralWorks only with IE Pin
pirannia3-Oct-03 2:05
pirannia3-Oct-03 2:05 
GeneralRe: Works only with IE Pin
Wagner DosAnjos3-Oct-03 2:48
Wagner DosAnjos3-Oct-03 2:48 
GeneralRe: Works only with IE Pin
Wagner DosAnjos3-Oct-03 5:09
Wagner DosAnjos3-Oct-03 5:09 
GeneralRe: Works only with IE Pin
Anonymous28-Oct-04 1:06
Anonymous28-Oct-04 1:06 
Generalvalores iguais Pin
Alegria23-Sep-03 3:14
Alegria23-Sep-03 3:14 
GeneralTo Change the Orientation option Pin
Munirathnam kumar12-Aug-03 21:20
Munirathnam kumar12-Aug-03 21:20 
GeneralI'm surprised Pin
Kocil20-Mar-03 3:59
Kocil20-Mar-03 3:59 
I though this could only be achieved with applet.
OMG | :OMG:
GeneralRe: I'm surprised Pin
jakesher8-Jun-03 7:30
jakesher8-Jun-03 7:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.