Troubleshooting: "C3.js - Issue with this.chart.load function in angular 2 and Typescript"

Question

Troubleshooting: "C3.js - Issue with this.chart.load function in angular 2 and Typescript"

When working on generating a chart using c3, I encountered an issue with accessing a Rest API in the c3 chart to load JSON data. I found guidance from this example . The problem arises when attempting to dynamically load the chart using the 'load' function, resulting in a runtime error:

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);

The versions used for this project are:

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

angular typescript d3.js angular2-template c3.js

Answer 1

Answer №1

Utilize the setTimeout method with ()=> instead of 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 a variable and utilize that variable within a constructor to execute 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);
}

Answer 2

Utilize the setTimeout method with ()=> instead of 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 a variable and utilize that variable within a constructor to execute 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);
}

Troubleshooting: "C3.js - Issue with this.chart.load function in angular 2 and Typescript"

Answer №1

Similar questions

Executing a Typescript function in an MVC5 cshtml file, optimized with webpack bundling

Unable to create any diagrams through the Angular CLI generate function

Is it possible to implement pagination on a material table in Angular 10 without relying on the MatTableDataSource component?

Tips for updating the main route and its components upon re-clicking in Angular

Using optional chaining along with the methods toLowerCase and indexOf while iterating through an array using the map

Encountered an error while loading resource: net::ERR_CONNECTION_REFUSED in Nodejs

Discover the way to remotely assess the functionality of an Angular application using chrome-remote-interface

Tips for guaranteeing a Typescript string enum with identical key and value pairs

after ajax post, enhance original object by merging with the latest server values

Reading a single line of text synchronously in Node JS

Utilize Angular Service Worker to prefetch API data efficiently (dataGroups)

Is it possible to dynamically assign class properties from an array in JavaScript/TypeScript?

Error code TS2749 is indicating that the identifier 'XXX' is being interpreted as a value instead of a type. Perhaps you intended to use 'typeof XXX' instead

Utilize DomSanitizer to add custom styles to elements using classes in Angular

Invalid sequencing of Nest.js async onModuleInit causing issues

Obtaining the 'Content-Range' in an Angular application with Lotus Notes/Domino

What is the best way to access object IDs from Firebase and then save them individually?

Angular is expecting data of type string or number for the operands provided

Managing data from POST requests in Angular using Typescript

Executing the serve command in an Angular project necessitates a project definition, which unfortunately could not be located