Display data from Spring boot API into primeng chart Angular

Question

I have a backend api in which i created a web service that gives this json response:

[
 {
    "backgroundColor": "#36A2EB",
    "hoverBackgroundColor": "#36A2EB",
    "type": "SUCCESS",
    "value": 1
 }
]

this is my ts code:

data: any;
ngOnInit(): void {
this.dashboardService.getStatStatusOverall().subscribe((data)=>{
  this.data.datasets[0].data = data.map(a =>  a.value);
  this.data.datasets[0].backgroundColor = data.map(a =>  a.backgroundColor);
  this.data.datasets[0].hoverBackgroundColor = data.map(a =>  a.hoverBackgroundColor);
  this.data.labels = data.map(a =>  a.type);
  //this.chart.refresh();
})
}

and this this is my html code:

<p-chart type="doughnut" [data]="data"></p-chart>

I get this error in my console:"Cannot read property 'datasets' of undefined"

Barremian · Accepted Answer · 2021-07-27 09:22:32Z

1

You aren't initializing the variable this.data.

Try the following

data: { datasets: any[], labels: any[] } = { datasets: [], labels: [] };

ngOnInit(): void {
  this.dashboardService.getStatStatusOverall().subscribe((data) => {
    this.data = {
      datasets: [{
        data: data.map(a => a.value),
        backgroundColor: data.map(a => a.backgroundColor),
        hoverBackgroundColor: data.map(a => a.hoverBackgroundColor),
      }],
      labels: data.map(a => a.type)
    };
    // this.chart.refresh();
  });
}

answered Jul 27, 2021 at 9:22

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youssef Boudaya Over a year ago

i'm trying to put both chart on same row with each 6 cols"<div class="row"> <div classs="col-md-6"> <p-chart type="doughnut" [data]="data"></p-chart> </div> <div classs="col-md-6"> <p-chart type="pie" [data]="data2"></p-chart> </div> </div>" but this is not working

Collectives™ on Stack Overflow

Display data from Spring boot API into primeng chart Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related