Run Fast with Large Sets of Data in Ignite UI Data Charts

Ignite UI Data Charts can render thousands of data points very smoothly and are fastest when rendering large sets of data.

At the end of this lesson, you will have a data chart configured to work with large sets of data in an Angular application. You will see that even with a large amount of data, the chart renders quickly and zooming in and out of the chart is fluid and responsive.

Learn more about Ignite UI Angular 2; you can also learn more about Angular in Angular Essentials, a free eBook published by Infragistics.

Lesson Objectives

  1. Configure a data chart to work with REST API
  2. Create a data chart with large set of data

For more information on the controls used in this lesson, see Ignite UI Data Chart.

Setting up the Project

You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)

After downloading the project, navigate to the directory and run the commands below:

  • npm install
  • npm start

You have executed the npm install command to install all dependencies and the npm start command to run the Angular application. If the project is setup correctly, you will have a running Angular application as shown in the image below. If you receive an error while running the application, stop and run the npm start command again.

Setting up project with Ignite Grid

Right now, the first chart of the application is configured to work with a small data set. It is rendering a data source with ten rows and and functioning smoothly so you can zoom in and zoom out on the chart. Ignite UI data charts are created to work with large and small data sets. Whether you are rending 10 data points or 1000 data points, Ignite UI data charts will behave in the same smooth, seamless manner to help to run the application faster.

To see it in action, modify the chart to work with a large data set returning from a REST API.

Step 1 Get Data in a Component

Currently the chart is configured is to work with a small data set, which is configured in the first line of code in the ngOnInit() function. To get a large data set in the PriceChartComponent, you must use AppService in the component . To do so, in the app folder, open the pricechart.component.ts file, navigate to the ngOnInit() function, and (in the function) delete the first line of code and make a call to appService getStcoks() method. Replace only the first line of code as shown below and leave other codes of ngOnInit() to function as they are.

ngOnInit() {
  this._appService.getStocks()
  .subscribe(
    stocks => this.stocks = stocks,
    error => this.errorMessage = error);
  this.desiredHeight = 0.22 * (window.screen.height) + "px";
  this.chartOptions = this.getPriceChartOptions();
}

Right now, you are fetching data from AppService in the PriceChartComponent. The AppService getStocks() method is fetching data from REST API, which has more than 200 data points. Essentially, you have reconfigured the chart to work with a large data set.

Step 2 Run The Application

Navigate to the application and you will see that the Ignite UI data chart is rendering a large set of data very quickly and smoothly.

Now there are more than 200 data points rendered in the chart.

Step 2: Run the Application - Render more than 200 data points

You can zoom out to a particular data point and the Ignite UI data chart will render in the same way and help the application run faster.

Step 2: Run the Application - Zooming to particular data points

Conclusion

Ignite UI can be very useful in writing faster web applications. In addition to Angular, you can use Ignite UI in React, AngularJS, jQuery, and ASP.NET MVC. In this lesson, you learned how to use Ignite UI data charts with large sets of data in an Angular application. Various functionalities of Ignite UI data charts, such as zoom in and zoom out, work seamlessly with both small and large data sets.