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

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

Execute the npm install command to install all dependencies, and execute the npm start command to run the Angular application. If the project is set up 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.

Currently, 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 functioning smoothly so you can zoom in and zoom out on the chart. Ignite UI for JavaScript charts are created to work with large and small data sets. Whether you are rending 10 data points or 1000 data points, Ignite UI for JavaScript 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 the REST API.

Step 1 Get Data in a Component

Currently, the chart's small data set 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();
}

You are currently fetching data from AppService in the PriceChartComponent. The AppService getStocks() method is fetching data from the 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 for JavaScript chart is rendering a large set of more than 200 data points very quickly and smoothly.

When you zoom out to a particular data point, the Ignite UI for JavaScript chart will render in the same way to help the application run faster.