C3.js - this.chart.load is not a function - angular 2 and Typescript

Question

I am generating chart using c3. I am accessing Rest API in the c3 chart to load the JSON data. I referred this example http://c3js.org/samples/data_load.html I am trying to load the chart dynamically using load function which gives me

Runtime Error this.chart.load is not a function

private chart: any;
this.chart = c3.generate({
    data: {
        url: '/api/systemvalues',
        type: 'line'
    }
});
setTimeout(function () {
    this.chart.load({
        url: '/api/systemvalues'
    });
}, 1000);

These are the versions used:

 @angular/core": "2.4.10", 
 "c3": "^0.4.11", 
 "d3": "^3.5.17", 
 "typescript": "2.2.2"

Sachila Ranawaka · Accepted Answer · 2017-05-19 11:55:44Z

2

call the setTimeout using ()=> instead function(){

private chart: any;
this.chart = c3.generate({
    data: {
        url: '/api/systemvalues',
        type: 'line'
    }
});
setTimeout(()=>{
    this.chart.load({
        url: '/api/systemvalues'
    });
}, 1000);

OR

assign this to variable and use that variable inside a constructor and call the setTimeout function

private chart: any;
this.chart = c3.generate({
    data: {
        url: '/api/systemvalues',
        type: 'line'
    }
});
constructor(){
  var vm = this;

  setTimeout(function () {
    vm.chart.load({
        url: '/api/systemvalues'
    });
  }, 1000);
}

edited May 19, 2017 at 11:55

answered May 19, 2017 at 11:48

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2301 Over a year ago

Thanks a lot..It worked. Now I am not getting that error

user2301 Over a year ago

This solution did not work setTimeout(()=>{ this.chart.load({ url: '/api/systemvalues' }); }, 1000);

Sachila Ranawaka Over a year ago

what about the other one

user2301 Over a year ago

The other one did not show any error. But the chart is not getting updated dynamically. I have to refresh manually to see the new values on the chart.

Sachila Ranawaka Over a year ago

note that content of the timeout only executes once after 1 second. After that it will not execute

|

Collectives™ on Stack Overflow

C3.js - this.chart.load is not a function - angular 2 and Typescript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related