AJAX: background color change function using array values not working?

Question

I will try describe my problem as simple as possible. I have this AJAX call to GET an Json_encoded array. With the "aht_value" being retrieved I get a color background being drawn from green-ish to red-ish ( im doing a heat map). My values are being output correctly.

The problem: My "colorMe" function . I am not sure what I am doing wrong or if I am putting all my functions in the wrong place since I am doing everything inside my "success" and after my FOR loop as you see below. However, if I replace "min" for 100 and "max" for 1800 then the colors get displayed.

thanks in advance.

Array from show.php:

[{
   "username":"OXGOR",
   "aht_value":"241",
   "station":"B20"
  },
  {
   "username":"AISAI2",
    "aht_value":"199",
   "station":"B21"
  },
  {
   "username":"CAPAP3",
   "aht_value":"NA",
   "station":"B10"
  }]

map.php - JS part

<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){

                        var min = data.reduce(function(prev, curr) {
                                return isNaN(curr['aht_value']) || prev < curr['aht_value'] ? prev : curr['aht_value'];
                                }, 1000000);

                                alert(min); //not returning the correct number

                                var max = data.reduce(function(prev, curr) {
                                  return isNaN(curr['aht_value']) || prev > curr['aht_value'] ? prev : curr['aht_value'];
                                }, -1000000);    

                                alert(max); //nor returning the correct number

                                //function for calculation of background color depending on aht_value               
                                function conv(x){
                                    return Math.floor((x - min) / (max - min) * 255);
                                }

                                //function for background color
                                function colorMe(v){
                                    return "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)";
                                }

                        //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
                                divForResult.html(data[i]['aht_value']).css("background-color", colorMe(data[i]['aht_value']));
                            }//end if
                            }//end for  
                    }//end success
                });//end ajax   
              });//end click
            });//end rdy
</script>

show.php: where I use json_encode

$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']
                                            );
echo json_encode($result);

this works If I put min to 100 and max to 1800 manually in my colorMe function: what is suposd to look like

this is returning my the wrong colors as you see below whenever I use min and max calculation not giving right colors

Casey · Accepted Answer · 2014-11-24 14:54:41Z

3

Your array is missing a comma after the first object.

answered Nov 24, 2014 at 14:54

Casey

3351 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3849602 Over a year ago

If (s)he uses json_encode(), probably only an error when copying it here from the function.

Aleksei Matiushkin · Accepted Answer · 2014-11-24 16:21:32Z

1

You are executing map on array length, rather that on array itself. Furthermore, I would suggest you to reduce your array:

var min = data.reduce(function(prev, curr) {
  return isNaN(+curr['aht_value']) || prev < +curr['aht_value'] ? prev : +curr['aht_value'];
}, 1000000);

var max = data.reduce(function(prev, curr) {
  return isNaN(+curr['aht_value']) || prev > +curr['aht_value'] ? prev : +curr['aht_value'];
}, -1000000);

To set the specific background whether color is NA:

function colorMe(v){
  return v == 'NA' ? "#FFF" : "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)";
}

edited Nov 24, 2014 at 16:21

answered Nov 24, 2014 at 14:55

Aleksei Matiushkin

121k12 gold badges109 silver badges174 bronze badges

15 Comments

alda1234 Over a year ago

thank you for your suggestion. However, it is still not displaying the colors

Aleksei Matiushkin Over a year ago

Oh, I just realized your data might contain non-a-numbers. Pls check an updated answer. And print min/max values, came from those function, please.

alda1234 Over a year ago

If I alert min and max I get 1000000 -1000000. Also, thats the thing because in my array some of my aht_value have "NA" (which is NULL) so how could I give it a white background and the others the normal background calculation in my function. thanks again

Aleksei Matiushkin Over a year ago

I beg your pardon, shame on me, I did not get that data contains array of arrays. The updated version should work for initial task. Would you please restate what you want to do in case od NA values?

alda1234 Over a year ago

I applied your new solution however it does not return the correct values in either min or max when I use alert. alert(min) returns 213 which is the second lowest in the array and alert(max) returns 97 which is the lowest in the array. The current max value in my array is 703. thanks

|

Collectives™ on Stack Overflow

AJAX: background color change function using array values not working?

2 Answers 2

1 Comment

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related