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.2.2 + examples, .zip (53KB)
<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.

    Checkout list of all config parameters at GitHub source.

More examples

    Download
    JustGage v1.2.2 + examples, .zip (53KB)

    Release Notes

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

    To leave feedback, ask a question, or suggest a new feature, go to JustGage Github page.

    hosted by