Handsontable example

by handsoncode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<p>
  Where <strong>0</strong> is 'I do not like' and <strong>10</strong> 'I love it'
</p>
<canvas class="chartJSContainer" width='400' height='150'></canvas>
<div id="example1"></div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #fff;
  font: 0.8em sans-serif;
  color: #333;
}

.chartJSContainer {
  margin-bottom: 1em;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    example = document.getElementById('example1'),
    hot;

  var headers = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Pink", 'Brown'];
  var myData = [
    [5, 10, 3, 5, 2, 3, 5, 1],
    [9, 9, 3, 10, 8, 7, 7, 2],
    [5, 1, 10, 6, 7, 9, 4, 8]
  ];
  var rowheaders = ['Mark', 'Anna', 'Diana']

  hot = new Handsontable(example, {
    data: myData,
    rowHeaders: rowheaders,
    colHeaders: headers,
    colWidths: 88,
    licenseKey: 'non-commercial-and-evaluation',
    fillHandle: {
      autoInsertRow: false,
    },
    beforeChange: function(changes, src) {
    	if (src !== 'loadData') {
        changes.forEach((change) => {
        	var row = change[0];
          var column = change[1];
          var value = change[3] === '' ? 0 : change[3];
          
          myChart.data.datasets[row].data[column] = value;
          myChart.update();
        });
      }
    }
  });


  var options = {
    type: 'bar',
    data: {
      labels: headers,
      datasets: [{
        label: rowheaders[0],
        data: myData[0],
        borderWidth: 1,
        backgroundColor: 'rgb(255, 236, 217)'
      }, {
        label: rowheaders[1],
        data: myData[1],
        borderWidth: 1,
        backgroundColor: 'rgb(235, 224, 255)'
      }, {
        label: rowheaders[2],
        data: myData[2],
        borderWidth: 1,
        backgroundColor: 'rgb(219, 242, 242)'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  }

  var ctx = document.querySelector('.chartJSContainer').getContext('2d');
  var myChart = new Chart(ctx, options);

});