Chartjs-How can I use the data I have stored in a method after subscribe in Angular? [Angular 11]

by

1👍

✅

That is why we have the rxjs operators which can perform intermediate operations inbetween the subscribe and the calls.

...
charts: any
...
constructor(
    private measureService: MeasureService,
  ) { }
...
ngOnInit() {
forkJoin([
    this.getPublished(),
    this.getEdits(),
]).subscribe(() => {
    this.chart = new Chart('canvas', {
          type: "doughnut",
          data: {
            labels: ["Test 1", "Test 2"],
             datasets: [
              {
                data: [this.numberEditing, this.numberPublished], // <- DATA GOES HERE
                backgroundColor: ['rgba(255, 0, 0, 1)', 'rgba(13, 180, 185, 1)']
              }
            ],
          },
        })
});

}

Then the methods can be modified to return an observable with a pipe operator, followed by a tap, which can perform operations without modifying the stream

getEdits() {
    return this.measureService.getEditing().pipe(
        tap(data => this.getNumberEditing(data.length))
    );
  }

getPublished() {
    return this.measureService.getPublished().pipe(
        tap(data => this.getPublishedNumber(data.length))
    );
  }

3👍

You should use async – await functionality for API response.
When you get response from API then you can pass this two data in Chart.

you have to pass data in doughnut or Pie chart of chartjs like below:

import { Chart } from 'chart.js';

this.chart = new Chart('canvas', {
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: this.numberEditing, // Alwasy number type of List. number[]
        backgroundColor: 'rgba(255, 0, 0, 1)',
      },
      {
        data: this.numberPublished, // Alwasy number type of List. number[]
        backgroundColor: 'rgba(13, 180, 185, 1)'
      }
    ]
  },
});

Leave a comment