How to build an application that displays stock information and financial data with Jquery - 1
Repository
https://github.com/jquery/jquery
What Will I Learn?
By the end of this tutorial the user will know how to build an application that displays stock information and real time financial data for different companies.
Requirements
In order to be able to follow this tutorial the user has to be able to use the following
- HTML/CSS/MaterializeCSS
- JavaScript/JQuery
- Financial Modeling Prep public api
- AxiosJS
Difficulty
- Intermediate
Tutorial Contents
In this post we are going to create an application that displays stock information and real time financial data for different companies.
We are going to add the following features
- Stock prices of different companies updated at regular intervals
- List of most actively traded companies daily
- List of most gaining companies daily
- List of most losing companies daily
On the front end I am going to use HTML/CSS and JQuery to develop the interface, I will also be using AxiosJS to handle the HTTP requests.
The first order of business is to create the index.html, style.css and data.js files.
Then, include the appropriate dependencies for starters, you can use the links in the next paragraph to import the dependencies.
You can import both axios and jquery through cdn at https://unpkg.com/[email protected]/dist/axios.min.js and https://code.jquery.com/jquery-3.4.1.js respectively or you can download them locally to your machine.
After including the dependency we'll have something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style.css">
<title>View real time financial data</title>
</head>
<body>
<script src="./jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./axios.js"></script>
<script src="./data.js"></script>
</body>
</html>
We are going to use Financial Modeling Prep public api to extract data that will poulate our application.
Financial Modeling Prep public api is a service that offers free access to realtime financial data.
Interface setup
Starting with the interface setup, we are going to use materialize css tabs to display each data category in the application.
To add materialize tabs in our application, paste the following code directly on the line after the opening body tag.
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">STOCK PRICES</a></li>
<li class="tab col s3"><a href="#test2">MOST ACTIVE STOCKS</a></li>
<li class="tab col s3"><a href="#test3">MOST GAINING STOCK</a></li>
<li class="tab col s3"><a href="#test4">MOST LOSING STOCK</a></li>
</ul>
</div>
<div id="test1" class="col s12">
</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
</div>
In data.js we have to initialize the tabs by adding the code below.
$(document).ready(function() {
// initialize materialize tabs
$('.tabs').tabs();
})
If you save the files and reload the project screen we'll have a interface identical to the one below
Stock prices
We are going to make an api call to financial modeling prep api for the feed of stock prices of different major companies, we will display the returned data on a table in one of the tabs.
In data.js add the following code directly after the line $('.tabs').tabs();
// send request for realtime price of companies
axios.get('https://financialmodelingprep.com/api/v3/company/stock/list').then(response => {
const responseArray = response.data.symbolsList
console.log(responseArray);
}).catch(err => {
console.log(err);
})
Save the file and reload the page, then proceed to the browser console and you should see the following response.
The request returns an array of objects with the following properties per object
- Company symbol in the stock market
- Company name
- Stock price
To display this data on the page, firstly in index.html add the following code inside the tag <div id="test1" class="col s12"></div>.
<div class="card">
<div class="card-content">
<span class="card-title">Stock Prices</span>
<p>
<table class="striped">
<thead>
<tr>
<td>Symbol</td>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
</table>
</p>
</div>
</div>
Save file and reload the page then we have this
in data.js after the line that says const responseArray = response.data.symbolsList replace console.log(responseArray) with the following code
let stockData = ``;
// sort response into table
responseArray.forEach(oneresponse => {
const symbol = oneresponse.symbol;
const name = oneresponse.name;
const price = oneresponse.price;
const tableRow = `<tr><td>${symbol}</td><td>${name}</td><td>${price}</td></tr>`;
stockData = stockData + tableRow;
});
console.log(stockData);
The code above takes the request response array and loops through it in order to assign each response object in the array to a table row.
Save and reload the page in the browser
To display the data finally on the page, replace the line `console.log(stockData); with the following code.
document.getElementById('stockPrice').innerHTML = stockData;
in index.html add the following code directly after the <thead></thead> tag.
<tbody id="stockPrice"></tbody>
Save and reload the page, you should see table containing the data
Most actively traded stock in the last 24 hours
In the second tab on the page we are going to display a list of most actively traded stocks within the last 24 hours.
In order to achieve this aim the first thing to do is send a request in data.js to return the list of the most actively trading stocks within the last 24 hours.
To send the request add the following code in data.js directly after the line that ends the request we added earlier.
// send request for most actively trading companies
axios.get('https://financialmodelingprep.com/api/v3/stock/actives').then(response => {
console.log(response.data.mostActiveStock)
}).catch(err => {
console.log(err);
});
Save and reload, then proceed to the browser console to view the response data
To view the data on the page, firstly in the index.html file, edit the tag <div id="test2" class="col s12">Test 2</div>, replace Test 2 with the following code
<div class="card active-stocks">
<div class="card-content">
<span class="card-title">Most Active Traded Stocks</span>
<p></p>
</div>
</div>
In data.js edit the request for most actively traded companies, replace the line console.log(response.data.mostActiveStock) with the following code
const responseArray = response.data.mostActiveStock;
let activityData = ``;
// sort response into table
responseArray.forEach(oneresponse => {
const companyName = oneresponse.companyName;
const price = oneresponse.price;
const changes = oneresponse.changes;
const changesPercentage = oneresponse.changesPercentage;
const tableRow = `<tr><td>${companyName}</td><td>${price}</td><td>${changes}</td><td>${changesPercentage}</td></tr>`;
activityData = activityData + tableRow;
})
console.log(activityData);
Above, we take the response array and loop through it in order to assign each array object to a HTML` table on the page.
Save and reload the page.
We can see from the image above that each data object has been converted into a table item, now it is time to display them on the page.
In index.html, inside the tag <div class="card active-stocks"></div> there is an empty <p></p> tag. Add the following code inside the <p></p>
<table>
<thead>
<tr>
<td>Company Name</td>
<td>Price</td>
<td>Changes</td>
<td>Changes Percentage</td>
</tr>
</thead>
<tbody id="activityList"></td>
</table>
In 'data.jsreplace the lineconsole.log(activityData);` with the following code
document.getElementById('activityList').innerHTML = activityData;
Save and reload the page to view the result
Most gaining stocks in the last 24 hours
In this section we'll be adding a list of companies/stock with the most gains in the last 24 hours.
Like the previous sections we will start by sending a first request in order to view our data in the browser console.
In data.js add the following code to send a new request.
// send request for most gaining companies in the last 24 hours
axios.get('https://financialmodelingprep.com/api/v3/stock/gainers').then(response => {
console.log(response.data.mostGainerStock)
}).catch(err => {
console.log(err);
})
Save and reload the page then view the browser console
In index.html, in the tag <div id="test3" class="col s12">Test 3</div>, insert the following code
<div class="card gaining-stocks">
<div class="card-content">
<span class="card-title">Most Gaining Stocks</span>
<p>
<table class="striped">
<thead>
<tr>
<td>Company Name</td>
<td>Price</td>
<td>Changes</td>
<td>Changes Percentage</td>
</tr>
</thead>
<tbody id="gaining-list"></tbody>
</table>
</p>
</div>
</div>
In data.js replace the line console.log(response.data.mostGainerStock), with the following code
const responseArray = response.data.mostGainerStock;
let gainersData = ``;
// sort response into table
responseArray.forEach(oneresponse => {
const companyName = oneresponse.companyName;
const price = oneresponse.price;
const changes = oneresponse.changes;
const changesPercentage = oneresponse.changesPercentage;
const tableRow = `<tr><td>${companyName}</td><td>${price}</td><td>${changes}</td><td>${changesPercentage}</td></tr>`;
gainersData = gainersData + tableRow;
})
console.log(gainersData);
Here, if we save and reload the page we we should get the following result
To display the data on the page, replace the line console.log(gainersData); with the following code
document.getElementById('gaining-list').innerHTML = gainersData;
Save the file and reload the page, you should get something similar to the image below
Most losing stocks in the last 24 hours
In this last section we will display a list of stocks that have lost the most value in the last 24 hours.
Here we are going to send a request to confirm the data in the console, just like the other sections.
In data.js, add the following code
// send request for most losing companies in the last 24 hours
axios.get('https://financialmodelingprep.com/api/v3/stock/losers').then(response => {
console.log(response.data.mostLoserStock);
}).catch(err => {
console.log(err);
});
Save the file and reload the page.
In index.html, look for the tag <div id="test4" class="col s12">Test 4</div> and replace Test 4 with the following code
<div class="card">
<div class="card-content">
<span class="card-title">Most Losing Stocks</span>
<p>
<table class="striped">
<thead>
<tr>
<td>Company Name</td>
<td>Price</td>
<td>Changes</td>
<td>Changes Percentage</td>
</tr>
</thead>
<tbody id="losing-list"></tbody>
</table>
</p>
</div>
</div>
In data.js, replace the line console.log(response.data.mostLoserStock); with the following code
const responseArray = response.data.mostLoserStock;
let losersData = ``;
// sort response into table
responseArray.forEach(oneresponse => {
const companyName = oneresponse.companyName;
const price = oneresponse.price;
const changes = oneresponse.changes;
const changesPercentage = oneresponse.changesPercentage;
const tableRow = `<tr><td>${companyName}</td><td>${price}</td><td>${changes}</td><td>${changesPercentage}</td></tr>`;
losersData = losersData + tableRow;
})
console.log(losersData);
Save both files and reload the page.
To display the data on the page, replace the line console.log(losersData); with the following code
document.getElementById('gaining-list').innerHTML = losersData;
Save the file reload the page
Thank you for your contribution @gotgame.
After analyzing your tutorial we suggest the following points below:
Very interesting tutorial on jquery. It is very well structured and explained. Good job!
Images with data in the browser console data is too small. We can't understand what's in the image.
It would be interesting if you use the api https://financialmodelingprep.com/api/v3/cryptocurrencies
Thank you for your work in developing this tutorial.
Looking forward to your upcoming tutorials.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @portugalcoin! Keep up the good work!
Hi @gotgame!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hey, @gotgame!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Hi, @gotgame!
You just got a 0.16% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.