Create a gradient map based on timestamps using php

Question

I'm trying to create a usefull graph based on a 2dimensional matrix.

Users will click on the intersections of the matrix, fill out some information and hit submit. When this happens I log a timestamp of the event.

I want the admin to be able to graphically intepret this info so what I'd like to do is assign a CSS background colour to each square of the matrix based on when it was clicked. Eg pale blue for the items clicked first and a darker blue.for the items clicked more reciently.

I've been racking my brains but for the life of me I can't figure out a way to do it. The problem is that the clicks could happen in any order at any time.

Could anyone point me in the right direction?

enter image description here

Above is what Im trying to acheave, the numbers symbolize timestamps (1 being the earliest timestamp and 14 being the most recent)

score 3 · Answer 1 · answered Aug 17 '12 at 08:03

3

CSS3 hsl makes this super easy:
http://www.w3.org/TR/css3-color/#hsl-examples

answered Aug 17 '12 at 08:03

3on

6,291
3
26
22

+1 For a good answer, but HSL Isn't completelty x-broweser supported yet, Maybe add an example implementation and a x-browser reccomendation? – Dpolehonski Aug 17 '12 at 08:06
That looks awesome, the problem is I know the majority of my users are using IE7!! (why they cant upgrade I dont know...) Can you think of anyway to do it using HEX>? (but +1 for a neat solution) – Chris Headleand Aug 17 '12 at 08:06
Sorry I tend to leave in the present looking forward. I'm sure they are tons of script/js lib to do that. Google gave me this on a neet website: http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion – 3on Aug 17 '12 at 08:11

score 0 · Answer 2 · answered Aug 17 '12 at 09:24

Oki doke,

The way I have chosen to deal with this is to first generate a list of gradient hex values, I generated my gradient from here:

http://www.herethere.net/~samson/php/color_gradient/?cbegin=B5E1FF&cend=00092E&steps=6

I then sorted my array by the timestamps using the subval sort function developed here

http://www.firsttube.com/read/sorting-a-multi-dimensional-array-with-php/

and then I assign the hex value based on position...

A simple representation of this is here =>

<?php
$test = array(
            array("test", 1),
            array("test2", 2),
            array("test4", 4),
            array("test5", 5),
            array("test3", 3),
            array("test6", 6)
            );


function subval_sort($a,$subkey) {
foreach($a as $k=>$v) {
    $b[$k] = strtolower($v[$subkey]);
}
asort($b);
foreach($b as $key=>$val) {
    $c[] = $a[$key];
}
return $c;
}

$test2 = subval_sort($test,'1'); 

foreach($test2 as &$t) {
if($t[1]==1){
    array_push($t, "B5E1FF");
    }
elseif($t[1]==2){$t[2]="96BDDC";}
elseif($t[1]==3){$t[2]="7899B9";}
elseif($t[1]==4){$t[2]="5A7596";}
elseif($t[1]==5){$t[2]="3C5173";}
elseif($t[1]==6){$t[2]="1E2C50";}
}

echo "<pre>";
print_r($test2);
echo"</pre>"; 

?>

Can anyone see anything horrendously wrong with this?

Create a gradient map based on timestamps using php

2 Answers2