How to draw a line graph using javascript

[srinivas]

Hi all,


I have one requirement.Is there any way to create a line graph
using javascript.If it is please send me the sample code.But the thing
is it should work in all browsers.

Thanks,
Srinivas

 

[Evertjan.]

srinivas wrote on 25 okt 2005 in comp.lang.javascript:

I have one requirement.Is there any way to create a line graph
using javascript.If it is please send me the sample code.But the thing
is it should work in all browsers.

For IE and probably other browsers too:

<http://groups.google.com/group/microsoft.public.scripting.jscript
/msg/2eb29ecafa6105bf>

 

[cwdjrxyz]

srinivas wrote on 25 okt 2005 in comp.lang.javascript:

For IE and probably other browsers too:

<http://groups.google.com/group/microsoft.public.scripting.jscript
/msg/2eb29ecafa6105bf>

Yes, you sometimes can create a simple graph with JS as suggested.
However if you do much of this, or wish to graph complex curves or
data-fit the curve to many points with some scatter, you need a math
program. The commercial programs are rather expensive. However you can
find a few free ones such as DataPlot. Such programs usually use a
higher level language such as Fortran or C+, but they are compiled so
that you do not have to have a compiler for the language installed on
your PC, and you do not have to know anything about a higher level
language to use them. These programs will draw the curve, show
individual data points if desired, and give the numerical units and
labels. Then you just use an image program to adjust the size as
desired and output as a jpg or other format suited for the web. This
method also has the advantage that it will work on any browser that can
view a jpg, even if script is turned off. It also saves you a large
amount of time if you use plots on the web very often. The down side is
that it can take a bit of time to learn how to use the math program the
first time.

 

[Randy Webb]

srinivas said the following on 10/25/2005 11:04 AM:

Hi all,


I have one requirement.

And it is an impossible requirement.

Is there any way to create a line graph using javascript.
Yes.

If it is please send me the sample code.

Search the archives, produce your first attempt, post it here. This is a
Usenet discussion group, not a free "do my homework for me" group.

But the thing is it should work in all browsers.

That "thing" is what makes your requirement impossible.

 

[VK]

I have one requirement.Is there any way to create a line graph

using javascript.If it is please send me the sample code.But the thing
is it should work in all browsers.

Look at:
<http://www.geocities.com/schools_ring/archives/VML_SVG.html>
(click on graph canvas to mark new points)

You can get the sample from:
<http://www.geocities.com/schools_ring/archives/VML_SVG.zip>

This VML script will work by default (no extra installations needed)
for all IE users (~82%)

Add SVG equivalents to cover the rest of the Web. For now it will
require SVG plugin installation. But the incoming major release of
FireFox (1.5) will have SVG support build-in.

Between VML & SVG (build-in or plugin) you cover all the web except
terminal browsers and few deviants you can crew on.

 

[VK]

few deviants you can crew on.

Just got on me that it sounds ambiguous. Of course I did not mean any
physical impairment but people who prefer to use some totally fantastic
browsers.

 

[cwdjrxyz]

Yes, you sometimes can create a simple graph with JS as suggested.
However if you do much of this, or wish to graph complex curves or
data-fit the curve to many points with some scatter, you need a math
program. The commercial programs are rather expensive. However you can
find a few free ones such as DataPlot. Such programs usually use a
higher level language such as Fortran or C+, but they are compiled so
that you do not have to have a compiler for the language installed on
your PC, and you do not have to know anything about a higher level
language to use them. These programs will draw the curve, show
individual data points if desired, and give the numerical units and
labels. Then you just use an image program to adjust the size as
desired and output as a jpg or other format suited for the web. This
method also has the advantage that it will work on any browser that can
view a jpg, even if script is turned off. It also saves you a large
amount of time if you use plots on the web very often. The down side is
that it can take a bit of time to learn how to use the math program the
first time.

