How to draw a line graph using javascript

Discussion in 'Javascript' started by srinivas, Oct 25, 2005.

  1. srinivas

    srinivas Guest

    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
     
    srinivas, Oct 25, 2005
    #1
    1. Advertising

  2. srinivas

    Evertjan. Guest

    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>

    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
     
    Evertjan., Oct 25, 2005
    #2
    1. Advertising

  3. srinivas

    Guest

    Evertjan. wrote:
    > 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>



    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.
     
    , Oct 25, 2005
    #3
  4. srinivas

    Randy Webb Guest

    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.
    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Oct 25, 2005
    #4
  5. srinivas

    VK Guest

    > 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, Oct 25, 2005
    #5
  6. srinivas

    VK Guest

    > 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.
     
    VK, Oct 25, 2005
    #6
  7. srinivas

    Guest

    wrote:
    > Evertjan. wrote:
    > > 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>

    >
    >
    > 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.
     
    , Oct 25, 2005
    #7
  8. JRS: In article <>, dated Tue, 25 Oct
    2005 12:06:44, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    >srinivas said the following on 10/25/2005 11:04 AM:


    >> I have one requirement.

    >
    >And it is an impossible requirement.
    >
    >> Is there any way to create a line graph using javascript.


    >> But the thing is it should work in all browsers.

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


    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    The Big-8 newsgroup management is attempting to legitimise its questionable
    practices while retaining its elitist hegemony. Read <URL:news:news.groups>.
     
    Dr John Stockton, Oct 26, 2005
    #8
  9. srinivas

    Randy Webb Guest

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

    > JRS: In article <>, dated Tue, 25 Oct
    > 2005 12:06:44, seen in news:comp.lang.javascript, Randy Webb
    > <> posted :
    >
    >>srinivas said the following on 10/25/2005 11:04 AM:

    >
    >
    >>> I have one requirement.

    >>
    >>And it is an impossible requirement.
    >>
    >>
    >>>Is there any way to create a line graph using javascript.

    >
    >
    >>>But the thing is it should work in all browsers.

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


    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.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Oct 26, 2005
    #9
  10. JRS: In article <>, dated
    Wed, 26 Oct 2005 14:04:43, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    >Dr John Stockton said the following on 10/26/2005 9:23 AM:
    >
    >> JRS: In article <>, dated Tue, 25 Oct
    >> 2005 12:06:44, seen in news:comp.lang.javascript, Randy Webb
    >> <> posted :
    >>
    >>>srinivas said the following on 10/25/2005 11:04 AM:

    >>
    >>>> I have one requirement.
    >>>
    >>>And it is an impossible requirement.
    >>>
    >>>
    >>>>Is there any way to create a line graph using javascript.

    >>
    >>
    >>>>But the thing is it should work in all browsers.
    >>>
    >>>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.

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

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Oct 27, 2005
    #10
  11. srinivas

    Randy Webb Guest

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

    > JRS: In article <>, dated
    > Wed, 26 Oct 2005 14:04:43, seen in news:comp.lang.javascript, Randy Webb
    > <> posted :
    >
    >>Dr John Stockton said the following on 10/26/2005 9:23 AM:
    >>
    >>
    >>>JRS: In article <>, dated Tue, 25 Oct
    >>>2005 12:06:44, seen in news:comp.lang.javascript, Randy Webb
    >>><> posted :
    >>>
    >>>
    >>>>srinivas said the following on 10/25/2005 11:04 AM:
    >>>
    >>>>> I have one requirement.
    >>>>
    >>>>And it is an impossible requirement.
    >>>>
    >>>>
    >>>>
    >>>>>Is there any way to create a line graph using javascript.
    >>>
    >>>
    >>>>>But the thing is it should work in all browsers.
    >>>>
    >>>>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.

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


    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.


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Oct 27, 2005
    #11
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. _andrea.l
    Replies:
    3
    Views:
    3,648
    Francesco Devittori
    Jan 17, 2006
  2. momobear
    Replies:
    0
    Views:
    271
    momobear
    Mar 24, 2007
  3. =?iso-8859-1?Q?Vicente_Garc=EDa?=

    Draw a graph :(

    =?iso-8859-1?Q?Vicente_Garc=EDa?=, Aug 31, 2007, in forum: ASP .Net
    Replies:
    7
    Views:
    569
    =?utf-8?Q?Vicente_Garc=C3=ADa?=
    Sep 1, 2007
  4. Emilio Mayorga
    Replies:
    6
    Views:
    364
    Martien Verbruggen
    Oct 8, 2003
  5. Replies:
    9
    Views:
    172
    Dr John Stockton
    Aug 31, 2006
Loading...

Share This Page