AmChart two directions hover event

(Solution using the 'changed' event) Reacting to the User hover on a bar of the chart or over a Table result

by fguillen

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
  <br>
  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
      <div id="chartdiv"></div>   
    </div>

    <table class="table table-hover" id="table-chart">
      <thead> 
        <tr> 
          <th>Country</th> 
          <th>#</th>
        </tr> 
      </thead>
      <tbody>
        <tr id="country-USA">
          <td>USA</td>
          <td>2025</td>
        </tr>
        <tr id="country-China">
          <td>China</td>
          <td>1882</td>
        </tr>
        <tr id="country-Japan">
          <td>Japan</td>
          <td>1809</td>
        </tr>
        <tr id="country-Germany">
          <td>Germany</td>
          <td>1322</td>
        </tr>
        <tr id="country-UK">
          <td>UK</td>
          <td>1122</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [ {
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }],
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "colorField": "color"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  },
  
  "listeners": [
    {
      "event": "rollOverGraphItem",
      "method": function (event) {
        console.log("event", event);
        var countryName = event.item.dataContext.country;
        highlightTableRow(countryName);
      }    
    },
    {
      "event": "rollOutGraphItem",
      "method": function (event) {
        var countryName = event.item.dataContext.country;
        downlightTableRow(countryName);
      }    
    }
  ]
} );

function getCountryNameFromEventIndex(eventIndex) {
  
}

function highlightTableRow(countryName) {
  $("#table-chart tr#country-" + countryName).addClass("warning");
}

function downlightTableRow(countryName) {
  $("#table-chart tr#country-" + countryName).removeClass("warning");
}

function highlightChartBar(countryName) {
    var chartBarDataProvider =
      _.find(chart.dataProvider, function(e) {
        return e.country == countryName;
      });
      
    chartBarDataProvider.color = "#F0D13C";
    chart.validateData();
}

function...