Taiyo Kogyo Stock Price Tracker
Current Stock Price:
Stock Price Chart
body {
font-family: Arial, sans-serif;
text-align: center;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
#stock-price {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}
#chart {
margin-top: 20px;
}
#chart-canvas {
width: 500px;
height: 300px;
}
// Set up the API endpoint for the stock price data
const apiUrl = 'https://api.example.com/stock-price';
// Get the current stock price
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const currentPrice = data.current_price;
document.getElementById('current-price').innerText = `¥${currentPrice}`;
})
.catch(error => console.error(error));
// Set up the chart data
const chartData = [];
fetch(apiUrl + '/chart')
.then(response => response.json())
.then(data => {
chartData.push(...data.chart_data);
const chartCanvas = document.getElementById('chart-canvas');
const ctx = chartCanvas.getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: chartData.map(data => data.date),
datasets: [{
label: 'Stock Price',
data: chartData.map(data => data.price),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: 'Taiyo Kogyo Stock Price Chart'
}
}
});
})
.catch(error => console.error(error));