Topic: How to update line chart

cignal pro asked 6 years ago


how can i trigger chart.update form my component.ts file? I'm trying to load new data to chart but the old labels (x -axis) values do not change  although the line redrawing with new values.    

andrews88l pro answered 6 years ago


I've had the same issue. I believe it stems from the ng-mdb-pro/typoescripts/free/charts/chart.directive.ts file in the ngOnChanges() method.

Start your code here

public ngOnChanges(changes: SimpleChanges): void {
if (this.initFlag) {
// Check if the changes are in the data or datasets
if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
if (changes['data']) {
this.updateChartData(changes['data'].currentValue);
} else {
this.updateChartData(changes['datasets'].currentValue);
}

this.chart.update();
} else {
// otherwise rebuild the chart
this.refresh();
}
}
}

 

For some reason, I can't get it to trigger this.refresh(). This means we're stuck updating the current chart vs. redrawing the whole thing with the changed x-axis items. Super frustrating, especially because the y-axis adjusts dynamically.


Dawid Adach pro answered 6 years ago


Dear cignal, cannot reproduce the issue. After using sample chart from documentation, I am updating labels  on timeOut:
ngOnInit() {
setTimeout(() => {

this.chartLabels= ['May', 'May', 'May', 'May', 'May', 'Jun', 'Jul'];
console.log("dokonalo sie");
}, 5000);
And the chart is getting recreated correctly.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags