Angular charts using json data and KendoUI

1 Answer 509 Views
Charts
Piumi
Top achievements
Rank 1
Piumi asked on 05 Feb 2022, 06:46 AM

I'm a beginner and i tried to create a pie chart using json data. but this code does not shows any error and it does not show the chart also.

component.ts file is here

 

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  export class pieData {
  constructor(
    public kind: string,
    public share: number,
  ) {}
}

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements OnInit {

  pieData: pieData[];
  constructor(private httpClient: HttpClient) {}
      ngOnInit() {
    this.getpieData();
  }
      getpieData() {
        this.httpClient.get<any>('../db.json').subscribe(
      Response => {
        console.log(Response);
        this.pieData = Response;
      }
    );

    console.log(this.pieData);
  }
}

 

component.html file is here

<kendo-chart [transitions]="false" [style.height]="'100%'" [style.width]="'100%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item type="pie"
                             [data]="pieData?.pieData"
                             categoryField="kind"
                             field="share"
                             *ngIf="pieData">
      <kendo-chart-series-item-labels [align]="labelAlign"
                                      color="#000"
                                      [content]="labelContent">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
  <kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>

 

db.json file is here

"pieData": [ { "id": 1, "kind": "Solar", "share": 5 }, { "id": 2, "kind": "Wind", "share": 2 }, ]

 

1 Answer, 1 is accepted

Sort by
0
Martin Bechev
Telerik team
answered on 09 Feb 2022, 10:30 AM

Hi Piumi,

Thank you for the provided details.

I tried the markup and example data, in the following StackBlitz but it seems to work:

https://stackblitz.com/edit/angular-r7xnw3

The issue might be related to the fact that the data property of the <kendo-chart-series-item> expects an array value:

https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesItemComponent/#toc-data

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts
Asked by
Piumi
Top achievements
Rank 1
Answers by
Martin Bechev
Telerik team
Share this question
or