Click here to Skip to main content
15,178,422 members
Articles / Web Development / HTML
Posted 15 Dec 2002


67 bookmarked

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
JavaScript Graph object to plot Column and Line Graphs. Only JavaScript and DHTML required.


Screen Shot 1 - Horizontal Bar/Line Graph


Screen Shot 2 - Vertical Bar/Line Graph


Browser Compatibility:

  • IE 5.5+
  • NS 6+


  1. Only handles positive values.
  2. Only supports one graph per page.
  3. In Netscape, Line Graphs are not supported.


This script bellow uses the Graph object to plot column and line graphs:

<script language=JavaScript src=Graph.js></script>
<BODY style="font-family: Arial;">
<table align=center>
        <td width="5%"></td>
        <td id=here align=center></td>
        <td valign=top width="5%"><a href="">Help</a></td>
<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';


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


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


About the Author

Wagner DosAnjos
United States United States
No Biography provided

Comments and Discussions

QuestionPrinting Pin
Member 407347615-Feb-08 11:13
MemberMember 407347615-Feb-08 11:13 
Generalcomparison of two date Pin
yesu prakash6-Aug-07 18:46
Memberyesu prakash6-Aug-07 18:46 
QuestionCan you assist me... Pin
Punprom Kasemsant6-Jun-07 7:52
MemberPunprom Kasemsant6-Jun-07 7:52 
GeneralSuper! Pin
dgaudian9-May-07 3:20
professionaldgaudian9-May-07 3:20 
GeneralChange markColor for each "dot" Pin
ssalter200314-Jun-06 9:36
Memberssalter200314-Jun-06 9:36 
GeneralRe: Change markColor for each "dot" Pin
ssalter200314-Jun-06 15:00
Memberssalter200314-Jun-06 15:00 
GeneralCall from within a function Pin
Su_3019-Jan-06 13:43
MemberSu_3019-Jan-06 13:43 
QuestionAny updates on Mozilla Support? Pin
ibhotla12-Sep-05 12:52
Memberibhotla12-Sep-05 12:52 
GeneralPrinting Problem Headway (some) Pin
MaHeidHurtz29-Apr-05 6:14
MemberMaHeidHurtz29-Apr-05 6:14 
GeneralN series Pin
jhony_vazquez16-Jul-04 15:37
Memberjhony_vazquez16-Jul-04 15:37 
GeneralPassing variables Pin
murthy6417-Apr-04 16:34
Membermurthy6417-Apr-04 16:34 
GeneralRe: Passing variables Pin
murthy6420-Apr-04 10:48
Membermurthy6420-Apr-04 10:48 
GeneralPrinting Pin
jerry0davis18-Mar-04 4:14
Memberjerry0davis18-Mar-04 4:14 
GeneralRe: Printing Pin
johnpwalker9-Dec-04 4:43
Memberjohnpwalker9-Dec-04 4:43 
GeneralAnother tool based on this stuff Pin
bertaud7-Oct-03 22:55
Memberbertaud7-Oct-03 22:55 
GeneralRe: Another tool based on this stuff Pin
johnpwalker9-Dec-04 6:48
Memberjohnpwalker9-Dec-04 6:48 
GeneralRe: Another tool based on this stuff Pin
Anonymous13-Dec-04 3:49
MemberAnonymous13-Dec-04 3:49 
GeneralWorks only with IE Pin
pirannia3-Oct-03 3:05
Memberpirannia3-Oct-03 3:05 
GeneralRe: Works only with IE Pin
Wagner DosAnjos3-Oct-03 3:48
MemberWagner DosAnjos3-Oct-03 3:48 
GeneralRe: Works only with IE Pin
Wagner DosAnjos3-Oct-03 6:09
MemberWagner DosAnjos3-Oct-03 6:09 
GeneralRe: Works only with IE Pin
Anonymous28-Oct-04 2:06
MemberAnonymous28-Oct-04 2:06 
Generalvalores iguais Pin
Alegria23-Sep-03 4:14
MemberAlegria23-Sep-03 4:14 
GeneralTo Change the Orientation option Pin
Munirathnam kumar12-Aug-03 22:20
MemberMunirathnam kumar12-Aug-03 22:20 
GeneralI'm surprised Pin
Kocil20-Mar-03 4:59
MemberKocil20-Mar-03 4:59 
GeneralRe: I'm surprised Pin
jakesher8-Jun-03 8:30
Memberjakesher8-Jun-03 8: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.