javascript - AJAX/jQuery: Change DIV background based on number value in it? -

i new ajax/jquery , trying new.

here fiddle better understanding each of squares divs.

<div class="desk_box_ver" id="desk_b20" data-rel="85" style="left:20px;top:1165px;">b20</div> 

the number inside of being retrieved ajax call gets php script executing query, replace "b20" "1300" example.

problem:

how can produce "heat map" based on numbers being displayed. example: lets number range 100(the lowest) 1800(the highest). depending on number range, background color have displayed green-ish, yellow-ish, orange-ish, , red.

a similar problem found on stackoverflow this one

ajax:how displaying numbers inside of divs

<script type="text/javascript">             $(document).ready(function() {                 $('#aht').click(function(){                     $.ajax({                     type:"get",                     url : "show_aht.php",                     data:{  } , // need pass data if im ting?                     datatype: 'json',                     success : function(data){                         //going through divs once loop                             for(var = 0; < data.length; i++) { // loop on results                             var divforresult = $('#desk_' + data[i]['station']); // div object                             if(divforresult.length) { // if div found 

this outputting number

      divforresult.html(data[i]['aht_value']); // set inner html aht value                               }//end if                             }//end                       }//end success                 });//end ajax               });//end click             });//end rdy         </script> 

show_aht.php numbers being retrieved array below

$result = array();     foreach ($memo $username => $memodata) {     if (in_array($username, array_keys($user))) {     // match username against keys of $user (the usernames)      $userdata = $user[$username];     //if aht null give n/a value     if (is_null($memodata['aht_value'])) {         $result[] = array( 'username'  => $userdata['username'],                                              'aht_value' => 'na',                                              'station'  => $userdata['station']                                             );     }//end inner if      //else give actual value of aht without decimals     else {         $result[] = array( 'username'  => $userdata['username'],                                              'aht_value' => substr($memodata['aht_value'],0,-3),                                              'station'   => $userdata['station']                                             );     }//end else     }//end outer if     }//end  echo json_encode($result); 

have play this fiddle. inserts value , applies color (using simple algorithm want change). here's how implement in code

success : function(data){   for(var = 0; < data.length; i++) { // loop on results     var divforresult = $('#desk_' + data[i]['station']); // div object     if(divforresult.length) { // if div found        divforresult.html(data[i]['aht_value']).css("background-color", colorme(data[i]['aht_value']));     }//end if   }//end }//end success 

make these available in code:

function colorme(v){     return "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)"; }  function conv(x){     return math.floor((x - 100) / (1800-100) * 255); }