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

Has anyone been able to figure out the printing problem associated with line graphs?

how can i compare two date with this plot graph? At present there only the result for one data.
Thks,
Yesu

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:

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...

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'];

???

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 | :)

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>

<td valign=top width="5%"><a href="javascript:vTest();">Test</a></td>
</tr>
</table>
<script>
// Works fine
vTest();
</script>

</body>
</html>

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.

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:

Esta grafica puede manejar n series.

Getting no where while trying to set the bg.xValues in the sample code
as

var x = new Array();
x[0]=2;x[1]=3;x[2]=4;
for(i=0; i < x.length;i++) {
bg.xValue[i]=[x[i],i]
}

The graph won't display! Also, the html samples given the package draw a line and set the orientation of the graph which could not be realized in practice while testing on a IE6 browser. Otherwise, the package is great!

Thanks

hello

That problem with variables is gone. Now, I want to show some tables along with graph. Currently I only see the graph. Also the Graph.js seems to error out at the line

// Stablish parenthood^M
bg.parent.appendChild(d.getElementById('wrapper'));^M

in the function DrawGraphH

hello

Great bit of code! Cool | :cool:

When I printed the horizontal bar line example, (1) the line does not appear until I change my printing option to print background colours, and (2) the line is about 17 point too low. Basically the print out does not match the display. Something to do with IE? Cry | :((

If I get time I'll look at doing a cure, but it won't be for a while yet...

I feel like I'm diagonally parked in a parallel universe

Jerry Davis
http://www.astad.org
http://www.jvf.co.uk

I have the same printing problem. In the "Print Preview" it shows the line graph lower than the displayed line. It may be related to the page offsets (since the display has no top/left margins) but if I adjust the print setup margins, it has no relative impact on the lines.

A truly wonderful package, but I can't print it. The Bar graph prints fine, just the line graph, which is what I really need.

We designed a script, higly inspired from Wagner's job, to plot mathematical or physical datas like x versus y.
It can be seen at http://www.javascriptfr.com/code.aspx?ID=16228
The script is in french but all is in the zip file.
It appears (I'm surprised and slightly accross against it) that one has to be registred to get the source (it's free). However, I'm ready to mail it to anyone interested.

Wagner, I hope you will feel it ok to make a little advert on this !!! Smile | :)

Etienne

From what I can understand from your tool, you've resolved the printing issue that Wagner has in his code. Did you find out how to fix it, or does it just work by accident?
Was it in the Style Sheet?
Any clues to fix Wagners code would be a great help.
Thanks

I think it works by accident (actually I did not try to print any of the curves I've created) Confused | :confused:

I tried to run this one on Mozilla, it doesn't work (it show something but looks ugly)

It requires IE5.5+. Unfortunately, I didn't have the time to port it to Netscape/Mozilla.

-Wagner

I just released version 2.1 with limited support to Netscape 6+ (no line graphs).

-Wagner

Works with Mozilla Firefox

Wagner,
Antes de mais nada gostaria de lhe dar os parabéns pelo excelente script. Há muito tempo vinha procurando por algo com essa função.
Bem, eu tive um pequeno probleminha com seu script e não sei como resolvê-lo. Num gráfico onde existem valores iguais adjacentes, o script não traça a linha entre esses pontos. Onde deve ser feita a mudança?
Desde já agradeço sua atenção.

If somebody has implimented the code changes to implement Orientation option (From horizontal to vertical ), please send me the Code.
My Project requires Vertical option.

thanks in advance

-Kumar

I though this could only be achieved with applet.
OMG | :OMG:

Who uses applets...?

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

Introduction

Browser Compatibility:

Limitations:

Usage

Change History

License

Comments and Discussions