Handsontable Research Results Example

by handsoncode

HTML

<link rel="stylesheet" href="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<script src="http://docs.handsontable.com/0.20.3/bower_components/chroma-js/chroma.min.js"></script>
<h2>Handsontable Research Results Example</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p>

<div id="example"></div>

CSS

body {   
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

JavaScript

var container = document.getElementById('example');

var heatmapScale  = chroma.scale(['#17F556', '#ED6D47']);
var heatmap = [];

var updateHeatmap = function(change, source) {
  if (change && change[0]) {
    heatmap[change[0][1]] = generateHeatmapData.call(this, change[0][1]);
  } else {
    heatmap = [];

    for(var i = 1, colCount = this.countCols(); i < colCount ; i++) {
      heatmap[i] = generateHeatmapData.call(this, i);
    }
  }
};

var point = function (min, max, value) {
  return (value - min) / (max - min);
};

var generateHeatmapData = function (colId) {
  var values = this.getDataAtCol(colId);

  return {
    min: Math.min.apply(null, values),
    max: Math.max.apply(null, values)
  };
};

var heatmapRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);

  if (heatmap[col]) {
    td.style.backgroundColor = heatmapScale(point(heatmap[col].min, heatmap[col].max, parseFloat(value))).hex();
    td.style.textAlign = 'right';
    td.style.fontWeight = 'bold';
  }
};


var scienceData = [
  ['<div><a href="https://plot.ly/~JStevens/0/" target="_blank" title="An Age Distribution for Scientific Genius" style="display: block; text-align: center;"><img src="https://plot.ly/~JStevens/0.png" alt="An Age Distribution for Scientific Genius" style="max-width: 100%;width: 400px;"  width="400" onerror="this.onerror=null;this.src="\'https://plot.ly/404.png\'";" /></a><script data-plotly="JStevens:0" src="https://plot.ly/embed.js" async/></div>',0.0008686210640608003,18.235294117647058,0.0015472312703583065,18.235294117647058],
  ["",0.0013436482084690554,18.96551724137931,0.002219055374592834,18.843813387423936],
  ["",0.0019408251900108608,19.69574036511156,0.0031867535287730727,19.391480730223122],
  ["",0.0025651465798045606,20.425963488843813,0.004153094462540717,20.073022312373226],
  ["",0.0034337676438653607,21.03448275862069,0.004987785016286645,20.669371196754565],
 ...