Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (37)

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

By , 30 Sep 2003
 

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
No Biography provided

Article Top
 
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.
Search this forum  
    Spacing  Noise  Layout  Per page   
First PrevNext
QuestionPrintingmemberMember 407347615 Feb '08 - 10:13 
Confused | :confused: Has anyone been able to figure out the printing problem associated with line graphs?
Sign In·View Thread·Permalink
Generalcomparison of two datememberypki6 Aug '07 - 17:46 
how can i compare two date with this plot graph? At present there only the result for one data.
Thks,
Yesu
Sign In·View Thread·Permalink
QuestionCan you assist me...memberPunprom Kasemsant6 Jun '07 - 6:52 
I do like this article, especially interested in the horizontal one with the line on the chart.
Would like it to be multiple colored and I did attempt to do it but failed to do, best was that color changed but tends to be all of the bars not individually. Since, I am novice at Javascript, can someone assist me please.
Thanks in advance OMG | :OMG:

Sign In·View Thread·Permalink
GeneralSuper!memberdgaudian9 May '07 - 2:20 
This was just what I was looking for. It's great!
BTW, has anyone extended this class to allow 2 or more sets of values? Like "Page hits for two different servers per month?" Or is this task up to my poor self? Wink | ;)
I'll post an update, should I succeed...
Sign In·View Thread·Permalink
GeneralChange markColor for each "dot"memberssalter200314 Jun '06 - 8:36 
How to change the markColor for each point that is plotted?
 
Would it be possible to pass the required color in the xValues variable?
 
ie: bg.xValues[0] = [188,'Rio de Janeiro','red'] and bg.xValues[1] = [180,'Sao Paulo','blue'];
 
???
 
Sign In·View Thread·Permalink
GeneralRe: Change markColor for each "dot"memberssalter200314 Jun '06 - 14:00 
Ok, I just needed to think a bit. To pass the color for a specific point you need to declare a markColor array inside Graph.js.
 
var markColor = new Array();
 

Then, around line 249 you just add this:
 
// Plot Bars
for (var x=0; x < bg.xValues.length; x++){
 
v=bg.xValues[x][0];
--->> markColor[x]=bg.xValues[x][2];
 
Then in the call to DrawLine which is in a loop with i as a counter:
 
DrawLine(bg.lineWidth, bg.lineColor, bg.markSize, markColor[i],
 
works like a charm.
Smile | :)

Sign In·View Thread·Permalink
GeneralCall from within a functionmemberSu_3019 Jan '06 - 12:43 
The sample works when used as posted. However when I put the "test" statements in a function and call the function on body load/other event driven function (href), I get a javascript error. Basically the d.write part writes to the main document instead of the "here" cell. any idea what the reason could be?
 
<HTML>
<head>
<script language=JavaScript src=Graph.js></script>
<script language=JavaScript>
function vTest() {
            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 = false;
     bg.draw();
 
}
</script></head>
<BODY style="font-family: Arial;">
<table align=center>
     <tr>
          <td width="5%">Test</td>
          <td id=here></td>
<!-- Does not work when clicked -->
          <td valign=top width="5%"><a href="javascript:vTest();">Test</a></td>
     </tr>
</table>
<script>
// Works fine
vTest();
</script>
 
</body>
</html>
Sign In·View Thread·Permalink
QuestionAny updates on Mozilla Support?memberibhotla12 Sep '05 - 11:52 
Hi,
 
Do you have any new version coming by your way for the Mozilla support for the line graphs? Just wondering...
 
BTW, this is really a wonderful tool without using Applets.
 
Thank You,
Lakshmi.
Sign In·View Thread·Permalink
GeneralPrinting Problem Headway (some)memberMaHeidHurtz29 Apr '05 - 5:14 
RE: The Printing problem mentioned in earlier posts - I too have been having the same problem and have been trying to work my way through the code.
 
Using the Line Graph function :-
I think that the problem lies in the fact that most of the graph (everything except the Line and Red dots) is wrapped in an Element called "wrapper" and this Element "moves" whilst the Line itself (and associated Red dots) does not. Frown | :(
 
I wanted to use this excellent utility in a web page which used Cascading Style Sheets (my CSS file configured the <H2> Header). I found that by adjusting the <H2> Font-Size in this configuration, I could make the "wrapper" Element move up and down the page but, unfortunately, the Line did not move with it, on account of it not being part of this Element.
 
I'm new to DHTML, Graphics on a Web Page using Elements etc so I'm a bit in the dark as to how to get around this problem. Confused | :confused: Perhaps someone with a lot more experience in this field could help ?
 
PS Well done on a fantastic utility. Cool | :cool:
Sign In·View Thread·Permalink
GeneralN seriesmemberjhony_vazquez16 Jul '04 - 14:37 
Esta grafica puede manejar n series.
Sign In·View Thread·Permalink
Last Visit: 31 Dec '99 - 18:00     Last Update: 24 May '13 - 15:26Refresh1234 Next »

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

About Article
JavaScript Graph object to plot Column and Line Graphs. Only JavaScript and DHTML required.
Type Article
Licence 
First Posted 15 Dec 2002
Views 200,889
Bookmarked 67 times
Top News

Old Japanese Man Creates Amazing Art Using Excel (Wait, Excel?)

Get the Insider News free each morning.
Related Videos
96 Construct 2 - making a new line in your textbox
66 Construct 2 - adding torque to your object
A flexible charting library for .NET
Plot Graphic Library
JavaScript Chart
Expression Plotter Control
Line Graph Component in C#
Silverlight based AJAX line graph
2D Graph ActiveX Control
DSGraphEdit: A Reasonable Facsimile of Microsoft's GraphEdit in .NET
High Speed, Feature Rich, and Easy-To-Use Graphs and Charts
ASP.NET MVC Chart Control
A WPF-powered 3D graphing library
Dynamic JQPlot
A 2D data visualisation class
A Guide to using MSChart for .NET
QuickGraph: A 100% C# graph library with Graphviz Support.
Database Visualization
Custom Control Graph and Process Bar
WPF: A graph control
Creating Line Chart For WebForms Using C#.
Introduction to Graph with Breadth First Search(BFS) and Depth First Search(DFS) Traversal Implemented in JAVA
Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130523.1 | Last Updated 1 Oct 2003
Article Copyright 2002 by Wagner DosAnjos
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid