Javascript Thermometer Chart
7/17/2011 ASP.NET, Charting
A few days ago I was talking with a friend about jQuery and decided to take a stab at creating a component control in jQuery/Javascript. The thermometer chart you see below is the result of a few hours of experimentation. While I am happy with the level of encapsulation of the javascript and css, the control does use absolute positioning and so is a little awkward to use. I think with a little more tweaking I could make the control use relative positioning.

This is a javascript version of a thermometer control found elsewhere on this site at jtherm.aspx.

You are free to use this control in your own web page if you like. To implement it you'll need these files:

To include it in your page, you'll need to add a little CSS and javascript.

First, you'll need a reference to jquery, to the javascript file for the control (jliontherm.js) and to the css file for the control (jliontherm.css). Your references should look something like this:

        <script type="text/javascript" src="jquery-1.6.1.js"></script>

        <script language="javascript" type="text/javascript" src="jliontherm.js"></script>
        <link rel="stylesheet" type="text/css" href="jliontherm.css">    

Next, you'll need to add a little CSS to indicate where on your page the thermometer control should appear. At present it requires absolute positioning, so the CSS would look something like this:

        <style type="text/css">   
                position: absolute; top:520px; left:50px;
                border: solid 1px black;

You'll need a DIV element to represent the thermometer itself...

        <style type="text/css">   
            <div id="thermometer"/>     

You'll need some javascript to set the current value of the thermometer. The control expects to find the value in a TEXT or HIDDEN form element, something like this:

        <div id="value">Value: <input type="text" size="10" id="txtValue" value="60" /></div>
        <input type="button" value="refresh" onclick="oTherm.RefreshByID('txtValue');" />

Finally, you'll need this bit of javascript to initialize the control.

        <script type="text/javascript" language="javascript">
            var oTherm = new jlionThermometer(0, 100, false, false);