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