Heat Map Example

by Ron Eaglin

HTML

<script src="http://www.smadaonline.com/heatmap.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://formhippo.azurewebsites.net/Scripts/knob.js"></script>
<h1>Wind Load Calculator</h1>
<table> 
    <tr>
        <td valign="center">
<div id="slider-range-velocity" style="float:left; height: 160px"></div>
 &nbsp;&nbsp;<input type="text" id="velocity" style="border:0; color:#f6931f; font-weight:bold; width: 120px; font-size: 50px;float:right; " />   
        </td>
        <td>
    <input type="text" class="knob" id="angle" style="border:0; color:#f6931f; font-weight:bold; font-size:60px" data-cursor="true"  data-fgcolor="#f6931f" /><br/><br/>            
        </td>
        <td>
<div id="heatmapArea" style="width:702px;padding:0;height:360px;cursor:pointer;position:relative;">

<canvas id="canvas1" width="702" height="360"></canvas><br/>
</div>
        </td>
    </tr>
    <tr>
        <td>
        <label for="amount">Wind Velocity (mph)</label>
       </td>
       <td>
           <label for="amount">Wind Direction (degrees)</label>
       </td>
        <td>Lift (lbf) <div id="lift"></div> </td>
    </tr>
    <tr>
<td colspan="2">        Move sliders to set wind velocity and wind direction. <br/>
        <div id="progressbar">
            <div class="progress-label"></div>
        </div>

        </td>
        <td>
       <button id="calculate" class="CalculateButton">Calculate</button>
        </td>
    </tr>
</table>

CSS

.block label { display: inline-block; width: 240px; text-align: right; }
.block input {width: 60px; text-align: left }
 .progress-label {
position: relative;
left: 30%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.CalculateButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	box-shadow:inset 0px 1px 0px 0px #f9eca0;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
	background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
	
	background-color:#f0c911;
	-webkit-border-top-left-radius:28px;
	-moz-border-radius-topleft:28px;
	border-top-left-radius:28px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:28px;
	-moz-border-radius-bottomright:28px;
	border-bottom-right-radius:28px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0px;
	border:1px solid #e65f44;
	display:inline-block;
	color:#c92200;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	font-style:normal;
	height:65px;
	line-height:65px;
	width:195px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ded17c;
}

.CalculateButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911) );
	background:-moz-linear-gradient( center top, #f2ab1e 5%, #f0c911 100% );

	background-color:#f2ab1e;
}

.CalculateButton:active {
	position:relative;
	top:1px;
}

 #progressbar .ui-progressbar-value {
background-color: #ccc;
}

JavaScript

$(document).ready(function () {
        $(".knob").knob({
            min:0,
            max:360
                });
    
        $("#drawGrid").click(
            function () {
                drawHeatMap();
            });    
       
             $( "#progressbar" ).progressbar({
  value: 0
});  
      $("#calculate").mousedown(
        function () {
             $( "#progressbar" ).progressbar({
  value: false
});  
            $(".progress-label").text( "Calculating" );
 });   
    
      $("#calculate").click(
        function () { 
               
          drawHeatMap();
            $( "#progressbar" ).progressbar({
  value: 100
});  
       $(".progress-label").text( "Complete!" );
      });
    });

$( "#progressbar" ).progressbar({
  value: 0,

});

$( "#slider-range-velocity" ).slider({
    range: "min",
    value: 80,
    min: 80,
    max: 200,
    orientation: "vertical",
        
slide: function( event, ui ) {
$( "#velocity" ).val( ui.value );
}
});
     
     
$( "#velocity" ).val(  $( "#slider-range-velocity" ).slider( "value" ) );

    var trueWidth = 351;
    var trueHeight = 180;
    var margin = 1;
    var nRows = 3;
    var nColumns = 9;



function Point(x,y)
{
    this.x = x;
    this.y = y;
}
var heatmap;
var maxWindLoad;
function drawHeatMap() {
    maxWindLoad = getMaxWindLoad();
    var cGradient =
                    { 0.1: "rgb(0,255,0)", 1.0: "rgb(255,0,0)"};
    
   var hmConfig = {
       element: document.getElementById('heatmapArea'),
           radius: 20,
           opacity: 50,
         gradient: cGradient,
         legend: {
            position: 'br',
            title: 'Wind Load Values'
        },
        };
      
       heatmap = h337.create(hmConfig);
  var data = {
max: maxWindLoad,
data: [
{ x: 100, y: 200, count: windLoad(100,200) }

// ...
]
  }
    heatmap.store.setDataSet(data);
    drawGrid();
    heatmapWindLoads();    
}


function drawGrid() {
    var canvas = document.getElementById('canvas1');
    var ctx =...