Dibshare Dibshare - 29 days ago 8
jQuery Question

Angular 2 easy pie chart not working

I am trying to convert my existing jquery easy-pie-chart to Angular 2. As I am finding it difficult to completely rewrite entire code, I am trying to modify in bits and pieces.

Now to convert existing code I have done this (earlier it was inner-html but event binding not working in Angular 2) .

<div class="col-md-2" style="text-align:center;" *ngFor="let piedata of piemasterData">
<label (click)="getData(piedata[1])" > {{piedata[1]}} </label>

<div class="chart" data-percent= piedata[7] >
<span class="percent">
{{piedata[7]}}
</span>
</div>
<br/>

</div>


Then I am calling

$('.chart').easyPieChart({

})


Now the problem is the easy-pie-chart is not taking the value set in
data-percent
. Hence its only showing a dot.

enter image description here .

For example here ABC should take
10.48
and gauge the same value. Further after inspect elementing I saw the
data-percent="piedata[7]"
. I tried many combinations
{{piedata[7]}}
but still the value is not reflecting. I am not sure how to fix this in Angular 2.

Answer Source

Since i'm in a good mood, here's a directive you can use to display pies :

import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import * as EasyPieChart from '../vendors/easypiechart.min.js'

@Directive({
  selector: 'easy-pie-chart'
})
export class EasyPieChartDirective implements OnInit {

  private pie: any;
  private _percent: number;

  @Input()
  set percent(value) {
    this._percent = value;
    if (this.pie)
      this.pie.update(value);
  };
  get percent() { return this._percent };

  @Input()
  options: any;

  constructor(private element: ElementRef) {
  }

  ngOnInit() {
    this.pie = new EasyPieChart(this.element.nativeElement, this.options);
    this.pie.update(this.percent)
  }
}

You could use it like this:

<easy-pie-chart [options]="{/*Your options goes here*/}" [percent]="piedata[7]">{{piedata[7]}}</easy-pie-chart>

This will also live update the chart if piedata[7] changed.

You will have to add "allowJs": true in the compiler options of tsconfig.json to make it work