At the end of this lesson, you will have a 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.
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:
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.
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.
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