Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Stock Information App</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/styles.css') }}"> | |
| </head> | |
| <body> | |
| <h1>Stock Information App</h1> | |
| <form onsubmit="getInformation(); return false;"> | |
| <label for="ticker">Enter Ticker:</label> | |
| <input type="text" id="ticker" required> | |
| <button type="submit">Get Information</button> | |
| </form> | |
| <div id = "log"> | |
| <!-- Here the log will be displayed --> | |
| </div> | |
| <div id = "newsData"> | |
| <!-- News data will be displayed here --> | |
| </div> | |
| <div> | |
| <h2 id = "graph_title"></h2> | |
| <div id = "stock_graph"> | |
| <!-- The candlestick graph will be displayed here --> | |
| </div> | |
| </div> | |
| <script> | |
| var socket = io.connect('http://' + document.domain + ':' + location.port); | |
| function getInformation() { | |
| var ticker = document.getElementById('ticker').value; | |
| socket.emit('get_graph',ticker); | |
| socket.emit('get_news_data', ticker); | |
| } | |
| socket.on('log', function(data) { | |
| var graphDiv = document.getElementById('log'); | |
| graphDiv.innerHTML = "Log: " + data; | |
| console.log(data) | |
| }); | |
| socket.on('graph', function(graphData) { | |
| document.getElementById("graph_title").innerHTML = ''; | |
| var graphDiv = document.getElementById('stock_graph'); | |
| graphDiv.innerHTML = ''; | |
| console.log(graphData); | |
| if (graphData != '') | |
| { | |
| Plotly.newPlot(graphDiv, graphData.data, graphData.layout); | |
| document.getElementById("graph_title").innerHTML = "Stock Opening and Closing Data"; | |
| } | |
| else | |
| { | |
| document.getElementById("graph_title").innerHTML = "Stock Opening and Closing Data"; | |
| graphDiv.innerHTML = '<center><p>Not a valid Ticker.</p></center>'; | |
| } | |
| }); | |
| socket.on('news_data', function(data) { | |
| // Handle the received news data and update the DOM | |
| var newsDataDiv = document.getElementById('newsData'); | |
| newsDataDiv.innerHTML = ''; // Clear previous data | |
| if (data.length > 0) { | |
| var table = document.createElement('table'); | |
| table.id = 'newsTable'; | |
| table.innerHTML = ` | |
| <thead> | |
| <tr> | |
| <th>Title</th> | |
| <th>Sentiment</th> | |
| <th>Summary</th> | |
| <th>Full Article</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| </tbody> | |
| `; | |
| var tbody = table.querySelector('tbody'); | |
| data.forEach(function(article) { | |
| var row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td>${article.title}</td> | |
| <td>${article.sentiment} (Score: ${article.sentiment_score})</td> | |
| <td>${article.summary}</td> | |
| <td><a href="${article.link}" target="_blank">Read full article</a></td> | |
| `; | |
| tbody.appendChild(row); | |
| }); | |
| newsDataDiv.appendChild(table); | |
| } else { | |
| newsDataDiv.innerHTML = '<p>No news data available. or still searching for News</p>'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |