Angular charts using json data and KendoUI

Question

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('http://localhost:3000/pieData').subscribe(
      Response => {
        console.log(Response);
        this.pieData = Response;
      }
    );

    console.log(this.pieData);
  }
}

component.html file is here

db.json file is here (it is inside the assets folder)

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

user_9464594 · Answer

First, you should modify getData() method to get your data from the json file

getpieData() {
    this.httpClient.get('assets/db.json').subscribe(
      Response => {
        this.pieData = Response;
      }
    );

Then you can pass this data to your chart using [data] attribute

Here is a working example:
Stackblitz

Angular charts using json data and KendoUI

1 Answers