Graphs and such

This site is best viewed in a modern browser with JavaScript enabled.

McLOVIN

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,

rnd_me

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

ZeroKilled

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

McLOVIN

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.

rnd_me

McLOVIN;939393 wrote:
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.

McLOVIN

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,

rnd_me

McLOVIN;939501 wrote:
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.