Wijmo 5 - FlexPie Example

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Wijmo 5 FlexPie example</h1>
    <wj-flex-pie
       binding-name="country"
       binding="sales"
       items-source="data"
       is-animated="True"
       selection-mode="Point"
       selected-item-position="3"
       selected-item-offset="0.1"
       inner-radius="0.5"
       control="chart">
       <wj-flex-chart-legend 
           position="None">
       </wj-flex-chart-legend>
    </wj-flex-pie>
    <p>
    Selected index: {{selectedIndex}}
    </p>
    <p>
    Selection index (private variable): {{selectionIndex}}
    </p>
</div>

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope,$timeout) {

    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }

    // expose data as a CollectionView to get events
    $scope.data = new wijmo.collections.CollectionView(data);
    $scope.$watch('chart', function () {
      if ($scope.chart) {
        $scope.chart.selectionChanged.addHandler(function (e) {
 							$timeout(function(){
              $scope.selectedIndex = e.selectedIndex;               
              });
              
              
							$scope.selectionIndex = e._selectionIndex; // e._selectionIndex does change to reflect index change
//          $scope.$apply();
        });
      }
    });
});