XY graph

Grumps · Aug 4, 2010

Hi all.
This should be simple, but I'm trying to find a js that will draw a simple
line graph.
I've googled and found loads, and tried several too, but they all lack the
basic requirements.
1) Need to enter x,y coords.
2) Need to be able to define x and y axis upper and lower limits.
3) Need to be able to label and number the axes.
4) Needs to work with FF, Opera, Chrome, Safari and IE (from 6 up).
5) Doesn't have to be free.

http://danvk.org/dygraphs/ is the closest, but I can't find how to set the
axes' values. I'd like hours along the x-axis in steps of 6 hours.
TIA for any suggestions.

Ry Nohryb · Aug 4, 2010

(...)
http://danvk.org/dygraphs/is the closest, but I can't find how to set the
axes' values. I'd like hours along the x-axis in steps of 6 hours.
TIA for any suggestions.

But it renders in a <canvas> and that's not in any IE...
There's a <canvas> plugin/extension for IEs but last time I tried it
it was a complete disaster. And IMO it's not a very good thing to ask
the users to install a plugin to see your page, or is it? I think that
your options are:

Drop IE from the list and use a <canvas> and/or a library such as
http://raphaeljs.com/ (SVG) or any other.

or

use flash,

or

build the graphs on the server, e.g. http://code.google.com/apis/chart/

or

draw the pixels as <td>s in a <table>, e.g. http://jorgechamorro.com/cljs/028/

HTH,

Grumps · Aug 4, 2010

But it renders in a <canvas> and that's not in any IE...
There's a <canvas> plugin/extension for IEs but last time I tried it
it was a complete disaster. And IMO it's not a very good thing to ask
the users to install a plugin to see your page, or is it?

100% not a good idea for my customers.

I think that
your options are:

Drop IE from the list and use a <canvas> and/or a library such as
http://raphaeljs.com/ (SVG) or any other.

Raphael looks nice and easy. It does seem to work with IE8. Should it work?

use flash,

Ah, it needs to run on an iPhone (no flash).

build the graphs on the server, e.g. http://code.google.com/apis/chart/
draw the pixels as <td>s in a <table>, e.g.
http://jorgechamorro.com/cljs/028/

I'll look into both of those too.

HTH,

It does. Thank you.

Grumps · Aug 5, 2010

Richard Cornford said:
Did you mean "it doesn't seem to work with IE8"? Otherwise you next
question doesn't make much sense.

No. It DOES work. I'm only drawing vectors and circles.

<snip>

IE 8 has an 'interesting' feature where it will not do VML on a page in
'standards' mode, only on pages in 'quirks' mode. As IE 8 doesn't do SVG
Raphael will only work on IE 8 in 'quirks' mode.

Then I guess IE8's quirks mode is good enough to render my Raphael output.

Unfortunately that makes the <canvas> emulations that uses VML for its
emulation on IE significantly less viable.

You mean that it shouldn't work?

Michael Haufe (\TNO\) · Aug 5, 2010

IE 8 has an 'interesting' feature where it will not do VML on a page in
'standards' mode, only on pages in 'quirks' mode. As IE 8 doesn't do SVG
Raphael will only work on IE 8 in 'quirks' mode.

IE8 Standards Mode + VML seems to work just fine:

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:rect{
behavior:url(#default#VML);
display:inline-block;
width:100px;
height:100px;
}
</style>
</head>
<body>
<v:rect fillcolor="green" />
</body>
</html>

Dr J R Stockton · Aug 5, 2010

In comp.lang.javascript message <[email protected]

This should be simple, but I'm trying to find a js that will draw a simple
line graph.
I've googled and found loads, and tried several too, but they all lack the
basic requirements.
1) Need to enter x,y coords.
2) Need to be able to define x and y axis upper and lower limits.
3) Need to be able to label and number the axes.
4) Needs to work with FF, Opera, Chrome, Safari and IE (from 6 up).
5) Doesn't have to be free.

All that can be done with a canvas, provided that you invert the 6 for
IE.

An occasional poster here has commended something else, which I read
about in Wikipedia; if I could recall what it's called, I'd say. Aha! :
<http://en.wikipedia.org/wiki/HTML_canvas> links to
<http://en.wikipedia.org/wiki/Scalable_Vector_Graphics>. SVG. IE9.

If, however, you can settle for a histogram style - and histograms can
have thin bars - or for just dots plus horizontal and vertical lines,
then study <URL:http://www.merlyn.demon.co.uk/js-misc1.htm> for ideas

Jesse · Aug 5, 2010

IE8 Standards Mode + VML seems to work just fine:

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:rect{
behavior:url(#default#VML);
display:inline-block;
width:100px;
height:100px;
}
</style>
</head>
<body>
<v:rect fillcolor="green" />
</body>
</html>

Not sure if you've seen flot?
Very good javascript graphing library, uses canvas for non IE and uses
excanvas for IE. Haven't had any problems with it in IE
http://code.google.com/p/flot/

Jesse · Aug 5, 2010

IE8 Standards Mode + VML seems to work just fine:

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:rect{
behavior:url(#default#VML);
display:inline-block;
width:100px;
height:100px;
}
</style>
</head>
<body>
<v:rect fillcolor="green" />
</body>
</html>

Not sure if you've seen flot?
Very good javascript graphing library, uses canvas for non IE and uses
excanvas for IE. Haven't had any problems with it in IE
http://code.google.com/p/flot/

Ry Nohryb · Aug 6, 2010

It does. Thank you.

You're welcome.
I for one would use the <canvas> thingy: http://jorgechamorro.com/cljs/102/
So sorry that Microsoft doesn't want us to use it

Simple (x,y) graph	3	Mar 28, 2023
Trying to build a SARIMAX model to forecast the S&P500 trend	0	Nov 5, 2023
Flip a graph	1	Jan 4, 2014
turning series on/off - Graph JavaScript	3	Feb 15, 2012
Weird Behavior with Rays in C and OpenGL	4	Feb 13, 2024
Trouble with prediction code, for the life of me I can't figure out why it isnt running properly. Help would be appreciated.	0	Jul 8, 2023
Matplotlib. co-ordinates for scatter plot are off	1	Nov 26, 2013
Hash ID to XY Coordinates	0	Dec 5, 2010

XY graph

Grumps

Ry Nohryb

Grumps

Grumps

Michael Haufe (\TNO\)

Dr J R Stockton

Jesse

Jesse

Ry Nohryb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads