FusionCharts API - Event: dataplotRollOver

Created using FusionCharts Suite XT - www.fusioncharts.com

by Saneesh K V

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<div id="chart-container">
  FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var ageGroupChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Split of visitors by age group-FY2013-14",
        "subCaption": "Harry's SuperMart",
        "showPercentValues": "1",
        "showTooltip": "1",
        "decimals": "1",
        "plotToolText": "<div id='info'></div>"
      },
      "data": [{
        "label": "Middle East",
        "value": "600",
        "gp": "2%"
      }, {
        "label": "Asia",
        "value": "1800",
        "gp": "6.5%"
      }, {
        "label": "USA",
        "value": "300",
        "gp": "0.6%"
      }, {
        "label": "EUROPE",
        "value": "1200",
        "gp": "5%"
      }]
    },
    "events": {


      "dataplotRollOver": function(eventObj) {
        var str = eventObj.sender.args.dataSource.data[eventObj.data.dataIndex].gp,
        	value = eventObj.data.categoryLabel;
					
        setTimeout(function () {
        var el = document.getElementById("info");
        el && (el.innerHTML = value + " " + eventObj.data.value + " <b>" + str + "</b>");
        }, 16)
      }
    }
  });

  ageGroupChart.render();

});