Result

編集はcontenteditable属性を使っています。
動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください

jQuery

var vis = function(e) {
  var count = $(e).children('td').not(':first-of-type').length;
  var width = $('.chart').height();
  var barwidth = (width/count)-10;
  var heighest = 0;
  var chartTitle = $('th:first-of-type').html();
  var tableTitle = $('.table-title').html();
  var chartTitleVal = $(e).children('td:first-of-type').html();
  $('.chart').empty();
  $('.legend').empty();
  $('.titles').empty();
  $('.title').empty();
  $('.x-axis').empty();
  $('.title').html(chartTitleVal);
  $('.chart').prepend('<div class="x-axis">'+tableTitle+'</div>');//テキストをグラフ側にも反映
  $('th').not(':first-of-type').each(function(){
    var title = $(this).html();
    $('.titles').append('<div style="width:'+barwidth+'px;">'+title+'</div>');
  });
  $(e).children('td').not(':first-of-type').each(function(){ 
    var contents = $(this).html();
    var value = parseInt(contents);
    if( value > heighest){
      heighest = value
    }
  });
  
  $(e).children('td').not(':first-of-type').each(function(){//tableの数値をグラフに反映
    var contents = $(this).html();
    var value = parseInt(contents);
    var barheight = (value/heighest)*100;
    $('.chart').append('<div class="bar" style="width:'+barheight+'%; height:'+barwidth+'px;"></div>');
    $('.legend').append('<div style="width:'+barwidth+'px;">'+value+'</div>');
  });
}

$('tr').not('.header').on('click', function(){
  var x = $(this);
 x.css({'background':'#E2EBC2'}).addClass('selected').siblings().removeClass('selected').css({'background':'#FFFFFF'});
 vis(x);
});


$(function(){
  var x = $('tr').not('.header').first(); x.css({'background':'#E2EBC2'}).addClass('selected').siblings().css({'background':'#FFFFFF'});
  vis(x);
});

$('td').on('keyup paste input', function(){
  var x = $(this).parent();
  vis(x);
});

$('th').on('keyup paste input', function(){
  var x = $('.selected');
  vis(x);
});

$('.table-title').on('keyup paste input', function(){
  var x = $('.selected');
  vis(x);
});

css

.chart {
  margin-top: -60px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  height: 450px;
  width: 300px;
  transform: rotate(-90deg);
}
.bar {
  background: #66C0CC;
  margin-top: 10px;
  animation: height 0.8s ease;
  padding: 10px;
}
.x-axis {
  margin-top: -30px;
  padding-bottom: 10px;
}
.legend {
  clear: both;
  color: #66C0CC;
  width: 450px;
}
.legend div {
  float: left;
  margin-left: 10px;
}
.titles {
  clear: both;
  width: 450px;
  margin-top: -60px;
}
.titles div {
  float: left;
  margin-left: 10px;
}

html

<div class="left">
  <div class="table">
    <h2 class="table-title" contenteditable="true">販売実績</h2>
    <table>
    <tr class="header">
      <th contenteditable=true>年</th>
      <th contenteditable=true>りんご</th>
      <th contenteditable=true>なし</th>
      <th contenteditable=true>みかん</th>
      <th contenteditable=true>もも</th>
    </tr>
    <tr>
      <td contenteditable=true>2010年</td>
      <td contenteditable=true>2</td>
      <td contenteditable=true>31</td>
      <td contenteditable=true>24</td>
      <td contenteditable=true>51</td>
    </tr>
    <tr>
      <td contenteditable=true>2011年</td>
      <td contenteditable=true>36</td>
      <td contenteditable=true>21</td>
      <td contenteditable=true>47</td>
      <td contenteditable=true>109</td>
    </tr>
    <tr>
      <td contenteditable=true>2012年</td>
      <td contenteditable=true>56</td>
      <td contenteditable=true>9</td>
      <td contenteditable=true>33</td>
      <td contenteditable=true>18</td>
    </tr>
    <tr>
      <td contenteditable=true>2013年</td>
      <td contenteditable=true>90</td>
      <td contenteditable=true>55</td>
      <td contenteditable=true>71</td>
      <td contenteditable=true>12</td>
    </tr>
    <tr>
      <td contenteditable=true>2014年</td>
      <td contenteditable=true>36</td>
      <td contenteditable=true>92</td>
      <td contenteditable=true>77</td>
      <td contenteditable=true>61</td>
    </tr>
  </table>
  </div>
</div>

<div class="right">
  <h3 class="title"></h3>
 
  <div class="chart">
 <div class="x-axis"></div>
  </div>
  <div class="titles">
  </div>
  <div class="legend">
  </div>
</div>

via

Just a moment...

codepen.io