-1

My code is https://codesandbox.io/s/late-forest-cuwf7

I have 2 files : app.component.html and app.component.ts

I display a chart which shows 1 belongs to one location and 1 belongs to another location.

What I need is to display that particular record which belongs to the location onclick of the location region in chart. Say, if i click on Chennai region, I need to display the record in which location is chennai

I tried to make use of onclick function of c3 for the same. Inside onclick, filteredData is the variable which has the data filtered based on location. On click, am able to log filteredData in console, but i don't see the same visible in UI.

Could you please help on binding this filtered data to UI?

Gayathri
  • 1,776
  • 5
  • 23
  • 50

1 Answers1

0

Use arrow function to refer current object

  ngAfterViewInit() {
    let value = JSON.parse(JSON.stringify(this.resultData));
    this.chart = c3.generate({
      bindto: "#chart",
      data: {
        onclick: (d, element) => {
          this.filteredData = value.filter(record => record.location === d.id);
          console.log(this.filteredData);
        },
        json: [_.countBy(this.resultData, x => x.location)],
        type: "pie",
        keys: {
          value: _.uniq(_.pluck(this.resultData, "location"))
        }
      }
    });
  }

Forked Example

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • Omg..I never thought the solution to be this simple. I was very much thinking it's a problem with data binding. Asking, out of curiosity to learn and unawareness, how did using arrow function make a difference? – Gayathri Dec 18 '19 at 17:22
  • Every new function created by function statement, defined its own this value based on how the function was called. so using arrow function will refer to current object, In the above example this means app.component.ts class – Chellappan வ Dec 18 '19 at 17:29
  • @Gayathri for more info check: https://www.codementor.io/@dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc – Chellappan வ Dec 18 '19 at 17:31