[jQuery/CSS3] Meter Widget

[Brian Miller]

Take a look at this cool website: http://chartbeat.com/dashboard/?url=businessinsider.com&k=4bbb5a03ffbd1d760ecf0ba8d9f27ef7#

My question is, how do they control the gauge, the GUI widget that looks like this:

Are they using a combination of jQuery and CSS3? And if so, is there a plugin that does something similar?

[Guest]

From looking at the source it seems to be a HTML canvas element.

Dont know much about the canvas element but basically you use javascript to programmatically draw / move shapes on the canvas.

[+chorpeac MVC]

I think Quigley is right, the canvas element. Not all browsers are compatible with it, at least the older IE isn't. There is a google plugin for it, excanvas I think. It just uses javascript and geometry to draw the stuff. We used excanvas to do a fuel gauge. Cool stuff.

[Brian Miller]

Are there any good plugins that can do this?

[Brian Miller]

Any other solutions?

[Seahorsepip Veteran]

You can make it with css though it's not that simple to make with css and will not work on ie8 and older :/

But canvas won't work either on ie8 and older as far as I know >.>

 

Most childish solution is just making a image of the meter and all of it's values and changing it based on it's vlue, it works atleast at every browser :P

 

If you want I can make a css only version with some js ;)

[Seahorsepip Veteran]

Edit: http://bernii.github.io/gauge.js/ is the thing you're probably looking for

[Brian Miller]

Thanks