Full Stack Development Tutorial: Visualize Trading Data on Angular SPA | by J Li | Towards Data Science

(this post is also available in my blog)
Next post of this series: Full Stack Development Tutorial: Serving Trading Data with Serverless REST API running on AWS Lambda
Ever wondering how to visualize your data in a web app for your users as a data scientist? I will demonstrate a tutorial series of full stack development to create a simple web app — stock graph with Angular for UI, AWS serverless Lambda for backend, AWS API gateway for API management and CloudFormation for continous deployment.
This post demonstrate how to visualize stock data in Angular Single Page Application (SPA). At the end of this tutorial, you create Angular app with a component to show stock data on client side. There will be no server interaction in this tutorial. All data is stored on client side. Source code is available for download here.
Run the following command and answer questions accordingly to create a new Angular application. Then install the ng-bootstrap for styling and swimlane/ngx-charts for displaying charts.
Include NgxChartsModule and BrowserAnimationsModule in app.module.ts. Ngx-charts uses BrowserAnimationsModule in the App Module so that it ready for use.
Add “node_modules/bootstrap/dist/css/bootstrap.min.css” in styles array in angular.json.
By now, open terminal and run ng serve , you should be anble to see the follow sample app in http://localhost:4200/
run the follow command in terminal to create a new component
ng generate component chart
Upon the completion of the command, a new directory “chart” is created. It contains a spec file (for unit test), a TypeScript file (.ts file) which contains a logic for rendering UI and a template file (.html file) which contains the markup of the UI. In the template chart.component.html, replace the code with the following to properly configure a chart. The properties like color scheme, data set for the result, x-axis or y-axis labels are attributes of the ngx-charts-line-chart. We set them with corresponding variables which will be declared and assigned in the chart.component.ts.
Before we jump to the businiess logic in the chart.component.ts, let’s create an interface which stores the historical stock data. Create a model.ts in src/app directory with the below content.
Let’s now generate a service to provide the historical data. For this tutorial, the data will be staically stored on the typescript file. In real world, it should fetch from a remote server. I will have another tutorial to cover this topic. Run ng generate service stock-data in the terminal.
Once we have the service to serve the data, we need to update the chart.component.ts to update the variables which bind to the UI. Following is the updated ChartComponent in typescript.
Next, we need to update the app.component.html to make sure the application show the chart component we just created.
By now, you should be able to see the newly created chart in http://localhost:4200/
Next tutorial, I will show how to build backend API that serves the data with AWS Lambda serverless service in python. Stay Tune!
Recommnded reads:
Learn the A to Z of Amazon Web Services (AWS)
AWS Lambda in Action: Event-driven serverless applications 1st Edition
Amazon Web Services in Action 2nd Edition
My posts:
My posts about Finance and Tech
My posts about FAANG interview
From CRUD web app dev to SDE in voice assistant — My ongoing Journey to Machine Learning
Full Stack Development Tutorial: Integrate AWS Lambda Serverless Service into Angular SPA
Full Stack Development Tutorial: Serving Trading Data with Serverless REST API running on AWS Lambda
Reinforcement Learning: Introduction to Q Learning
Full Stack Development Tutorial: Visualize Trading Data on Angular SPA (1)