Hello Infragistics community,
I hope you're all doing well. I'm currently working on an Angular project that involves the use of Infragistics Ignite UI for Angular's Chart component, and I've encountered a challenging issue that I'm struggling to resolve. I'm hoping that some of you might have faced a similar problem and could provide guidance on how to overcome it.
Issue Description:
I'm working on implementing a dynamic chart that fetches data from a remote API and updates in real-time. However, I'm encountering an issue where the chart doesn't update as expected when new data is received from the API. Specifically, the chart isn't redrawing with the new data points, and I'm not seeing any errors in the console.
Steps Taken:
Environment:
Code Snippets:
Here's the relevant code snippet from my component:
// TypeScript component code import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent } from 'igniteui-angular/charts'; import { IgxDataChartComponent } from 'igniteui-angular/charts'; @Component({ selector: 'app-chart', templateUrl: './chart.component.html', }) export class ChartComponent { public data: any[]; constructor(private http: HttpClient) { // Fetch initial data on component initialization this.http.get('/api/data').subscribe((result: any[]) => { this.data = result; }); } // Additional code for updating the chart // ... }
What I've Tried:
I've explored a few possible solutions:
detectChanges()
Request for Assistance:
I would greatly appreciate any guidance, suggestions, or insights from those who have experience with Infragistics Ignite UI for Angular, particularly regarding real-time chart updates. If you've encountered a similar issue in the past or have expertise in this area, please share your insights on how to resolve it. Your help will be invaluable to me.
Thank you in advance for your support, and I look forward to your responses.
Best regards
Hello Steve,
I have been investigating into the behavior you are seeing, and I am curious as to the method that you are using to actually update the chart. I can see from your code snippet that it appears that initially, you are using something like the following to update the chart:
this.http.get('/api/data').subscribe((result: any[]) => { this.data = result; });
I imagine that in this case “this.data” is what you have bound in some way to the dataSource properties of the series/axes of the chart or the chart itself in the case of the IgxCategoryChart.
I am curious as to what you are doing in the actual updates to the chart in this case, though? Are you essentially just calling the above code again or are you programmatically adding data to the this.data collection? Also, are you calling the related “notify” methods on the chart – that is, the notifyInsertItem or notifyClearItems method when you are making modifications to the data source? Can you please provide some more information on this part, as I believe this is probably where the issue lies?
Issue resolved . TAHNK YOU.