Trigger scope event from chart

Hover over a plot to trigger an event in the controller, and update the scope

by Ashok Mandal

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://rawgit.com/fusioncharts/angularjs-fusioncharts/develop/src/angular-fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div ng-app='myApp'>
  <div ng-controller='MyController' style="width:600px">
    <!--Listen to FusionCharts events by using "fcevent-<fc-event-name>" attribute. In this case the event name is dataplotrollover-->
    <div fusioncharts width="600" height="350" type="column2d" , datasource="{{dataSource}}" fcevent-dataplotrollover="plotRollOver(event)" fcevent-dataplotrollout="plotRollOut()"></div>
    <p style>
      You are currently hovering over
      <span style="font-weight: 400">{{selectedLabel || "______"}}</span> whose value is
      <span style="font-weight: 400">{{selectedValue || "_______"}}</span>
    </p>
  </div>
</div>

CSS

p {
  font-family: basefontRegular, Helvetica Neue, Arial, sans-serif;
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  padding: 10px;
  background: #f5f2f0;
}

JavaScript

var myApp = angular.module('myApp', ['ng-fusioncharts']);
myApp.controller('MyController', ['$scope', function($scope) {
  // datasource
  $scope.dataSource = {
    "chart": {
      "caption": "Countries With Most Oil Reserves [2017-18]",
      "subCaption": "In MMbbl = One Million barrels",
      "xAxisName": "Country",
      "yAxisName": "Reserves (MMbbl)",
      "numberSuffix": "K",
      "theme": "fusion",
    },
    "data": [{
        "label": "Venezuela",
        "value": "290"
      },
      {
        "label": "Saudi",
        "value": "260"
      },
      {
        "label": "Canada",
        "value": "180"
      },
      {
        "label": "Iran",
        "value": "140"
      },
      {
        "label": "Russia",
        "value": "115"
      },
      {
        "label": "UAE",
        "value": "100"
      },
      {
        "label": "US",
        "value": "30"
      },
      {
        "label": "China",
        "value": "30"
      }
    ]
  };
  // handler for dataplotrollover event.
  $scope.plotRollOver = function(event) {
    $scope.$apply(function() {
      $scope.selectedValue = event.data.displayValue;
      $scope.selectedLabel = event.data.categoryLabel;
    });
  }
  // handler for dataplotrollout event.
  $scope.plotRollOut = function(event) {
    $scope.$apply(function() {
      $scope.selectedValue = '_______';
      $scope.selectedLabel = '_______';
    });
  }
}]);