If you are wanting to draw a curve that can be calculated from a
standard math formula rather than by fitting a curve to experimental
measurements with some scatter, then you can use the JS math functions
to do this. An old example of mine is at
http://www.cwdjr.net/math/bessel_function2.html . This plots the Bessel
function J0 . Since J0 is not part of JS math, this function is
evaluated from the definition of it, using the JS math functions that
are available. I have done a lot of math, so doing math using JS is no
problem for me. However those without a math background might find this
sort of thing difficult. Of course if you just want to plot some basic
math function such as sin that is built into JS, then there is nothing
difficult to calculate.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Tue, 25 Oct
2005 12:06:44, seen in Randy Webb

srinivas said the following on 10/25/2005 11:04 AM:

And it is an impossible requirement.


That "thing" is what makes your requirement impossible.

Well, it's pretty difficult to see how it could be done in Lynx, unless
Ascii-art is adequate, in which case any browser that can handle script
should do.

How many images can one put on a single page, if the images themselves
are simple?



In graphics\, fig-dot.gif (if I remember to upload it; otherwise use
fig-_) and fig-0.gif are here images of dot and 0, but pretend they are
white and black bricks and smaller. Then the following javascript code,
tested in my js-quick.htm, generated a very crude diagram of a black-
filled parabola.

for (y=-6;y<7;y++) {
for (x=-2;x<15;x++) { Z = ["dot", "0"][+(2*x>y*y)]
document.writeln("<img src='graphics/fig-", Z, ".gif'>") }
document.writeln("<br>") }

On a more recent machine, presumably more images can be used at
reasonable speed.


Also, if you prepare a set of 64 square GIFs, one for each combination
of the 8 principal spokes being present or absent, you can generate a
line drawing by computing which to write in a grid.

If they are transparent GIFs, then I think you can absolutely position
them on top of each other, and stretch/squash them to get lines at
computed angles. The axes, of course, would be prepared as a single
GIF, if of constant scale.

You'd prepare your data as a list or array, of course, and run through
it computing the output of each element.

If you can use only more recent browsers, you should probably use DOM
methods to construct the relevant part of the page.

Note also that HTML can display a BMP file, and AIUI the BMP format is
simple. You could use an application to compute a BMP, by adding your
overlay to your template, and display that.

 

[Randy Webb]

Dr John Stockton said the following on 10/26/2005 9:23 AM:

JRS: In article <[email protected]>, dated Tue, 25 Oct
2005 12:06:44, seen in Randy Webb



Well, it's pretty difficult to see how it could be done in Lynx, unless
Ascii-art is adequate, in which case any browser that can handle script
should do.

And non-JS browsers? That was the reason behing my "impossible
requirement". You could always simple generate the image on the server,
send it to the browser. But you still fall into the non-image capable
browsers.

How many images can one put on a single page, if the images themselves
are simple?

It's unlimited, based solely on the externals of the browser. RAM, CPU, etc.

This page:
<URL: http://members.aol.com/_ht_a/HikksNotAtHome/graphit/index.html >
Is one that was written a while back that allows a user to click on two
points and a line is drawn between them. It uses a 1x1 gif image and
moves them accordingly. Any grid larger than the one there tended to get
extremely slow to the point of hanging the browser.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated
Wed, 26 Oct 2005 14:04:43, seen in Randy Webb

Dr John Stockton said the following on 10/26/2005 9:23 AM:


And non-JS browsers?
...

Since the OP put "using javascript" ahead of "all browsers", ISTM that
he really meant "all javascript-enabled browsers". It seems likely that
he intends to use script to compose the graph.

So I was not denying that your sentence was applicable to the one
preceding it; merely pointing out its fundamental irrelevance.

 

[Randy Webb]

Dr John Stockton said the following on 10/27/2005 7:32 AM:

JRS: In article <[email protected]>, dated
Wed, 26 Oct 2005 14:04:43, seen in Randy Webb




Since the OP put "using javascript" ahead of "all browsers", ISTM that
he really meant "all javascript-enabled browsers". It seems likely that
he intends to use script to compose the graph.

I have no desire and no intentions of trying to figure out "what he
really meant". I read what he typed, I interpreted it literally, and I
answered correctly. If you can't handle it, move on.

So I was not denying that your sentence was applicable to the one
preceding it; merely pointing out its fundamental irrelevance.

In your eyes. Try reality for a change John.