usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Heatmaps - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
  <script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
  <script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
  <script data-jsfiddle="common" src="../dist/zeroclipboard/ZeroClipboard.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
  <script data-jsfiddle="common" src="../dist/handsontable.js"></script>

  <!--
  Loading demo dependencies. They are used here only to enhance the examples on this page
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  <script src="js/samples.js"></script>
  <script src="js/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
  <script data-jsfiddle="common" src="bower_components/chroma-js/chroma.min.js"></script>

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Heatmaps for values in a column">
  <meta property="og:description"
        content="">
  <meta property="og:url" content="http://handsontable.com/demo/heatmaps.html">
  <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="409">
  <meta property="og:image:height" content="164">
  <link rel="canonical" href="http://handsontable.com/demo/heatmaps.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>

</head>

<body>


<div class="wrapper">
  <div class="wrapper-row">
    <div id="global-menu-clone">
      <h1><a href="../index.html">Handsontable</a></h1>

    </div>

    <div id="container">
      <div class="columnLayout">

        <div class="rowLayout">
      <div class="descLayout">
        <div class="pad" data-jsfiddle="example1">
          <a name="lazy"></a>

          <h2>Heatmaps for values in a column</h2>

          <p>
            The following demo shows an example of using heatmaps for the values in tha grid's columns.
          </p>

          <p>
            Changing the values in the grid automatically recalculates the font color for the whole column, thereby
            updating a heatmap.
          </p>

          <p>
            The dynamic color scale calculation is done using the excellent <a href="http://driven-by-data.net/about/chromajs">Chroma.js</a>.
          </p>

          <div id="example1"></div>

        </div>
      </div>

      <div class="codeLayout">
        <div class="pad">
          <div class="jsFiddle">
            <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
          </div>

          <script data-jsfiddle="example1">
            var data = [
                [2002, 190251, 5090, 195341],
                [2003, 224495, 6486, 230981],
                [2004, 254044, 6765, 260809],
                [2005, 254099, 7521, 261620],
                [2006, 271108, 9449, 280557],
                [2007, 280565, 11714, 292279],
                [2008, 284120, 11292, 295412],
                [2009, 279742, 11468, 291210],
                [2010, 290411, 11806, 302217],
                [2011, 290652, 10891, 301543],
                [2012, 283863, 10402, 294265],
                [2013, 267646, 10104, 255850]
              ],
              container = document.getElementById('example1'),
              lastChange = null,
              heatmap,
              heatmapScale,
              hot;

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

            hot = new Handsontable(container,{
              data: data,
              colHeaders: ["Year", "Domestic Flights", "International Flights", "Total Flights"],
              columns: [
                {
                  type: 'numeric'
                },
                {
                  type: 'numeric',
                  format: '0,0',
                  renderer: heatmapRenderer
                },
                {
                  type: 'numeric',
                  format: '0,0',
                  renderer: heatmapRenderer
                },
                {
                  type: 'numeric',
                  format: '0,0',
                  renderer: heatmapRenderer
                },
              ],
              afterLoadData: updateHeatmap,
              beforeChangeRender: updateHeatmap
            });

            function updateHeatmap(change, source) {
              if (change) {
                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);
                }
              }
            }

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

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

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

            function heatmapRenderer(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, parseInt(value, 10))).hex();
                td.style.textAlign = 'right';
                td.style.fontWeight = 'bold';
              }
            }
          </script>
        </div>
      </div>
    </div>

        <div class="footer-text">
        </div>
      </div>

    </div>

  </div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>