CODEWITHSUNDEEP
angulartypescriptchartskendo-uidrilldown
Pra
Pra

Reputation: 43

Drill down Angular chart

I want to create drill down option for Kendo pie chart in angular. with a single data source. In here I provided the link of the code below. I want to show the below data in the pie chart

{kind: 'Asia', share: 0.175,parentID: '' },
{kind: 'America', share: 0.238,parentID: '' },
{kind: 'Europe', share: 0.118,parentID: '' },
{kind: 'Africa', share: 0.052,parentID: '' },

when I click on the slice i want to drill down the chart according to the parent ID.

{kind: 'SL',share: 0.225,parentID: 'Asia' },
{kind: 'India',share: 0.192,parentID: 'Asia' },
{kind: 'Russia',share: 0.192,parentID: 'Europe' },
{kind: 'France',share: 0.192,parentID: 'Europe' },

Code: https://stackblitz.com/edit/angular-myxeux-ugcarp?file=app%2Fapp.component.ts

Upvotes: -1

Views: 618

Answers (1)

Mahdoui Hafedh
Mahdoui Hafedh

Reputation: 36

according to your code and what i understand from your demande , you need to filter your data on every click on the slice that you want to drill down according to the parentID. so i make some changes to your code here:

 public initialData: any[] = this.data.filter(
    (element) => element.parentID == ''
  );
  public filtredData: any[] = this.initialData;

  public onClick(e) {
    this.initialData.length != this.filtredData.length
      ? (this.filtredData = this.initialData)
      : this.data.filter((element) => element.parentID == e.dataItem.kind)
          .length == 0
      ? (this.filtredData = this.initialData)
      : (this.filtredData = this.data.filter(
          (element) => element.parentID == e.dataItem.kind
        ));
  }

make sure to change data source of you kindo component to filtredData

<kendo-chart-series-item
            type="donut" [data]="filtredData"
            categoryField="kind" field="share">

Upvotes: 1

Related Questions