Jump to content



Photo

[jQuery/CSS3] Meter Widget


  • Please log in to reply
7 replies to this topic

#1 Brian Miller

Brian Miller

    Neowinian Senior

  • Joined: 15-December 10

Posted 05 September 2011 - 09:00

Take a look at this cool website: http://chartbeat.com...cf0ba8d9f27ef7#

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

1.png

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


#2 Quigley Guy

Quigley Guy

    Neowinian Senior

  • Joined: 13-August 02
  • Location: Ireland

Posted 06 September 2011 - 00:23

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.

#3 +chorpeac

chorpeac

    NeoRequest Engineer

  • Joined: 21-March 02
  • Location: Northern Virginia
  • OS: Windows, Windows RT, Windows Phone, & iOS

Posted 06 September 2011 - 00:29

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.

#4 OP Brian Miller

Brian Miller

    Neowinian Senior

  • Joined: 15-December 10

Posted 08 September 2011 - 01:17

Are there any good plugins that can do this?

#5 OP Brian Miller

Brian Miller

    Neowinian Senior

  • Joined: 15-December 10

Posted 06 December 2013 - 07:25

Any other solutions?



#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 07 December 2013 - 11:03

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 ;)



#7 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 07 December 2013 - 11:12

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



#8 OP Brian Miller

Brian Miller

    Neowinian Senior

  • Joined: 15-December 10

Posted 07 December 2013 - 23:37

Thanks