I am new with AJAX/jQuery and trying something new.
here is my fiddle for better understanding Each of those squares are DIVS.
<div class="desk_box_ver" id="desk_B20" data-rel="85" style="left:20px;top:1165px;">B20</div>
The number inside of is being retrieved with an AJAX call that GETs it with a PHP script executing a query, it will replace the "B20" for "1300" as an example.
Problem:
How can I produce a "heat map" based on the numbers being displayed. Example: Lets say the number range is from 100(the lowest) to 1800(the highest). Depending on the number range, a background color will have to be displayed from green-ish, to yellow-ish, orange-ish, and red.
A similar problem I found on stackoverflow is this one
AJAX:how I am displaying the numbers inside of the DIVs
<script type="text/javascript">
$(document).ready(function() {
$('#aht').click(function(){
$.ajax({
type:"GET",
url : "show_aht.php",
data:{ } , // do I need to pass data if im GET ting?
dataType: 'json',
success : function(data){
//going through all DIVs only once with this loop
for(var i = 0; i < data.length; i++) { // loop over results
var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
if(divForResult.length) { // if a div was found
THIS IS WHERE I AM OUTPUTTING THE NUMBER
divForResult.html(data[i]['aht_value']); // set inner HTML with AHT value
}//end if
}//end for
}//end success
});//end ajax
});//end click
});//end rdy
</script>
show_aht.php numbers being retrieved from the array below
$result = array();
foreach ($memo as $username => $memodata) {
if (in_array($username, array_keys($user))) {
// Match username against the keys of $user (the usernames)
$userdata = $user[$username];
//if AHT is null give N/A as value
if (is_null($memodata['aht_value'])) {
$result[] = array( 'username' => $userdata['username'],
'aht_value' => 'NA',
'station' => $userdata['station']
);
}//end inner if
//else give the actual value of AHT without the decimals
else {
$result[] = array( 'username' => $userdata['username'],
'aht_value' => substr($memodata['aht_value'],0,-3),
'station' => $userdata['station']
);
}//end else
}//end outer if
}//end for
echo json_encode($result);
Have a play with this fiddle . It inserts a value and then applies a color to is (using a very simple algorithm that you will want to change). Here's how you could implement it in your code
success : function(data){
for(var i = 0; i < data.length; i++) { // loop over results
var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
if(divForResult.length) { // if a div was found
divForResult.html(data[i]['aht_value']).css("background-color", colorMe(data[i]['aht_value']));
}//end if
}//end for
}//end success
Make these available in your code:
function colorMe(v){
return "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)";
}
function conv(x){
return Math.floor((x - 100) / (1800-100) * 255);
}
I'm not sure if I understood the problem completely, but here is the simplest possible idea to hopefully help you out: http://jsfiddle.net/Arministrator/0vhv37jf/
$( document ).ready(function() {
var valuediv = document.getElementById('valuediv');
var valuedive = valuediv.innerHTML;
$("#valuediv").css({"background-color":"#"+valuedive});
});
Whatever number is inside a div it will affect the color of the div. You can play with it if you want more than 3 digits, this is just an example to guide you. (For example #900 is red color)
I wrote a generic function that takes a number and a range object as arguments, and calculates a color for the number based on its position in the range.
/**
* Calculate a color based on number's position in a range.
* @param {number} num Number to calculate a color for
* @param {object} opts Range of colors and numbers in the following form:
* {
* start: {number: {number}, color: {rgb array: [r,g,b]}},
* end: {number: {number}, color: {rgb array: [r,g,b]}}
* }
* where each of "r", "g", "b" is a value from 0 to 255.
* I.e. a range specifying numbers from 0 to 100 with colors from black to white: {start: {number: 0, color: [0,0,0]}, end: {number: 100, color: [255,255,255]}}
* @return {string} CSS color
*/
function colorCode(num, opts) {
var color = [];
if(num <= opts.start.number)
color = opts.start.color;
else if(num >= opts.end.number)
color = opts.end.color;
else {
for(var i = 0; i < 3; i++) {
color[i] = Math.round( (num - opts.start.number) / (opts.end.number - opts.start.number) * (opts.end.color[i] - opts.start.color[i]) + opts.start.color[i] );
}
}
return 'rgb(' + color.join() + ')';
}
See fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.