Angular charts using json data and KendoUI

1 Answer 518 Views

Charts

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
    },
   ]

Angular charts using json data and KendoUI

1 Answer, 1 is accepted