Canvas Based Temperature Gauge Plugin For jQuery - TempGauge

File Size: 21.1 KB
Views Total: 18390
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


4. Customization options.


  // border color
  borderColor: "black",

  // border width
  borderWidth: 4,

  // default temperature
  defaultTemp: 26,

  // fill color
  fillColor: "red",

  // show label

  // label size in pixels
  labelSize: 12,

  // maximum temperature
  maxTemp: 40,

  // minimum temperature
  minTemp: -10,

  // Temperature width
  width: 100


Change log:


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


  • 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.