Create stacked bar chart using data in API-CodePudding

I am beginner to angular and I try to create chart using json data in API and using kendo charts. I importing data using service file. It show data in the console but do not create the graph.

This is my component.html file.

<kendo-chart [style.height]="'90%'" [style.width]="'90%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let item of series"
                             [data]="item.items" [name]="item.value"
                             field="value" categoryField="interval"
                             type="column" stack="true">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

This is my component.ts file

import { Component, OnInit } from '@angular/core';
import { groupBy, GroupResult } from "@progress/kendo-data-query";
import { StackedBarChartService } from './stacked-bar-chart.service';
  @Component({
  selector: 'app-stacked-bar-chart',
  templateUrl: './stacked-bar-chart.component.html',
  styleUrls: ['./stacked-bar-chart.component.css']
})
export class StackedBarChartComponent implements OnInit {
  public series: GroupResult[];
  stackedbarchartdata: any = [];
  constructor(private StackedBarChart: StackedBarChartService) {    
  }
    ngOnInit() {
    this.series = groupBy(this.stackedbarchartdata, [{ field: 'service' }]) as GroupResult[];
    this.StackedBarChart.getMethod().subscribe((res: any) => {
    this.stackedbarchartdata = res;
    console.log(this.stackedbarchartdata);
    })
  }
}

This is my dataset

[
  {
    "id": 1,
    "interval": 1,
    "service": "Service 1",
    "value": 5
  },
  {
    "id": 2,
    "interval": 2,
    "service": "Service 1",
    "value": 15
  },
  {
    "id": 3,
    "interval": 1,
    "service": "Service 2",
    "value": 10
  },
  {
    "id": 4,
    "interval": 2,
    "service": "Service 2",
    "value": 5
  },

CodePudding user response：

I have no idea about kendo charts but there is an error in your code. You are assigning this.series = groupBy ..... but at that point stackedbarchartdata is still null therefore this.serie will always be null or empty. You should move it inside the subscribe, have a look:

ngOnInit() {
  this.StackedBarChart.getMethod().subscribe((res: any) => {
    this.stackedbarchartdata = res;
    console.log(this.stackedbarchartdata);
    this.series = groupBy(this.stackedbarchartdata, [{ field: 'service' }]) as GroupResult[];
    console.log(this.series);
  });
}

and in the HTML:

<h1 *ngIf="!series">Loading...</h1>
<kendo-chart *ngIf="series" [style.height]="'90%'" [style.width]="'90%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let item of series"
                             [data]="item.items" [name]="item.value"
                             field="value" categoryField="interval"
                             type="column" stack="true">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

again I don't know nothing about kendo charts therefore there might be more errors but i hope this helps you