Is it possible to have Plotly HTML charts appear within Colab without running the code beforehand?

📊 Plotly Python
1

I recently created a Python script that retrieves recent weather reports from the National Weather Service, then creates some simple Plotly visualizations of temperature and precipitation data. I configured a spare laptop to run this script on an hourly basis and then export the output to Google Drive, thus allowing relatively recent data to appear within this Colab notebook.

If I run and save this notebook on my local computer, then close and reopen it within JupyterLab Desktop or VS Code, the Plotly HTML-based charts will still appear (as long as Plotly is present within the active environment). In addition, if I run the notebook within Colab, the HTML charts will get produced there also.

However, I’m wondering whether it’s possible for the interactive Plotly charts to appear within Colab without running the Colab notebook beforehand. This notebook does display static PNG copies of each chart by default, but until I actually run the notebook online, I only see blank spaces where the HTML charts should be:

missing_html_chart_from_colab
missing_html_chart_from_colab2298×1204 17.5 KB

(This screenshot from JupyterLab shows what I’d expect to see instead. Note that this HTML chart appeared by default when I opened the notebook; there was no need to run the script after opening JupyterLab in order to view this chart.)

present_html_chart_within_jlab
present_html_chart_within_jlab1598×844 72.2 KB

In this case, it’s not much trouble to just go ahead and run the notebook; however, other notebooks may make use of local files and folders and thus couldn’t easily be run by others within Colab. Therefore, I’d love to find a method for showing interactive charts within Colab that doesn’t require actually running the notebook.

Thank you in advance for your help!

PS: I know that an alternative setup would be to just display these interactive charts within a Dash app, but I may sometimes prefer to use a Jupyter Notebook as my medium in order to more easily display both my code and its output.

2

@KBurchfiel I’ve never really worked with Collab. What happens if you store the plotly figure into html and include html files in your Collab instead of the PNG you are using currently?

3

@AIMPED That’s a good suggestion! I’m pretty sure that, when troubleshooting this problem earlier, I did try saving one of the files to HTML and then loading it back in via the following code;

from IPython.display import HTML; HTML('recent_weather_output/recent_temps.html')

However, this approach still resulted in a blank output cell.

A StackOverflow user pointed out that NBViewer better supports HTML output within notebooks; this NBViewer copy of the notebook demonstrates that. However, in order to get NBViewer to always display the latest copy of my notebook, I’d need to find a way to automatically export each new copy of my notebook to GitHub.

I’m guessing there’s a way to do that, but I’m concerned that this approach would make the resulting Git folder very large (since each new rendition of the charts would get added to the project’s Git history).