CODEWITHSUNDEEP
jqueryangular
sharingiscaring
sharingiscaring

Reputation: 165

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.

Upvotes: 2

Views: 3087

Answers (3)

Meet Dave
Meet Dave

Reputation: 1089

If you are using easy-pie-chart with ng-2 Here's how your HTML Code should look like -> 

<div class="pie-chart-item" class="centerthis">
  <div class="chart0" [attr.data-rel]="" data-percent="">
  </div>
<div class="description">
  <div class="description-stats black-text">{{this._percent}}%</div>
  </div>
</div>

And all the work is done in your typescript file

To update the value, make the following changes in your typescript file -> 

this._percent = value;
jQuery('.chart0').data('easyPieChart').update(this._percent);

To dive deeper, A complete working reference can be found on this template. Have a look https://github.com/akveo/ngx-admin/blob/ng2-admin/src/app/pages/dashboard/pieChart/pieChart.component.ts

Upvotes: 3

wilovent
wilovent

Reputation: 1364

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

Upvotes: 5

wilovent
wilovent

Reputation: 1364

You can bind non-Angular attribute using this syntax : [attr.data-percent]="piedata[7]"

Upvotes: 2

Related Questions