Re: Seeking GD::Graph like goal-thermometer graph

I think your best bet, is to get an existing image of a thermometer, load it into GD, then paint a bar onto it. It might take some experimentation to get the pixel positions right.

BUT, I just googled, and saw this javascript code from fundraisingknowhow.com

You should be able to use it or reverse engineer it.

I'm not really a human, but I play one on earth. Cogito ergo sum a bum

Comment on Re: Seeking GD::Graph like goal-thermometer graph

Replies are listed 'Best First'.
Re^2: Seeking GD::Graph like goal-thermometer graph by chargrill (Parson) on Dec 18, 2006 at 16:24 UTC
Btw, the link you showed does do some of the implementation in javascript, but it really embeds some parameters to pass to a flash presentation that takes the "goal" and "current value" parameters. Not as easily reverse-engineerable as at first glance. The first thing I see when I look at that particular "thermometer" is that you could easily accomplish that effect (assuming that we're showing this on the web) by overlaying two pictures... One, a rectangular 'meter' showing the appropriate amount of 'mercury', and overlaid on top of that a picture that has a transparent cutout of the shape of the thermometer so you can see the mercury through the transparent cutout. The placement (especially the z-index, how far "forward" to set the overlay) could be set via css. Surely similar to how the fundraisingknowhow folks do it via flash. Assuming the OP already has the graphing bit down, this solution depends on some HTML + CSS to finish things off. --chargrill `s*lil; $=join'',sort split q; s;.;grr; &&s+(.(.)).+$2$1+; $; = qq-$_-;s,.,ahc,;$,.=chop for split q,,,reverse;print for($,,$;,$,$/)` [download]	[reply] [d/l]

Replies are listed 'Best First'.

Re^2: Seeking GD::Graph like goal-thermometer graph
by chargrill (Parson) on Dec 18, 2006 at 16:24 UTC

Btw, the link you showed does do some of the implementation in javascript, but it really embeds some parameters to pass to a flash presentation that takes the "goal" and "current value" parameters. Not as easily reverse-engineerable as at first glance.

The first thing I see when I look at that particular "thermometer" is that you could easily accomplish that effect (assuming that we're showing this on the web) by overlaying two pictures... One, a rectangular 'meter' showing the appropriate amount of 'mercury', and overlaid on top of that a picture that has a transparent cutout of the shape of the thermometer so you can see the mercury through the transparent cutout. The placement (especially the z-index, how far "forward" to set the overlay) could be set via css.

Surely similar to how the fundraisingknowhow folks do it via flash.

Assuming the OP already has the graphing bit down, this solution depends on some HTML + CSS to finish things off.

--chargrill

s**lil*;  $*=join'',sort split q**;  s;.*;grr; &&s+(.(.)).+$2$1+; $; =
qq-$_-;s,.*,ahc,;$,.=chop for split q,,,reverse;print for($,,$;,$*,$/)
[download]

[reply]
[d/l]