Heatmap in Javascript or Jquery

Question

Heatmap in Javascript or Jquery

Navigation

#1 by (3 votes)

0

I am looking for a plugin or some code, in which I have an array with prices, and paint a table with a color from green to red, depending on the cheapest and most expensive prices. The colors would not be degraded in the table, but would depend on the value of the price.

The maximum and minimum of the array are removed

var valores = [192.10,192.5,192.3];
console.log(Math.min.apply(null, valores));
console.log(Math.max.apply(null, valores));

But I can not find a way to make them paint a color, depending on of whether the price is more expensive or cheaper. I can not put code because everything I've done is useless, but not to leave the question very open, I put as far as I've come (Although I say it is completely wrong):

   prices.sort()
   $.each(prices, function(i, e) {
       $('#grid').append("<div class='grisha' style='background-color:hsl(" + i * multiplier % 360 + ", 100%, 70%);color:"+color+";'><div class='results'>"+e.min+"<br><small><i>"+previous+"</i></small></div></div>");
   });

Any plugin or code would help me start something.

javascript jquery

asked by Miguel Herreros Cejas 28.09.2018 в 08:58

source

1 answer

Incompatibility Firefox You can use the name of a column as a condition in SQL Server

score 3 · Accepted Answer

Since I do not have your HTML and CSS, I had to invent them.

To vary the color between red and green I use colors hsl and I vary the hue between 100 (for green) and 0 (for red). I hope this is what you need.

let precios = [23,43,12,34,45,93,21];
let _min = Math.min.apply(null, precios);
let _max = Math.max.apply(null, precios);

for(let i = 0; i < precios.length;i++){
  
  let grisha = document.createElement("div");
  grisha.setAttribute("class", "grisha");
  grisha.innerHTML = '<div class='results'>${precios[i]}</div>'  
      
  grisha.style.backgroundColor = deQueColor(precios[i]);
  
  grid.appendChild(grisha)
  
}


function deQueColor(precio){
  let hue =  map(precio, _min, _max, 100,0);
  return 'hsl(${hue}, 100%,70%)';
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

#grid{display:flex;flex-wrap:wrap;}
.grisha{width:5em; height:1em; padding:2em;text-align:center;}
.results{background:white; color:#333;}

<div id="grid"></div>