Speedometer Style Graph with Javascript

[Moebius01]

I've been searching around all morning, but with no luck. I manage a Web based realtime reporting system for my company. Basically, it uses custom asp.net code to retrieve various values from the database, then javascript to format and display at the browser level. Till now, I've done mostly textual based layouts, but have had some requests for graphical based, specifically speedometer and thermoeter style graphs.

The idea would be to graph a value out of 100% on a speedometer style readout, to allow the Ops folks an at-a-glance view of certain performance metrics.

Has anyone seen or written code to achieve something like this? I'm sure it's doable, but my javascript has gotten quite fuzzy in the last 18 months, and I'm on a somewhat tight timeline.

 

[jemminger]

check out the "Gauge" at

http://www.bindows.net

looks to be IE only however


-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[BabyJeffy]

It may be that referring to them as "Pie Charts" would get you a better list of search hits? Just a thought... since a Pie Chart with 2 values is the same as your "Spedo" idea.

You could generate the image server-side with ease... presenting a complete image to the browser... and auto-refresh every X minutes.

Just some ideas.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[BillyRayPreachersSon]

In the latest Firefox, you could use the canvas object... in IE, you could use VML, you could use SVG in any browser that supports it, or for a most-cross-browser solution, you could use absolutely-positioned DIV elements to do the job, as long as you don't want anything too big (more than about 1600 'pixels' and rendering starts to become laggy).

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Moebius01]

After thinking about it, I'm starting to dig into some of the analog clock scripts I've found. It seems to me the principal would be similar, just instead of 360 degrees, I'd be looking at between 180 and 270 or so (depending on the design).

 

[theniteowl]

You could do the needle display with some dynamically generated CSS. Determine how many pixels high the needle will display then determine for each increment of the needle how many pixels from the left the top of the needle will show and at what increments each next lower pixel will be from the left.
If you are good with the calculations you can generate an algorythm to output the numbers automatically based on the base of the needle and it's top position.
Or you can create a graphic of the needle in each position you may display and use that to determine pixels from the left and width of the section of needle at each line (assuming the needel is greater than 1 pixel wide). Store that data in an array and use it to generate the CSS values dynamically.

The easiest way is to have multiple graphics for the needles and swap them as needed.
If you choose this route you could have each image contain multiple needle positions then use another overlay image to mask out sections that should not be shown. Creatively using two images will let you reduce the total number of images needed.
Also, if you put a large circle centered in the speedometer where the needle appears to come from then your needle image can be much smaller and you do not have to worry about overlap of multiple images at the base of the needle as it would not come close to the bottom.

I wish I had some time I would love to try writing something to do this.

BTW, IE5+ has the ability to rotate a DIV object and everything inside it but only by 90, 180 and 270 degrees.
Using this:
oDiv.style.filter='progidXImageTransform.Microsoft.BasicImage(rotation=1)' where oDiv is the name of the div to rotate will rotate that div by 90 degrees with rotation opitions of 1, 2 and 3.
Not a lot of help for the speedometer directly but you could create your image with variations on different rotations to further cut down on the total number of images needed and rotate the div to put the image into the orientation you need.


Stamp out, eliminate and abolish redundancy!