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 · Answer 1 · 2017-05-19T11:55:44.700

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 '17 at 11:55

answered May 19 '17 at 11:48

Sachila Ranawaka

39,756
7
56
80

Thanks a lot..It worked. Now I am not getting that error – user2301 May 19 '17 at 12:10
This solution did not work `setTimeout(()=>{ this.chart.load({ url: '/api/systemvalues' }); }, 1000);` – user2301 May 19 '17 at 13:09
what about the other one – Sachila Ranawaka May 19 '17 at 13:18
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. – user2301 May 19 '17 at 13:34
note that content of the timeout only executes once after 1 second. After that it will not execute – Sachila Ranawaka May 19 '17 at 13:37
Okay Thanks. Is it possible to load or refresh for every 5 minutes? – user2301 May 19 '17 at 13:48
http://stackoverflow.com/questions/35813310/how-to-create-timer-in-angular2 – Sachila Ranawaka May 19 '17 at 13:52

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

1 Answers1