Click here to Skip to main content
11,721,385 members (82,654 online)
Click here to Skip to main content

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

, 30 Sep 2003 217K 3K 67
Rate this:
Please Sign up or sign in to vote.
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

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

Share

About the Author

Wagner DosAnjos
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionPrinting Pin
Member 407347615-Feb-08 10:13
memberMember 407347615-Feb-08 10:13 
Generalcomparison of two date Pin
ypki6-Aug-07 17:46
memberypki6-Aug-07 17:46 
QuestionCan you assist me... Pin
Punprom Kasemsant6-Jun-07 6:52
memberPunprom Kasemsant6-Jun-07 6:52 
GeneralSuper! Pin
dgaudian9-May-07 2:20
memberdgaudian9-May-07 2:20 
GeneralChange markColor for each "dot" Pin
ssalter200314-Jun-06 8:36
memberssalter200314-Jun-06 8:36 
GeneralRe: Change markColor for each "dot" Pin
ssalter200314-Jun-06 14:00
memberssalter200314-Jun-06 14:00 
GeneralCall from within a function Pin
Su_3019-Jan-06 12:43
memberSu_3019-Jan-06 12:43 
QuestionAny updates on Mozilla Support? Pin
ibhotla12-Sep-05 11:52
memberibhotla12-Sep-05 11:52 
GeneralPrinting Problem Headway (some) Pin
MaHeidHurtz29-Apr-05 5:14
memberMaHeidHurtz29-Apr-05 5:14 
GeneralN series Pin
jhony_vazquez16-Jul-04 14:37
memberjhony_vazquez16-Jul-04 14:37 
GeneralPassing variables Pin
murthy6417-Apr-04 15:34
membermurthy6417-Apr-04 15:34 
GeneralRe: Passing variables Pin
murthy6420-Apr-04 9:48
membermurthy6420-Apr-04 9:48 
GeneralPrinting Pin
Jeremy Davis18-Mar-04 3:14
memberJeremy Davis18-Mar-04 3:14 
GeneralRe: Printing Pin
johnpwalker9-Dec-04 3:43
memberjohnpwalker9-Dec-04 3:43 
GeneralAnother tool based on this stuff Pin
bertaud7-Oct-03 21:55
memberbertaud7-Oct-03 21:55 
GeneralRe: Another tool based on this stuff Pin
johnpwalker9-Dec-04 5:48
memberjohnpwalker9-Dec-04 5:48 
GeneralRe: Another tool based on this stuff Pin
Anonymous13-Dec-04 2:49
sussAnonymous13-Dec-04 2:49 
GeneralWorks only with IE Pin
pirannia3-Oct-03 2:05
memberpirannia3-Oct-03 2:05 
GeneralRe: Works only with IE Pin
Wagner DosAnjos3-Oct-03 2:48
memberWagner DosAnjos3-Oct-03 2:48 
GeneralRe: Works only with IE Pin
Wagner DosAnjos3-Oct-03 5:09
memberWagner DosAnjos3-Oct-03 5:09 
GeneralRe: Works only with IE Pin
Anonymous28-Oct-04 1:06
sussAnonymous28-Oct-04 1:06 
Generalvalores iguais Pin
Alegria23-Sep-03 3:14
memberAlegria23-Sep-03 3:14 
GeneralTo Change the Orientation option Pin
Munirathnam kumar12-Aug-03 21:20
memberMunirathnam kumar12-Aug-03 21:20 
GeneralI'm surprised Pin
Kocil20-Mar-03 3:59
memberKocil20-Mar-03 3:59 
GeneralRe: I'm surprised Pin
jakesher8-Jun-03 7:30
memberjakesher8-Jun-03 7:30 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 1 Oct 2003
Article Copyright 2002 by Wagner DosAnjos
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid