XY graph


G

Grumps

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

Advertisements

R

Ry Nohryb

(...)
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,
 
G

Grumps

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.

It does. Thank you.
 
G

Grumps

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?
 
M

Michael Haufe (\TNO\)

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

Dr J R Stockton

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
 
Ad

Advertisements

J

Jesse

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/
 
J

Jesse

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/
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top