JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.31.0/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.31.0/handsontable.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js"></script>
<div id="table"></div>
<div id="chart"></div>

JavaScript

var elTable = document.getElementById("table");
var elChart = document.getElementById("chart");

var data = [{
  group: 1,
  value: 1,
  year: 2010
}, {
  group: 1,
  value: 3,
  year: 2011
}, {
  group: 1,
  value: 2,
  year: 2012
}, {
  group: 1,
  value: 5,
  year: 2013
}, {
  group: 2,
  value: 2,
  year: 2010
}, {
  group: 2,
  value: 1,
  year: 2011
}, {
  group: 2,
  value: 3,
  year: 2012
}, {
  group: 2,
  value: 6,
  year: 2013
}];
var hotSettings = {
  data: data,
  columns: [{
    data: 'group',
    type: 'numeric'
  }, {
    data: 'value',
    type: 'numeric'
  }, {
    data: 'year',
    type: 'numeric'
  }],
  stretchH: 'all',
  colHeaders: [
    'Group',
    'Valeur',
    'Année'
  ],
  init: function() {
    dataToChart(this.getSourceData());
  }
};

var hotTable = new Handsontable(elTable, hotSettings);

hotTable.addHook("afterChange", function(x) {
  dataToChart(this.getSourceData())
});


/**
 * @param {Object} o Options
 * @param {Object} o.data data from hotable
 * @param {Array} o.posColumns 
 */
function dataToChart(data) {

  var groups = {};
  var series = [];
  var groupKeys = [];
  for (var i = 0; i < data.length; i++) {
    var row = data[i];
    if (!groups[row.group]) groups[row.group] = [];
    var item = {
    y : row.value ? row.value : 0,
    x : row.year ? row.year : (new Date()).getFullYear() 
    }
    groups[row.group].push(item);
  }
  
  groupKeys = Object.keys(groups);
  for(var i = 0 ; i < groupKeys.length; i++){
  var item = {
   name : 'Group' + groupKeys[i],
   data : groups[groupKeys[i]]
  }
  series.push(item);
  }
  
  var chart = new Chartist.Line(elChart, {
  series: series
  }, {
  axisX: {
    type: Chartist.FixedScaleAxis,
    divisor: 5,
    labelInterpolationFnc: function(value) {
      return Math.round(value);
    }
  }
});
 
}