What is JustGage?

JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.

Oh yes, since it’s pure SVG, it works in almost any browser -
IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

Download
JustGage v1.0.1 + examples, .zip (45KB)
<script src="raphael.2.1.0.min.js"></script>
<script src="justgage.1.0.1.min.js"></script>
<div id="gauge" class="200x160px"></div>
<script>
  var g = new JustGage({
    id: "gauge", 
    value: 67, 
    min: 0,
    max: 100,
    title: "Visitors"
  }); 
</script>

How do I use it?

  • 1 Include JustGage and Raphael scripts in your page.
  • 2 Create a div with id, width & height
  • 3 Call ‘justGage({id, value})’

This is the most basic setup. Feel like getting your hands greasy? There’s more nuts & bolts you can tinker with - checkout Demos section to see cool stuff you can do by customizing setup parameters.

What can it do?

  • JustGage auto-adjusts to the size of containing element. And to the screen zoom level. And screen density. Nice. This means you’ll get clean, sharp and nice looking gauge at all times. Try zooming the page to see the results.

    <div id="bigfella" style="width:400px; height:320px"></div>
    <div id="smallbuddy" style="width:100px; height:80px"></div>
    
  • You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color are calculated as a percentage in defined range, with optional min and max labels shown.

    Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.

    <script>
      var g = new JustGage({
        id: "gauge", 
        value: getRandomInt(350, 980), 
        min: 350,
        max: 980,
        title: "Lone Ranger",
        label: "miles traveled"
      });
    </script>
    
  • Too many gauges on your page, feels like Woodstock with all them colors around? Then choose sector-based color representation of the displayed value. It means color will stay green for all values below 33%, yellow from 34% up until 66%. Take it over 67% and your gauge will glow red. These three are the default colors.

    You can also define your own set of any number of colors, and thus get same number of color-coded sectors. Sweet.

    <script>
      var g5 = new JustGage({
        id: "g5", 
        value: getRandomInt(350, 980), 
        min: 0,
        max: 100,
        title: "Green",
        label: "",
        levelColorsGradient: false
      });
    </script>
    
  • Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min & max etc.

    Here's a list of all parameters you can setup your gauge with:

    • id : string container element id
    • title : string gauge title text
    • titleFontColor : string color title text
    • value : int value gauge is showing
    • valueFontColor : string color of value text
    • min : int minimum value
    • max : int maximum value
    • showMinMax : bool hide or display min and max values
    • gaugeWidthScale : float width of the gauge element
    • gaugeColor : string background color of gauge element
    • label : string text to show below value
    • showInnerShadow : bool whether to display inner shadow
    • shadowOpacity : float shadow opacity, values 0 ~ 1
    • shadowSize : int inner shadow size
    • shadowVerticalOffset : int how much is shadow offset from top
    • levelColors : array of strings colors of indicator, from lower to upper, in hex format
    • levelColorsGradient : bool use gradual or sector-based color change
    • labelFontColor : string color of label showing label under value
    • startAnimationTime : int length of initial load animation
    • startAnimationType : string type of initial animation (linear, >, <, <>, bounce)
    • refreshAnimationTime : int length of refresh animation
    • refreshAnimationType : string type of refresh animation (linear, >, <, <>, bounce)
Download
JustGage v1.0.1 + examples, .zip (45KB)

Release Notes

JustGage is released under MIT license. Feel free to use it and modify it in any way you find suitable.

In theory, it's supposed to work in any browser supporting SVG. In practice, it was tested compatible with Chrome 20, Firefox 12, IE6, 7, 8, 9, Opera 12, Safari 5.1.2, Android 4.0.

Safari and IE users will have to excuse me, for their browser still does not support SVG filters needed to render shadow. And there's some jerkiness when animating in Opera (it's due to SVG implementation). Meh.

And it can even be made working on older Androids but hey - you don't really expect me to do all the heavy lifting, do you?

So, if you feel like justGage has been useful to you, or you’d like to see more features, buy me a coffee so I can stay awake and do more cool stuff.

Throw comments, questions, eggs and tomatoes @Toorshia.

hosted by