How to update line chart

Topic: How to update line chart

cignal pro asked 7 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.

Add comment

Dawid Adach pro answered 7 years ago

0 0 Best answer

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.

Add comment

andrews88l pro answered 7 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

About author

cignal

Pro User

5Support score
6Questions 0Answers

0Snippets likes 0Snippets