Handsontable example

by handsoncode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<div id="hot"></div>

CSS

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

.chart {
  position: relative;
  height: 94px !important;
  width: 192px !important;
  overflow: hidden;
}

.chart canvas {
  max-height: 100% !important;
  max-width: 100% !important;
}

.description {
  font: 0.86em sans-serif;
}

JavaScript

var dataObject = [{
    id: 1,
    currencyCode: 'EUR',
    currency: 'Euro',
    units: 'EUR / USD',
    rates: [1.086531, 1.110255, 1.112455, 1.133822, 1.130242, 1.124398, 1.106476, 1.120072, 1.120637, 1.104075, 1.0795586, 1.053703]
  }, {
    id: 2,
    currencyCode: 'JPY',
    currency: 'Japanese Yen',
    units: 'JPY / USD',
    rates: [0.008440, 0.008709, 0.008852, 0.009108, 0.009191, 0.009476, 0.0099633, 0.009874, 0.009799, 0.009653, 0.009237, 0.008618]
  }, {
    id: 3,
    currencyCode: 'GBP',
    currency: 'Pound Sterling',
    units: 'GBP / USD',
    rates: [1.442080, 1.431595, 1.422819, 1.429384, 1.451771, 1.422832, 1.316192, 1.309189, 1.315652, 1.237009, 1.244121, 1.248168]
  }, {
    id: 4,
    currencyCode: 'CHF',
    currency: 'Swiss Franc',
    units: 'CHF / USD',
    rates: [0.993716, 1.008061, 1.018132, 1.037269, 1.021976, 1.031374, 1.019037, 1.029277, 1.025869, 1.014642, 1.004210, 0.980430]
  }, {
    id: 5,
    currencyCode: 'CAD',
    currency: 'Canadian Dollar',
    units: 'CAD / USD',
    rates: [0.705109, 0.724678, 0.755749, 0.778736, 0.773217, 0.775442, 0.767482, 0.769288, 0.763866, 0.755129, 0.743212, 0.749070]
  }, {
    id: 6,
    currencyCode: 'AUD',
    currency: 'Australian Dollar',
    units: 'AUD / USD',
    rates: [0.702670, 0.712866, 0.749343, 0.766204, 0.731660, 0.739711, 0.752537, 0.762205, 0.757825, 0.761563, 0.752673, 0.733930]
  }, {
    id: 7,
    currencyCode: 'NZD',
    currency: 'New Zealand Dollar',
    units: 'NZD / USD',
    rates: [0.655341, 0.663157, 0.673713, 0.688789, 0.680180, 0.703324, 0.713485, 0.722320, 0.730216, 0.716419, 0.714249, 0.702746]
  }];

  var hotElement = document.querySelector('#hot');
  var hotSettings = {
    data: dataObject,
    colWidths: [100, 150, 150, 130, 200],
    columns: [{
      data: 'currencyCode',
      type: 'text',
      className: 'htCenter htMiddle'
    }, {
      data: 'currency',
      type: 'text',
      className: 'htMiddle'
    }, {
      data: 'units',
      type:...