From 30d0deb197ce1511cf0fd42a6118bddcc55d4593 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 9 Jan 2024 13:34:53 -0500 Subject: [PATCH 1/3] Update interactive-html-export.md --- doc/python/interactive-html-export.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 683537c4720..843ab897767 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -6,9 +6,9 @@ jupyter: extension: .md format_name: markdown format_version: '1.3' - jupytext_version: 1.14.1 + jupytext_version: 1.14.6 kernelspec: - display_name: Python 3 + display_name: Python 3 (ipykernel) language: python name: python3 language_info: @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.8.8 + version: 3.10.11 plotly: description: Plotly allows you to save interactive HTML versions of your figures to your local disk. @@ -51,6 +51,7 @@ fig.write_html("path/to/file.html") ``` + ### Controlling the size of the HTML file By default, the resulting HTML file is a fully self-contained HTML file which can be uploaded to a web server or shared via email or other file-sharing mechanisms. The downside to this approach is that the file is very large (5Mb+) because it contains an inlined copy of the Plotly.js library required to make the figure interactive. This can be controlled via the `include_plotlyjs` argument (see below). @@ -72,7 +73,7 @@ You can insert Plotly output and text related to your data into HTML templates u Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "fig": -``` +```python import plotly.express as px from jinja2 import Template @@ -90,7 +91,7 @@ with open(output_html_path, "w", encoding="utf-8") as output_file: j2_template = Template(template_file.read()) output_file.write(j2_template.render(plotly_jinja_data)) ``` - + ### HTML export in Dash From 7a909cabf88c62f66eb8df5663d6e260fa6d07ef Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 9 Jan 2024 13:58:21 -0500 Subject: [PATCH 2/3] Update interactive-html-export.md --- doc/python/interactive-html-export.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 843ab897767..a6b1ecfcadb 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -51,7 +51,6 @@ fig.write_html("path/to/file.html") ``` - ### Controlling the size of the HTML file By default, the resulting HTML file is a fully self-contained HTML file which can be uploaded to a web server or shared via email or other file-sharing mechanisms. The downside to this approach is that the file is very large (5Mb+) because it contains an inlined copy of the Plotly.js library required to make the figure interactive. This can be controlled via the `include_plotlyjs` argument (see below). @@ -61,16 +60,18 @@ By default, the resulting HTML file is a fully self-contained HTML file which ca You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file. Use the `full_html=False` option to output just the code necessary to add a figure to a template. We don't want to output a full HTML page, as the template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags. First create an HTML template file containing a Jinja `{{ variable }}`. In this example, we customize the HTML in the template file by replacing the Jinja variable `{{ fig }}` with our graphic `fig`. ``` - - - -

Here's a Plotly graph!

+<!DOCTYPE html> +<html> +<body> +<h1>Here's a Plotly graph!</h1> {{ fig }} -

And here's some text after the graph.

- - +<p>And here's some text after the graph.</p> +</body> +</html> ``` + + Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "fig": ```python From cf7c5a856b2c005f0aa51b3d8ea84081102c7e48 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 9 Jan 2024 14:18:26 -0500 Subject: [PATCH 3/3] Update interactive-html-export.md --- doc/python/interactive-html-export.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index a6b1ecfcadb..013c87c286b 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -57,7 +57,9 @@ By default, the resulting HTML file is a fully self-contained HTML file which ca ### Inserting Plotly Output into HTML using a Jinja2 Template -You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file. Use the `full_html=False` option to output just the code necessary to add a figure to a template. We don't want to output a full HTML page, as the template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags. First create an HTML template file containing a Jinja `{{ variable }}`. In this example, we customize the HTML in the template file by replacing the Jinja variable `{{ fig }}` with our graphic `fig`. +You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file. Use the `full_html=False` option to output just the code necessary to add a figure to a template. We don't want to output a full HTML page, as the template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags. First create an HTML template file containing a Jinja `{{ variable }}`. In this example, we customize the HTML in the template file by replacing the Jinja variable `{{ fig }}` with our graphic `fig`. + + ``` <!DOCTYPE html> @@ -70,7 +72,6 @@ You can insert Plotly output and text related to your data into HTML templates u </html> ``` - Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "fig":