<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?

• Refresh Gauges

  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>
  

• Refresh Gauges

  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>
  

• Refresh Gauges

  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>
  

• Refresh Gauges

  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.