Canvas Based Temperature Gauge Plugin For jQuery - TempGauge

TempGauge is a minimal jQuery plugin that dynamically draws a customizable, thermometer-style temperature gauge using HTML5 canvas 2D API to present any temperature values.

How to use it:

1. Load the latest version of jQuery library and the jQuery TempGauge plugin in the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.tempgauge.js"></script>

2. Wrap your temperature in degrees into a DIV element like so.

<div class="tempGauge-demo">-10&deg;C</div>

3. Renders a basic thermometer inside the DIV you created.

$(".tempGauge-demo").tempGauge();

4. Customization options.

$(".tempGauge-demo").tempGauge({

  // border color
  borderColor: "black",

  // border width
  borderWidth: 4,

  // default temperature
  defaultTemp: 26,

  // fill color
  fillColor: "red",

  // show label
  showLabel:false,

  // label size in pixels
  labelSize: 12,

  // maximum temperature
  maxTemp: 40,

  // minimum temperature
  minTemp: -10,

  // Temperature width
  width: 100

});

Change log:

2016-11-30

• add scale feature
• added option to replace or insert canvas

2015-11-04

• adds labelSize property

---

This awesome jQuery plugin is developed by akumagamo. For more Advanced Usages, please check the demo page or visit the official website.