I am working on a stock screener project using Django, Pandas and Plotly. One of the pages is the user’s watchlist where certain stats get displayed for each stock (one HTML table row per stock). This HTML table gets generated in the “watchlist” view by converting a Pandas DataFrame into html using the “to_html” method (with escape=False).
Each row of the HTML table has a “View graph” button which opens an interactive Plotly graph for the relevant stock. The graph is generated based on the results of the calculations made in the “watchlist” view, and is represented by an html string that gets sent to the “watchlist” template as part of the context.
At the moment I am loading all the stock graphs below the HTML table each time the “watchlist” page gets loaded, but initially the graphs remain hidden with css. Each graph has an id in the dataset that allows me to “unhide” it with JavaScript when someone clicks the matching button with the same id in the table.
However, loading all the graphs at once when the “watchlist” page is being loaded takes a lot of time, and I am trying to think of for a solution that would make the process faster and that would be optimal architecturally. The number of stocks (and matching graphs) in a user’s watchlist can be up to 50-100.
My understanding is that potential options are:
-
create a “graph” template and view, and then use each “View graph” button to direct the user to the “graph” template that would display the relevant graph. However, I am not sure whether it is possible to pass a graph represented as an html string to the “graph” view.
-
create a separate HTML file for each graph at the point when calculations are being made in the “watchlist” view, then link each “View graph” button to the relevant HTML file. However, I am not sure where these HTML files need to go (especially after deployment) and how I could clean them up on a regular basis (as each graph would only be needed once).
-
load each graph on the “watchlist” page asynchronously when the matching “View graph” button gets clicked (as opposed to loading all the graphs at once when the page loads initially). I am using Vanilla JavaScript for the project’s front end, and was wondering if this can be implemented without introducing React, JQuery etc.
I apologise if there is an obvious solution here, but I have not worked with Django for too long, and would appreciate advice on how to handle this before I go down the rabbit hole of learning new tools that may or may not be optimal for this particular case.
Thank you so much!