Forums General
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Steve Diaz
15
Issue with Infragistics Chart Component in Angular Application
posted

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:

  1. I've double-checked my data-fetching mechanism, and it seems to be retrieving the updated data correctly.
  2. I've reviewed the code related to chart updates, and it appears to be correctly binding the new data to the chart series.

Environment:

  • Operating System: Windows 10
  • Development Tools: Visual Studio Code
  • Infragistics Version: Ignite UI for Angular 12.1.0
  • Angular Version: 12.2.3
  • Node.js Version: 14.17.0
  • NPM Version: 7.22.0

Code Snippets:

Here's the relevant code snippet from my component:

typescriptCopy code
// 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:

  1. Manually calling the detectChanges() method after updating the chart data.
  2. Reviewing the API response to ensure it's in the correct format.
  3. Using a different charting library temporarily to confirm that the issue is specific to the Infragistics Chart component.

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

  • 34650
    Offline posted

    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?