How to use flush() and destroy()

[ankitmadhwani24]

How to use flush() and destroy() method in the ember c3 chart? My chart is not refreshing based on the updated values.

Snippets

jsonData: computed('abc', function() { return { type: 'bar', labels: true, json: this.get('abc'), keys: { x: 'x-axis', value: ['totalABCs'] }, }),

this.get('abc') is dynamic values gets updates when new data load but charts not refreshing.

Please help and thanks in advance.

[maxwondercorn]

If you use a this.set('abc', newData) to update abc the graph should change when the component's attributes are updated. You don't need to use the C3 flush() method to redraw the chart with the new data.

Since you are using this.get() I assume you are still using Ember 2.x so the example below uses older syntax

Edit: Added to example using C3 destroy()

{{!-- application.hbs --}}
{{c3-chart c3chart=myChart data=jsonData}}

<button type="button" onclick={{action 'loadData1'}}>Data 1</button>
<button type="button" onclick={{action 'loadData2'}}>Data 2</button>

<button type="button" onclick={{action "destroyChart"}}>Destroy</button>

// controllers/application.js
export default Controller.extend({
  abc: [
    { sample: 1, totalABCs: 50 },
    { sample: 2, totalABCs: 50 }
  ],

  jsonData: computed('abc', function () {
    return {
      type: 'bar',
      labels: true,
      json: this.get('abc'),
      keys: { x: 'sample', value: ['totalABCs'] }
    };
  }),

  actions: {
    loadData1() {
      const data = [
        { sample: 3, totalABCs: 20 },
        { sample: 4, totalABCs: 80 }
      ];

      this.set('abc', data);
    },

    loadData2() {
      const data = [
        { sample: 5, totalABCs: 80 },
        { sample: 6, totalABCs: 20 }
      ];

      this.set('abc', data);
    },

   // destroy the chart using C3 method
    destroyChart(){
      this.get('myChart').destroy()
    }
  }
});