How to color lines with the same content of a single color?

advertisements

I have a table with several rows (row number is changeable). It is showing the users details like usernames and IPs and country ....

I want to show the rows with the same IPs with the same colors.

But the content is not static and maybe I have two groups of similar IPs how can I show each group with one color ?

I tried to give the name attribute of each TR the value of the IP so all the group with the same IP has the same name attribute.

$txt .='<tr name="'.$ip.'"><td>'.$username.'</td><td>'.$ip.'</td><td>'.$country.'</td><td>'.$platform.'</td><td>'.$browser.'</td><td>'.$version.'</td><td>'.$os.'</td><td>'.$lastseen.'</td></tr>';

then I use javascript to give a background color for the same name <tr>

<script>
$(document).ready(function(){
    $('table').find('tr').each(function(){
        ip = $(this).attr('name');
            $('table').find('tr').each(function(){
              ip1 = $(this).attr('name');
                  if(ip == ip1)
                  { $(this).css("background-color","red");}

             });
    });
});
</script>

the color of the rows is keep changing and if i have two groups of similar IPs i can not figure out how to separate them into different colors?


You could use the ip's itself to color the rows, by treating the blocks as RGB values and assign them as background color for the row.

e.g

 192.168.0.1
  R   G  B
 background-color: rgb (192,168,0)

I have two groups of similar IPs

Since similar isn't specified

I'm using only the first 3 blocks to calcualte the colors since that would group the ips which would be in the same /24 subnet.


Actually assigning those values is pretty straightforward.

var table = document.getElementById ("ips");
var rows = table.querySelectorAll ("tr td");
for (var i=0,r=rows;i<r.length;i++) {
    var td = r[i];
    var ip = td.childNodes [0].data.replace (/\s/g,"");   //trim whitespaces
    var rgb = ip.split (".").slice (0,-1);                //get the first 3 blocks (RGB)
    td.style.background = "rgb(" + rgb + ")";             //[].toString () gives a comma seperated values string
}

Here is a simple example on JSFiddle, producing these colors:

The resulting colors may not be perceived as beautiful as colors chosen randomly from a predefined set, but it's a simple way to make sure ips, sharing the same blocks get colored the same way.


Edit

As @MohammedJoraid pointed out, the color distributions for ips, that differ only slightly in the same block, are perceptionally hard to distinguish.

The problem doesn't fade if you change the distribution because we already cover the whole rgb range when even taking only the first three blocks of the address into account.

But we can use an approach that at makes it easier to distinguis such, above mentioned, ips, more easily, by using a HSV colorspace instead of RGB to distribute the colors.

var table = document.getElementById("ips");
var rows = table.querySelectorAll("tr td");

for (var i = 0, r = rows; i < r.length; i++) {
    var td = r[i],
        ip = td.childNodes[0].data.replace(/\s/g, ""),
        rgb = ip.split(".").slice(0, -1); //get the first three blocks

    var h = rgb.reduce(function (a, b, i) {
        return a + (b * (0.103005665*(1+i*2))) //lastColor + (currentColor * (2*blockNr+1/6*phi)) Practically putting a weight on the blocks further to the right
    }, 0) % 1,
        s = 0.5,
        v = 0.85;

    td.style.background = "rgb(" + hsvToRgb(h, s, v) + ")"; //assign the calculated rgb value
}

function hsvToRgb(h, s, v) {
    var sec = ~~ (h * 6);
    var f = h * 6 - sec;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    var r = 0xFF,
        g = 0xFF,
        b = 0xFF;
    switch (sec) {
        case 0:
            r = v;
            g = t;
            b = p;
            break;
        case 1:
            r = q, g = v, b = p;
            break;
        case 2:
            r = p, g = v, b = t;
            break;
        case 3:
            r = p, g = q, b = v;
            break;
        case 4:
            r = t, g = p, b = v;
            break;
        case 5:
            r = v, g = p, b = q
    }
    return [~~ (r * 256), ~~ (g * 256), ~~ (b * 256)];
};

The new approach colors the table the following way

Heres another Fiddle