=D5J f88?. f6@~t/1R 4ދ߲P%sE,HkcS>]_,ƺf*Hs0meL`UϽX󨛧umkzb/!dbDA1MP*hLI' 4=1%LuRJ#^E`*Sw @5"yD9x҆23J͗dכkk6/Aئl[khoϦ}fyׂ1)h+GF3g+/g˹&Th~0`g lZRB,k<˘PMgm`1Fx;#8ZZ~ h57,W^ o `rhG#>c{@gK/g1i HFYXr̜?4S'HeYl2ߴLjTh_|]^PGkg$4 `[#_xpTpmlᡳ607ER-܏N.<zTեɠDP @/H[⺈1q.lᓹ ~,61i HFYXr̜?4S'NsQ[d9d0 R0'6< Q>gq)Rޚo8\qO X"ΪC[ mM4s9E6|L|%RfTO~u"NJ Hhh0E6ׯS쎩.vrs`Z"Ts,¿o0Ppf*ޱ9k\t D›"$TTe<̊ILd:s :gc,/My[#V]Nޛ16ch#Ǵqi]:w)H|3^y3׹P͂u*& v)'0z^<^O"]s}ɷ@sfj EݟluυVB߯<폂 dm % _غ0Fy #>޳A7F͝xW _78 ~ɮ7rREYL?/_KDv &.6@3>gi'3K2޸(ޜucF=ϠpoqMC 6.te+b;l_)]eR- 998p0RzPw%W젨+;FS8B:Rڠ@,YW qpDJ0uk=Q0ޟ>aQiA.<Gβ⢯ ĜG뛳yZo/ܧ<Z]t"j/Mn%qЭ dCġ.,٬"GH02]{!Ӄgl8M?eA##"{)dt耱@U'7֟{Ї:ZeRz{~.jZ;fԟ'7FSiGjqmZ Gq9}5K-@>b;,"]#d;;\ ԗ!b<ۺaS>i[@a}ڵRG(OMq(Ne2/譋07ފگ]< ?Ғ+QbZ\.."MfM%Wܻ qArh1ۛ~, ,2:'dѽ3@įT$A:- B6!YT8snY.*!InTmz:*y #xrS:y0ul⣗`g {[{*zsVn]oWKnh§e?TwBTtOXhW*Y]o=X;jxO#*P!z&JLJ0 ^8*O()o>rOE>L–Z+s^53w9;`H ̒I4<ɘ3'.ا =}K3Ӽ2ۧ6 g-f#ώoW]UKVh§e?TؤC1ׯJUD6I;tDn~%7MZV'֒)r6<-ș)#ea.z+k3~o\Dc5-]~~LtמD/b;ލU{6^i: E_ȑgFr`p(9qяBrA|tJBk\Ezo9$^} :N$&+G=Sxu߮wxFS?ڠx&~\u19l6=IOBS|j YawBTtOX E"FC?Xdr'(M4dB 9ՌH\6^i: E_jDjQ^SIt&=>%'vr\ΥHk2ΏgY+@ s3l+0WU[(CN5CO%mXL+ަ78 xÑ%QB3)8j")w'u^a6.ef7nj\>6͗F!^ن'+ؿٌqɈJdNG:P=P].77ROo\0=E]L|&[5 Z)1Qz,t:To/ZDaEtmLo>rOE>L–Z+s^53w(n1?F >mRɫ'ԖY7+쇮ӿ!8,UD qFp a#3zz4[lF?$.Dv3MܧCJXԪ&_>KTO* @A2B ➶)l4MqSS,E2)qYVAo-ΨI:d+z὇iS>3 'ۿ: ~o0+U4"[{81'5 bDW?IcNMԯtCz yt1d6#<]ŸtU˦HdZ/A+R$צoE @',x{}埾*8^|[klZE]2 fxg'tG|c{T\#pe4eڅMk2N*dêRv-Vo8QH, .lin CjW!3!$=|PRk{(Xj[ʐ)WuqDt1`D%RÞzdms!>03-*UZ#V9e.s?F+[)]<" ޾:c 1S7ˣ0GDjUb3B P |[ ;dF2:eYines: 12, // The number of lines to draw angle: 7, // The length of each line lineWidth: 5, // The line thickness pointer: { length: 10, // The radius of the inner circle strokeWidth: 0, // The rotation offset color: '#000000' // Fill color }, limitMax: 'false', // If true, the pointer will not go past the end of the gauge colorStart: '0', // Colors colorStop: '0', // just experiment with them strokeColor: '0', // to see which ones work best for you generateGradient: true }; var target = document.getElementById('foo'); // your canvas element var gauge = new Gauge(target).setOptions(opts); // create sexy gauge! gauge.maxValue = 3000; // set max gauge value gauge.animationSpeed = 3000; // set animation speed (32 is default value) gauge.set(1500); // set actual value

The Gauge class handles drawing on canvas and starts the animation.

Advanced options

  • Percentage color

    If you want to control how Gauge behavaes in relation to the displayed value you can use the Guage option called percentColors. To use it add following entry to the options: 

    percentColors = [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]];
    see working example at JSFiddle

jQuery plugin

Gauge.js does not require jQuery. Anyway, if you use jQuery you may use the following plugin: 

$.fn.gauge = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.gauge) {
      data.gauge.stop();
      delete data.gauge;
    }
    if (opts !== false) {
      data.gauge = new Gauge(this).setOptions(opts);
    }
  });
  return this;
};

Supported browsers

Gauge.js has been (not yet!) successfully tested in the following browsers:

  • Chrome
  • Safari 3.2+
  • Firefox 3.5+
  • IE 9
  • Opera 10.6+
  • Mobile Safari (iOS 3.2+)
  • Android 2.3+

Changes

Version 1.2.1 (9.03.2014)

  • Proper handling of color params issue #47.
  • Moved percentage color to example/docs + JSFiddle

Version 1.2 (16.08.2012)

  • Prototype chain fix. See issue #7.
  • Refactored code a bit to make it more flexible. Default class that has some extra features like gradient shadows is called Donut while more flexible one (for devs) is called BaseDonut - use it if you would don't need extra automatic stuff.
  • Ability to scale gauges (requested via email) - example at JSFiddle

Version 1.1 (15.08.2012)

  • Fixed color picker bug in FF & Opera
  • Added a shadow option. See issue #5.
  • Added multiple pointer option (requested via email). This needed some code refactoring. No demo for it yet. Use array of values to check it ex. gauge.set([44, 554]);
  • Added wrapper for formatting text output issue #4.

Version 1.0 (27.6.2012)

  • Initial release

Contact

If you encounter any problems, please use the GitHub issue tracker.
If you like gauge.js and use it in the wild, let me know.
If you want to contact me, drop me a message via email