|
We’ll walk through the process of building a Stock Market Historical Data Visualization App. In this article, we’ll explore how to develop a simple app using React and the Alpha Vantage API. This app will allow users to view historical stock data for a selected company i.e: Amazon and visualize it in a line chart.
Preview of final output: Let us have a look at how the final output will look like.
Prerequisites:Approach:- Setting Up the React Application: Create a new React application using Create React App or your preferred method.
- Integrating the Alpha Vantage API: Obtain an API key from the Alpha Vantage website and use Axios to make HTTP requests to fetch stock market data.
- Displaying Real-time Stock Data: Build components to display real-time stock prices and trading volumes for selected companies.
- Visualizing Historical Stock Data: Develop components to visualize historical stock prices using line charts or candlestick charts.
Steps to Create the Project:Step 1: Set up a new React.js project using creat-react-app.
npx create-react-app <<project-name>>
cd <<project-name>> Step 2: Create an account on Alpha Vantage.
Step 3: Then you will be directed to API Documentation page, Choose the API URL from there and copy it
Step 4: You can create the API Key using the link given in the documentation, Get your API Key, and Copy the API Key.
Step 5: Install the Axios for making requests to APIs.
npm install axios Step 6: Install plolty.js for Visualizing the data.
npm install react-plotly.js plotly.js Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.7",
"plotly.js": "^2.29.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-plotly.js": "^2.6.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Example: Modify the following code to create the Stock Market Historical Data Visualization App:
JavaScript
// App.js
import React from 'react';
import Header from './Components/Header';
import StockChart from './Components/StockChart';
function App() {
return (
<div>
<Header />
<StockChart />
</div>
);
}
export default App;
// Header.js
import React from 'react';
function Header() {
return (
<center>
<h1>Stock Market Prediction App</h1>
</center>
);
}
export default Header;
// StockChart.js
import React,
{
useState,
useEffect
} from 'react';
import Plot
from 'react-plotly.js';
import axios from 'axios';
function StockChart() {
const [stockData, setStockData] = useState({});
useEffect(() => {
const fetchStockData = async () => {
try {
const API_KEY = '72J5266S0H2QL30G';
let StockSymbol = 'AMZN';
const response = await axios.get(
`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${StockSymbol}&apikey=${API_KEY}`
);
setStockData(
response.data['Time Series (Daily)']
);
} catch (error) {
console.error('Error fetching stock data:', error);
}
};
fetchStockData();
}, []);
// Check if stockData exists before accessing its keys
const dates =
stockData ? Object.keys(stockData) : [];
const closingPrices =
dates.map(
date =>
parseFloat(
stockData[date]['4. close'] || 0
)
);
return (
<center>
<h2>Stock Chart</h2>
<Plot
data={[
{
x: dates,
y: closingPrices,
type: 'scatter',
mode: 'lines+markers',
marker: { color: 'blue' },
}
]}
layout={
{
width: 800,
height: 500,
title: 'Stock Market Prices'
}
}
/>
</center>
);
}
export default StockChart;
Steps to start the App:
npm start Output:
|
Infrastructure As Code Using Pulumi
How To Connect To Kafka Running In Docker ?
A Day in the Life of Product Manager
HEART Framework in Product Management | Google HEART Framework