Click here to Skip to main content
Licence 
First Posted 15 Dec 2002
Views 192,302
Bookmarked 67 times

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

By | 30 Sep 2003 | Article
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

About the Author

Wagner DosAnjos



United States United States

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
QuestionPrinting PinmemberMember 407347610:13 15 Feb '08  
Generalcomparison of two date Pinmemberypki17:46 6 Aug '07  
QuestionCan you assist me... PinmemberPunprom Kasemsant6:52 6 Jun '07  
GeneralSuper! Pinmemberdgaudian2:20 9 May '07  
GeneralChange markColor for each "dot" Pinmemberssalter20038:36 14 Jun '06  
GeneralRe: Change markColor for each "dot" Pinmemberssalter200314:00 14 Jun '06  
GeneralCall from within a function PinmemberSu_3012:43 19 Jan '06  
QuestionAny updates on Mozilla Support? Pinmemberibhotla11:52 12 Sep '05  
GeneralPrinting Problem Headway (some) PinmemberMaHeidHurtz5:14 29 Apr '05  
GeneralN series Pinmemberjhony_vazquez14:37 16 Jul '04  
GeneralPassing variables Pinmembermurthy6415:34 17 Apr '04  
GeneralRe: Passing variables Pinmembermurthy649:48 20 Apr '04  
GeneralPrinting PinmemberJeremy Davis3:14 18 Mar '04  
GeneralRe: Printing Pinmemberjohnpwalker3:43 9 Dec '04  
GeneralAnother tool based on this stuff Pinmemberbertaud21:55 7 Oct '03  
GeneralRe: Another tool based on this stuff Pinmemberjohnpwalker5:48 9 Dec '04  
GeneralRe: Another tool based on this stuff PinsussAnonymous2:49 13 Dec '04  
GeneralWorks only with IE Pinmemberpirannia2:05 3 Oct '03  
GeneralRe: Works only with IE PinmemberWagner DosAnjos2:48 3 Oct '03  
GeneralRe: Works only with IE PinmemberWagner DosAnjos5:09 3 Oct '03  
GeneralRe: Works only with IE PinsussAnonymous1:06 28 Oct '04  
Generalvalores iguais PinmemberAlegria3:14 23 Sep '03  
GeneralTo Change the Orientation option PinmemberMunirathnam kumar21:20 12 Aug '03  
GeneralI'm surprised PinmemberKocil3:59 20 Mar '03  
GeneralRe: I'm surprised Pinmemberjakesher7:30 8 Jun '03  

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.

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