RadialProgressChart Angular2 ng2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular2 playground</title>

    <base href>
    
</head>
 
<body>
    <dashboard>Loading...</dashboard> 



<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script src="config.js"></script>
<!-- Angular2 import -->

<script src="https://code.angularjs.org/2.0.0-alpha.37/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.37/router.dev.js"></script>
<script src="http://code.angularjs.org/2.0.0-alpha.37/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdn.rawgit.com/pablomolnar/radial-progress-chart/master/dist/radial-progress-chart.min.js"></script>
<script>
    //bootstrap the Angular2 application
    System.import('app').catch(console.log.bind(console));
</script>
</body> 





</html>

import { 
Component, 
View, 
bootstrap,
Directive,
LifecycleEvent,
Injectable,
Inject,
ElementRef,
CORE_DIRECTIVES
} from 'angular2/angular2';
import {RouteConfig, ROUTER_BINDINGS, ROUTER_DIRECTIVES, Router} from 'angular2/router'
import 'rx';
import 'rxlite'; 
 


@Directive({
  selector: 'radial-chart',
  properties: ['data'],
})
export class RadialChart {
  
  data: number
  progress: any;

  constructor(@Inject(ElementRef)private elementRef: ElementRef) {
    var el: any = elementRef.nativeElement;
    this.progress = new RadialProgressChart(el, { series: [0], center: function(p) { return p + '%' }});
  }
  
  onChanges(changes){
    if (!this.data) return;
    console.log("onChange %s", changes, this.data)
    this.progress.update(this.data);
  }
  
  onInit(){
    console.log("init")
  }
  
  onDestroy(){
    console.log("destroy")
    var el = this.elementRef.nativeElement;
    el.removeChild(el.querySelector("svg"))
  }
  
} 



@Component({
    selector: 'analysis'
})
@View({
  directives: [RadialChart],
	template: `<radial-chart bind-data=graphData></radial-chart>`
})
export class Analysis {
  graphData:number;
  constructor() {

    Rx.Observable.interval(1000).
      map((x) => x).
      subscribe((x) => {
         this.graphData = x; console.log(x);
      })    
  }
}

@Component({
    selector: 'home'
})
@View({
  directives: [    
    CORE_DIRECTIVES,
    ROUTER_DIRECTIVES], 
	template: `Home`
})
export class Home {

  
}



@Component({
    selector: 'dashboard'
})
@View({
  directives: [    
    CORE_DIRECTIVES,
    ROUTER_DIRECTIVES], 
	template: `<nav>
	           <a [router-link]="['/analysis']">Analyse</a>
	           <a [router-link]="['/home']" >home</a>
	           <nav/>
	           <router-outlet></router-outlet>`
})
@RouteConfig([
  { path: '/', redirectTo: '/home' },
  { path: '/home', as: 'home', component: Home },
  { path: '/analysis', as: 'analysis', component: Analysis },
])
export class Dashboard {
  constructor( private router: Router){
        router.navigate('/analysis');
  }
  }
}

bootstrap(Dashboard,[ROUTER_BINDINGS]);

System.config({
        defaultJSExtensions: true,
        transpiler: 'typescript',
        typescriptOptions: {
          emitDecoratorMetadata: true
        },
        map: {
          typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js',
          'rx' : 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.all.min.js',
          'rxlite' : 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.lite.compat.min.js',
          'radial-progress-chart': 'https://raw.githubusercontent.com/pablomolnar/radial-progress-chart/master/dist/radial-progress-chart.min.js',
          'd3':'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js',
        },
        paths: {
          app: 'src'
        },
        packages: {
          app: {
            main: 'app.ts',
            defaultExtension: 'ts',
          }
        }
    });