Using 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"

I'm displaying temperature values on a website, but I wanted something more than just text. I found justGage (at justgage.com) was just what I needed.

This was quite easy to drop into my code and configure. The real trick for me was finding a color gradient I liked.

Here's the code I used to generate one of the elements in the attached image:

<div id="x75" class="gauge" data-min="0" data-max="120" data-value="70"></div>
<script>
    var vx75 = new JustGage({
    id: "x75", 
    formatNumber: true, 
    counter: true, 
    label: "\u00b0F",
    levelColors: ["#FFFFFF","#2980b9", "#3498db", "#a9d70b", "#f9c802", "#c0392b", "#e74c3c", "#ff0000"]
    })
</script> 

I'll be displaying temperatures in Fahrenheit so I've set scale to 0 to 120. What's nice is justGage will handle any outside values. I'm displaying room temperatures, so if it gets below 0°F or above 120°F, we've got other problems to worry about. Ha.

I think I'll continue to play around with justGage and look into Raphaël some too. They should come in handy for some other projects.