D3 Pie in Angular 2?

Question

How do I Create a d3 Pie Chart in Angular 2 If I want to calculate the EMI. I have already created the app for EMI Calculations. Now I want to show a PIE Chart regarding the calculations

This is emi.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import * as D3 from 'd3';


@Component({
    selector: 'emi-app',
    templateUrl: 'app/emi/emi.component.html',
    styleUrls:['app/emi/emi.component.css']
})
export class EmiComponent  { 
    loanamount:number
    interestrate:number
    loantenure:number
    emi:number
    newemi:number


    emiForm = new FormGroup({
        loanamount: new FormControl(null, [Validators.required]),
        interestrate: new FormControl(null, [Validators.required]),
        loantenure: new FormControl(null, [Validators.required]),

    });

    calculateEmi() {

        if(this.loanamount && this.interestrate && this.loantenure) {
            let interestPerMonth = this.interestrate/12/100;
            let numerator = Math.pow((1+interestPerMonth), this.loantenure);
            let denominator = numerator - 1;
            this.emi = ((this.loanamount * interestPerMonth) * 
            numerator/denominator);
            var newemi = this.emi.toFixed(2) ;
            console.log(newemi);
          }
        var pie = new d3pie()


    }
}

This is emi.component.html

    <div class="container">
    <h1> EMI Calculator</h1>

  <form [formGroup]="emiForm" name="calc">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group currency">
                <!--<label>Loan Amount:</label><i>&#x20b9;</i>
                <input type= "number" class = "form-control" formControlName = 
    "loanamount" [(ngModel)]="loanamount">  
        </div>

        <div class="form-group ">
            <label>Intrest Rate:</label>
            <i>%</i><input type="number" class="form-control" formControlName="interestrate"  [(ngModel)]="interestrate">
        </div>

        <div class="form-group ">
            <label>Loan Tenure:</label>
            <input type="number" class="form-control" formControlName="loantenure"  [(ngModel)]="loantenure">
        </div>
        <button (click)="calculateEmi()" class="btn btn-primary">Submit</button>
     </div>
     <div class="col-md-8">
        <div id="pieChart"></div>
     </div>
     </div>
    </form>

    <hr/>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4"> 
                <h5>EMI</h5>
            </div>
            <div class= "col-md-4"> 
                   <h5>Total Payable Interest</h5>      
            </div>
            <div class= "col-md-4"> 
                    <h5>Total Payment(Principal amount + Interest)</h5>     
            </div>
        </div>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{emi.toFixed(2)}} / Month</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure-loanamount).toFixed(2)}}</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure).toFixed(2)}}</h5>
            </div>  
        </div>

    </div>

Now I am new to Angular 2 and d3 in general So i would be glad if someone would be kind enough to help me out here

Also this one could be helpful: https://valor-software.com/ng2-charts/ — Martino Bordin, Oct 24 '17 at 16:22

score 2 · Accepted Answer · answered Oct 25 '17 at 07:53

You should use the lifecycle hooks of Angular, so that OnInit, you can call calculateEmi(). At that moment you set all the values needed. Then you build your D3 Pie Chart implementing AfterContentInit.

Check https://angular.io/guide/lifecycle-hooks and http://www.palador.com/2017/02/28/create-a-pie-chart-with-dynamic-data-using-d3-js-angular-2/

D3 Pie in Angular 2?

1 Answers1