www.webdeveloper.com
Results 1 to 7 of 7

Thread: Graphs and such

Hybrid View

  1. #1
    Join Date
    Sep 2007
    Posts
    6

    Graphs and such

    I am working on a page that needs to display a number of graphs and when an individual bar is clicked a popup needs to be displayed to display a pie chart that is relevant to that bar.

    At the moment I am using Flotr to produce the graphs and to handle the events, which is working very well, but flotr does not handle pie charts. I have included the plotr javascript in an attempt to draw pie charts but it seems to be causing errors with canvasNodes.

    Does anyone know any graphing libraries in javascript that can be used to draw graphs and pie charts and handle events or a suitable replacement?

    Thanks,

    M

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    circles are tough for javascript, haven't seen too many pie charts.
    a one-bar segmented graph might be used to convey the same proportions...

  3. #3
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    i'm not fanatic of this library but i once saw a library that draw different shape. maybe you can use this library for the pie graph drawing. http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  4. #4
    Join Date
    Sep 2007
    Posts
    6
    Flotr and Plotr are actually very good libraries for plotting graphs and pie charts. The problem I am having is that events are only supported in flotr and pie charts are only supported in plotr. I am going to attempt to rewrite plotr to allow event handling. Ill report back if Im successful.

    M

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by McLOVIN View Post
    Flotr and Plotr are actually very good libraries for plotting graphs and pie charts. The problem I am having is that events are only supported in flotr and pie charts are only supported in plotr. I am going to attempt to rewrite plotr to allow event handling. Ill report back if Im successful.

    M
    if it uses a canvas, you could do a trick i used on a color-picker script.
    i had a nice image of a full-color spectrum.

    i took the coords from the canvas onclick event and matched the corresponding pixel from the canvas's context's imageData.

    i then had the RGB value of the color they clicked on.

    if it doesn't use canvas, it probably uses a bunch of tiny HTML elements, and you can easily bind events to these.

    using something comparable, i would think it easy to match a color to a category, and launch the apropos action.


    this means you don't have to dive into the rendering code.

    if it doesn't use canvas, it probably uses a bunch of tiny HTML elements, which you can easily bind events to.
    Last edited by rnd me; 10-09-2008 at 09:41 AM.

  6. #6
    Join Date
    Sep 2007
    Posts
    6
    You're right in saying that it uses canvas, well it uses an emulated canvas. At the moment I have it returning the x and positions relative to the containing object and to the entire page.

    Its quite an interesting idea to use the rgb value of an image layed over the top, I was trying to get information about which bar it was from the dom element but I may try that method.

    Thanks,

    M

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by McLOVIN View Post
    Its quite an interesting idea to use the rgb value of an image layed over the top, I was trying to get information about which bar it was from the dom element but I may try that method.

    Thanks,
    M
    this goes back to the qBasic pGet function.
    i know it's almost cheating, but after trying to double-map my image into an array for the same purpose, i realized i already the data i needed in the image.
    this let me vastly simplify my code and use a lot less memory as well.

    not sure how well this woould work in IE though, so perhaps an array of corners and a good range finding loop would be better from max compat.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles