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));