Click here to Skip to main content
Click here to Skip to main content

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

, 30 Sep 2003
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

Comments and Discussions

 
QuestionPrinting PinmemberMember 407347615-Feb-08 11:13 
Generalcomparison of two date Pinmemberypki6-Aug-07 18:46 
QuestionCan you assist me... PinmemberPunprom Kasemsant6-Jun-07 7:52 
GeneralSuper! Pinmemberdgaudian9-May-07 3:20 
GeneralChange markColor for each "dot" Pinmemberssalter200314-Jun-06 9:36 
GeneralRe: Change markColor for each "dot" Pinmemberssalter200314-Jun-06 15:00 
GeneralCall from within a function PinmemberSu_3019-Jan-06 13:43 
QuestionAny updates on Mozilla Support? Pinmemberibhotla12-Sep-05 12:52 
GeneralPrinting Problem Headway (some) PinmemberMaHeidHurtz29-Apr-05 6:14 
GeneralN series Pinmemberjhony_vazquez16-Jul-04 15:37 
GeneralPassing variables Pinmembermurthy6417-Apr-04 16:34 
GeneralRe: Passing variables Pinmembermurthy6420-Apr-04 10:48 
GeneralPrinting PinmemberJeremy Davis18-Mar-04 4:14 
GeneralRe: Printing Pinmemberjohnpwalker9-Dec-04 4:43 
GeneralAnother tool based on this stuff Pinmemberbertaud7-Oct-03 22:55 
GeneralRe: Another tool based on this stuff Pinmemberjohnpwalker9-Dec-04 6:48 
GeneralRe: Another tool based on this stuff PinsussAnonymous13-Dec-04 3:49 
GeneralWorks only with IE Pinmemberpirannia3-Oct-03 3:05 
GeneralRe: Works only with IE PinmemberWagner DosAnjos3-Oct-03 3:48 
GeneralRe: Works only with IE PinmemberWagner DosAnjos3-Oct-03 6:09 
GeneralRe: Works only with IE PinsussAnonymous28-Oct-04 2:06 
Generalvalores iguais PinmemberAlegria23-Sep-03 4:14 
GeneralTo Change the Orientation option PinmemberMunirathnam kumar12-Aug-03 22:20 
GeneralI'm surprised PinmemberKocil20-Mar-03 4:59 
GeneralRe: I'm surprised Pinmemberjakesher8-Jun-03 8: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
Web02 | 2.8.141220.1 | Last Updated 1 Oct 2003
Article Copyright 2002 by Wagner DosAnjos
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid