Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Indian Stock Market Technical Analyzer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/luxon@2.0.2"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .indicator-active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .stock-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .chart-container { | |
| height: 500px; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .loading { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-blue-800">Indian Stock Analyzer</h1> | |
| <p class="text-gray-600">Advanced technical analysis for NSE & BSE stocks</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search stocks..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-user-circle mr-2"></i> | |
| Login | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Market Overview --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-blue-600"></i> | |
| Market Overview | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Nifty 50</span> | |
| <span class="font-medium">19,425.35 <span class="text-green-500 text-sm">+0.87%</span></span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Sensex</span> | |
| <span class="font-medium">64,718.56 <span class="text-green-500 text-sm">+0.92%</span></span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Nifty Bank</span> | |
| <span class="font-medium">43,876.21 <span class="text-red-500 text-sm">-0.34%</span></span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Nifty IT</span> | |
| <span class="font-medium">33,456.78 <span class="text-green-500 text-sm">+2.15%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Advancers</span> | |
| <span class="font-medium text-green-600">1,245</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Decliners</span> | |
| <span class="font-medium text-red-600">756</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Watchlist --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> | |
| My Watchlist | |
| </h2> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer"> | |
| <div> | |
| <span class="font-medium">RELIANCE</span> | |
| <span class="block text-xs text-gray-500">NSE</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-medium">2,456.75</span> | |
| <span class="block text-xs text-green-500">+1.25%</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer"> | |
| <div> | |
| <span class="font-medium">TCS</span> | |
| <span class="block text-xs text-gray-500">NSE</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-medium">3,567.20</span> | |
| <span class="block text-xs text-red-500">-0.75%</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer"> | |
| <div> | |
| <span class="font-medium">HDFCBANK</span> | |
| <span class="block text-xs text-gray-500">NSE</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-medium">1,678.90</span> | |
| <span class="block text-xs text-green-500">+0.45%</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded cursor-pointer"> | |
| <div> | |
| <span class="font-medium">INFY</span> | |
| <span class="block text-xs text-gray-500">NSE</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-medium">1,456.30</span> | |
| <span class="block text-xs text-green-500">+1.85%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technical Indicators --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-wave-square mr-2 text-blue-600"></i> | |
| Technical Indicators | |
| </h2> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button id="rsi-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50"> | |
| RSI (14) | |
| </button> | |
| <button id="macd-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50"> | |
| MACD | |
| </button> | |
| <button id="sma-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50"> | |
| SMA (50) | |
| </button> | |
| <button id="ema-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50"> | |
| EMA (20) | |
| </button> | |
| <button id="bollinger-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50"> | |
| Bollinger | |
| </button> | |
| <button id="stochastic-btn" class="indicator-btn py-2 px-3 rounded border border-gray-300 text-sm hover:bg-gray-50"> | |
| Stochastic | |
| </button> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-200"> | |
| <h3 class="text-sm font-medium mb-2 text-gray-700">Indicator Settings</h3> | |
| <div id="indicator-settings" class="space-y-3"> | |
| <!-- Dynamic settings will appear here --> | |
| <p class="text-gray-500 text-sm">Select an indicator to configure</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chart Area --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Stock Selector and Timeframe --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex flex-wrap justify-between items-center gap-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-800">RELIANCE</h2> | |
| <p class="text-gray-600 text-sm">NSE: RELIANCE | BSE: 500325</p> | |
| </div> | |
| <span class="text-2xl font-bold">₹2,456.75</span> | |
| <span class="text-green-500 font-medium">+1.25% (+₹30.50)</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="timeframe-btn bg-blue-600 text-white px-3 py-1 rounded" data-value="1d">1D</button> | |
| <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="1w">1W</button> | |
| <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="1m">1M</button> | |
| <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="3m">3M</button> | |
| <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="6m">6M</button> | |
| <button class="timeframe-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-value="1y">1Y</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chart Container --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button class="chart-type-btn bg-blue-600 text-white px-3 py-1 rounded" data-type="candlestick">Candlestick</button> | |
| <button class="chart-type-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-type="line">Line</button> | |
| <button class="chart-type-btn bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50" data-type="ohlc">OHLC</button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-ruler"></i> | |
| <span class="tooltiptext">Drawing Tools</span> | |
| </button> | |
| <button class="bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-compress"></i> | |
| <span class="tooltiptext">Zoom Out</span> | |
| </button> | |
| <button class="bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-cog"></i> | |
| <span class="tooltiptext">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container relative"> | |
| <canvas id="stockChart"></canvas> | |
| <div id="chart-loading" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center hidden"> | |
| <div class="text-center"> | |
| <i class="fas fa-spinner fa-spin text-blue-600 text-4xl mb-2"></i> | |
| <p class="text-gray-700">Loading chart data...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technical Analysis Summary --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-chart-pie mr-2 text-blue-600"></i> | |
| Technical Analysis Summary | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-blue-800 mb-2">Momentum Indicators</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">RSI (14):</span> | |
| <span class="font-medium">62.45 <span class="text-green-500">(Neutral)</span></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Stochastic %K:</span> | |
| <span class="font-medium">78.32 <span class="text-yellow-500">(Overbought)</span></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">MACD:</span> | |
| <span class="font-medium">12.45 <span class="text-green-500">(Bullish)</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-green-800 mb-2">Trend Indicators</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">EMA (20):</span> | |
| <span class="font-medium">2,412.30 <span class="text-green-500">(Price above)</span></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">SMA (50):</span> | |
| <span class="font-medium">2,378.65 <span class="text-green-500">(Price above)</span></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">ADX (14):</span> | |
| <span class="font-medium">28.76 <span class="text-green-500">(Strong Trend)</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-purple-800 mb-2">Volatility Indicators</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Bollinger Bands:</span> | |
| <span class="font-medium">Near Upper Band <span class="text-yellow-500">(High Volatility)</span></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">ATR (14):</span> | |
| <span class="font-medium">45.67 <span class="text-green-500">(High Volatility)</span></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Average Volume:</span> | |
| <span class="font-medium">4.5M <span class="text-green-500">(Above Avg)</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <h3 class="font-medium text-gray-800 mb-2">Recommendation</h3> | |
| <div class="bg-yellow-50 p-4 rounded-lg flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-yellow-800">Caution Advised</h4> | |
| <p class="text-gray-700">The stock is showing overbought conditions on short-term indicators (RSI > 70, Stochastic > 80) while maintaining a strong uptrend. Consider waiting for a pullback to key support levels (2,400-2,420) before entering new positions. Existing holders can maintain stop-loss at 2,380.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stock Recommendations --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> | |
| Today's Top Picks | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Strong Buy</button> | |
| <button class="bg-green-600 text-white px-3 py-1 rounded text-sm">Buy</button> | |
| <button class="bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm">Neutral</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Stock Card 1 --> | |
| <div class="stock-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:border-blue-300"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-bold text-lg">TATASTEEL</h3> | |
| <p class="text-gray-600 text-sm">NSE: TATASTEEL</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Strong Buy</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-2xl font-bold">₹128.75</span> | |
| <span class="text-green-500 font-medium">+3.45%</span> | |
| </div> | |
| <div class="text-sm space-y-1"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">RSI:</span> | |
| <span class="font-medium">42.1 (Oversold)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Support:</span> | |
| <span class="font-medium">₹124.50</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Target:</span> | |
| <span class="font-medium text-green-600">₹138.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stock Card 2 --> | |
| <div class="stock-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:border-blue-300"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-bold text-lg">ITC</h3> | |
| <p class="text-gray-600 text-sm">NSE: ITC</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Buy</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-2xl font-bold">₹456.30</span> | |
| <span class="text-green-500 font-medium">+1.85%</span> | |
| </div> | |
| <div class="text-sm space-y-1"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">RSI:</span> | |
| <span class="font-medium">58.3 (Neutral)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Support:</span> | |
| <span class="font-medium">₹445.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Target:</span> | |
| <span class="font-medium text-green-600">₹475.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stock Card 3 --> | |
| <div class="stock-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:border-blue-300"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-bold text-lg">BHARTIARTL</h3> | |
| <p class="text-gray-600 text-sm">NSE: BHARTIARTL</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Strong Buy</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-2xl font-bold">₹876.45</span> | |
| <span class="text-green-500 font-medium">+2.75%</span> | |
| </div> | |
| <div class="text-sm space-y-1"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">RSI:</span> | |
| <span class="font-medium">65.2 (Neutral)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Support:</span> | |
| <span class="font-medium">₹855.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Target:</span> | |
| <span class="font-medium text-green-600">₹925.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 pt-8 border-t border-gray-200"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-lg font-semibold text-gray-800">Indian Stock Analyzer</h3> | |
| <p class="text-gray-600">Advanced technical analysis tools for Indian markets</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Terms</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Privacy</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Disclaimer</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>Data provided by NSE and BSE. Delayed by 15 minutes. © 2023 Indian Stock Analyzer. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Sample stock data (in a real app, this would come from an API) | |
| const stockData = { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], | |
| datasets: [{ | |
| label: 'RELIANCE', | |
| data: [ | |
| {x: 'Jan', o: 2100, h: 2150, l: 2080, c: 2140}, | |
| {x: 'Feb', o: 2140, h: 2200, l: 2120, c: 2180}, | |
| {x: 'Mar', o: 2180, h: 2250, l: 2160, c: 2220}, | |
| {x: 'Apr', o: 2220, h: 2280, l: 2200, c: 2260}, | |
| {x: 'May', o: 2260, h: 2350, l: 2240, c: 2320}, | |
| {x: 'Jun', o: 2320, h: 2400, l: 2300, c: 2380}, | |
| {x: 'Jul', o: 2380, h: 2450, l: 2360, c: 2420}, | |
| {x: 'Aug', o: 2420, h: 2500, l: 2400, c: 2480}, | |
| {x: 'Sep', o: 2480, h: 2550, l: 2460, c: 2520}, | |
| {x: 'Oct', o: 2520, h: 2600, l: 2500, c: 2580} | |
| ], | |
| color: { | |
| up: '#10b981', | |
| down: '#ef4444', | |
| unchanged: '#9ca3af', | |
| } | |
| }] | |
| }; | |
| // Technical indicators data | |
| const indicators = { | |
| rsi: [45, 50, 55, 60, 65, 70, 65, 60, 55, 50], | |
| macd: { | |
| macd: [12, 14, 16, 18, 20, 18, 16, 14, 12, 10], | |
| signal: [10, 12, 14, 16, 18, 16, 14, 12, 10, 8], | |
| histogram: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2] | |
| }, | |
| sma: [2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500], | |
| ema: [2080, 2130, 2180, 2230, 2280, 2330, 2380, 2430, 2480, 2530], | |
| bollinger: { | |
| upper: [2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650], | |
| lower: [2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450] | |
| }, | |
| stochastic: { | |
| k: [30, 40, 50, 60, 70, 80, 70, 60, 50, 40], | |
| d: [25, 35, 45, 55, 65, 75, 65, 55, 45, 35] | |
| } | |
| }; | |
| // Initialize chart | |
| const ctx = document.getElementById('stockChart').getContext('2d'); | |
| let stockChart = new Chart(ctx, { | |
| type: 'candlestick', | |
| data: { | |
| labels: stockData.labels, | |
| datasets: [{ | |
| label: 'RELIANCE', | |
| data: stockData.datasets[0].data, | |
| color: stockData.datasets[0].color | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: '#e5e7eb' | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| zoom: { | |
| zoom: { | |
| wheel: { | |
| enabled: true, | |
| }, | |
| pinch: { | |
| enabled: true | |
| }, | |
| mode: 'xy', | |
| }, | |
| pan: { | |
| enabled: true, | |
| mode: 'xy', | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Timeframe buttons | |
| document.querySelectorAll('.timeframe-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Show loading | |
| document.getElementById('chart-loading').classList.remove('hidden'); | |
| // Update active button | |
| document.querySelectorAll('.timeframe-btn').forEach(b => { | |
| b.classList.remove('bg-blue-600', 'text-white'); | |
| b.classList.add('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); | |
| }); | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| this.classList.remove('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Update chart with new data based on timeframe | |
| const timeframe = this.dataset.value; | |
| let newData = []; | |
| // In a real app, this would be an API call to get data for the selected timeframe | |
| if (timeframe === '1d') { | |
| // Generate intraday data | |
| newData = generateIntradayData(); | |
| } else { | |
| // For other timeframes, we'll just modify our sample data | |
| newData = [...stockData.datasets[0].data]; | |
| if (timeframe === '1w') { | |
| newData = newData.slice(-5); // Last 5 data points | |
| } else if (timeframe === '1m') { | |
| newData = newData.slice(-10); // All data points | |
| } else if (timeframe === '3m') { | |
| // Generate more data points for 3 months | |
| newData = generateThreeMonthsData(); | |
| } else if (timeframe === '6m') { | |
| // Generate more data points for 6 months | |
| newData = generateSixMonthsData(); | |
| } else if (timeframe === '1y') { | |
| // Generate more data points for 1 year | |
| newData = generateOneYearData(); | |
| } | |
| } | |
| // Update chart | |
| stockChart.data.datasets[0].data = newData; | |
| stockChart.update(); | |
| // Hide loading | |
| document.getElementById('chart-loading').classList.add('hidden'); | |
| }, 800); | |
| }); | |
| }); | |
| // Chart type buttons | |
| document.querySelectorAll('.chart-type-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Update active button | |
| document.querySelectorAll('.chart-type-btn').forEach(b => { | |
| b.classList.remove('bg-blue-600', 'text-white'); | |
| b.classList.add('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); | |
| }); | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| this.classList.remove('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); | |
| // Change chart type | |
| stockChart.config.type = this.dataset.type; | |
| stockChart.update(); | |
| }); | |
| }); | |
| // Indicator buttons | |
| document.querySelectorAll('.indicator-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Toggle active state | |
| this.classList.toggle('indicator-active'); | |
| const indicatorId = this.id.replace('-btn', ''); | |
| const indicatorSettings = document.getElementById('indicator-settings'); | |
| if (this.classList.contains('indicator-active')) { | |
| // Add indicator to chart | |
| addIndicatorToChart(indicatorId); | |
| // Show settings for this indicator | |
| indicatorSettings.innerHTML = ` | |
| <h4 class="font-medium text-gray-800">${indicatorId.toUpperCase()} Settings</h4> | |
| <div class="mt-2"> | |
| <label class="block text-sm text-gray-600 mb-1">Period</label> | |
| <input type="number" value="14" class="w-full px-3 py-2 border border-gray-300 rounded"> | |
| </div> | |
| <div class="mt-2"> | |
| <label class="block text-sm text-gray-600 mb-1">Color</label> | |
| <input type="color" value="#3b82f6" class="w-full h-10"> | |
| </div> | |
| <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded text-sm">Apply</button> | |
| `; | |
| } else { | |
| // Remove indicator from chart | |
| removeIndicatorFromChart(indicatorId); | |
| // Reset settings panel | |
| indicatorSettings.innerHTML = '<p class="text-gray-500 text-sm">Select an indicator to configure</p>'; | |
| } | |
| }); | |
| }); | |
| // Functions to add/remove indicators | |
| function addIndicatorToChart(indicatorId) { | |
| // In a real app, this would add the indicator to the chart | |
| console.log(`Adding ${indicatorId} indicator to chart`); | |
| // For demo purposes, we'll just log it | |
| if (indicatorId === 'rsi') { | |
| // Add RSI to a separate chart (in a real app, this would be a sub-chart) | |
| console.log('RSI values:', indicators.rsi); | |
| } else if (indicatorId === 'macd') { | |
| console.log('MACD values:', indicators.macd); | |
| } | |
| } | |
| function removeIndicatorFromChart(indicatorId) { | |
| // In a real app, this would remove the indicator from the chart | |
| console.log(`Removing ${indicatorId} indicator from chart`); | |
| } | |
| // Data generation functions for different timeframes | |
| function generateIntradayData() { | |
| // Generate sample intraday data (1 minute intervals for 1 day) | |
| const data = []; | |
| const basePrice = 2450; | |
| for (let i = 0; i < 390; i++) { // 390 minutes = 6.5 hours (NSE trading hours) | |
| const time = new Date(); | |
| time.setHours(9, 15 + i, 0, 0); // Market opens at 9:15 | |
| const minute = i % 60; | |
| const hour = Math.floor(i / 60) + 9; | |
| // Simulate price movement with some randomness | |
| const open = i === 0 ? basePrice : data[i-1].c; | |
| const change = (Math.random() - 0.5) * 10; | |
| const close = open + change; | |
| const high = Math.max(open, close) + Math.random() * 5; | |
| const low = Math.min(open, close) - Math.random() * 5; | |
| data.push({ | |
| x: `${hour}:${minute < 10 ? '0' + minute : minute}`, | |
| o: open, | |
| h: high, | |
| l: low, | |
| c: close | |
| }); | |
| } | |
| return data; | |
| } | |
| function generateThreeMonthsData() { | |
| // Generate more detailed data for 3 months | |
| const data = []; | |
| const basePrice = 2100; | |
| for (let i = 0; i < 60; i++) { // 60 days ~ 3 months | |
| const open = i === 0 ? basePrice : data[i-1].c; | |
| const change = (Math.random() - 0.4) * 30; // Slight upward bias | |
| const close = open + change; | |
| const high = Math.max(open, close) + Math.random() * 20; | |
| const low = Math.min(open, close) - Math.random() * 20; | |
| const date = new Date(); | |
| date.setDate(date.getDate() - (60 - i)); | |
| data.push({ | |
| x: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), | |
| o: open, | |
| h: high, | |
| l: low, | |
| c: close | |
| }); | |
| } | |
| return data; | |
| } | |
| function generateSixMonthsData() { | |
| // Generate more detailed data for 6 months | |
| const data = []; | |
| const basePrice = 2000; | |
| for (let i = 0; i < 120; i++) { // 120 days ~ 6 months | |
| const open = i === 0 ? basePrice : data[i-1].c; | |
| const change = (Math.random() - 0.3) * 25; // Slight upward bias | |
| const close = open + change; | |
| const high = Math.max(open, close) + Math.random() * 15; | |
| const low = Math.min(open, close) - Math.random() * 15; | |
| const date = new Date(); | |
| date.setDate(date.getDate() - (120 - i)); | |
| data.push({ | |
| x: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), | |
| o: open, | |
| h: high, | |
| l: low, | |
| c: close | |
| }); | |
| } | |
| return data; | |
| } | |
| function generateOneYearData() { | |
| // Generate more detailed data for 1 year | |
| const data = []; | |
| const basePrice = 1800; | |
| for (let i = 0; i < 240; i++) { // 240 days ~ 1 year | |
| const open = i === 0 ? basePrice : data[i-1].c; | |
| const change = (Math.random() - 0.2) * 20; // Slight upward bias | |
| const close = open + change; | |
| const high = Math.max(open, close) + Math.random() * 10; | |
| const low = Math.min(open, close) - Math.random() * 10; | |
| const date = new Date(); | |
| date.setDate(date.getDate() - (240 - i)); | |
| data.push({ | |
| x: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), | |
| o: open, | |
| h: high, | |
| l: low, | |
| c: close | |
| }); | |
| } | |
| return data; | |
| } | |
| // Initialize with 1 month data | |
| document.querySelector('.timeframe-btn[data-value="1m"]').click(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vikash-univest/testing2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |