Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) [closed]

Question

has anyone a javascript canvas or java swing example?

Something like this: http://www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif

How should i draw the "separator" lines?

Answer 1

If you want a simple JavaScript canvas based gauge you can use a little lib that I've created myself. It is easy to use and has a wyswig configurator for easy gauge customization. I've pushed it to the GitHub at http://bernii.github.com/gauge.js

A little preview of what you can get:

Answer 2

I recommend looking into the Raphael Javascript graphics library. It works in all browsers (including old versions of IE!), and uses vector graphics, so the graphics it produces are scalable and rotatable without loss of image quality, and it even includes animation features.

Here's a link to a guy who's used Raphael to produce some very good-looking gauges: http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css

But if you want to draw your own, it shouldn't be hard to do using Raphael: It has the ability to draw cicles and shapes, and to animate them. Something that looks like your example shouldn't be hard to achieve.

Here's some code I've knocked together quickly as an example:

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
  var gauge = Raphael('mydiv', 200, 100);
  var semicircle = gauge.circle(100, 100, 100).attr({"fill": "#FF0000"});
  var indicator = gauge.rect(0, 99, 100, 2);
  indicator.animate({rotation: "30 100 100"}, 1000, "<>");
</script>
....
<div id='mydiv'></div>

I've tested that code, and it produces a working dial. It's not as pretty as, say, the other example I linked above, but it doesn't use any external graphics, and it's done entirely using Javascript. The only external dependancy is the Raphael library.

It'll obviously need some work to improve it to make it usable for your scenario, but it should be a fairly good start for you.

Hope that helps.

[EDIT]

The above script works for Raphael v1.5. However, Raphael v2 changes the syntax slightly.

The line to do the animation needs to use the new transform syntax rather than the deprecated rotate syntax. So the edited line would look as follows:

indicator.animate({transform: "r30,100,100"}, 1000, "<>");

The rest of the code remains the same as above.

See the Raphael manual for more information on the syntax of the transform function.

Answer 3

this gauge lib look's good and run well

http://justgage.com/

Answer 4

Have you seen this Open Source Gauge Component? There are about 10 different styles you can use.