From 8cdc5ab3aad49d9199d4ba05c0136ead138e5325 Mon Sep 17 00:00:00 2001 From: Rob L Date: Wed, 27 Dec 2023 14:31:20 -0500 Subject: [PATCH 1/3] adding a jinja2 example to the interactive HTML export Jinja2 is a standard, safe, and powerful way to insert content into HTML in Python. I add an example to the documentation --- doc/python/interactive-html-export.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index bd7284beb02..f1df1f7413d 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -55,6 +55,29 @@ fig.write_html("path/to/file.html") 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). +### 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. First create an HTML template file containing a variable like `{{ fig }}`. Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "fig": + +``` +import plotly.express as px +from jinja2 import Template + +data_canada = px.data.gapminder().query("country == 'Canada'") +fig = px.bar(data_canada, x='year', y='pop') + +output_html_path=r"/path/to/output.html" +input_template_path = r"/path/to/template.html" + +plotly_jinja_data = {"fig":fig.to_html(full_html=False)} +#consider also defining the include_plotlyjs parameter to point to an external Plotly.js as described above + +with open(output_html_path, "w", encoding="utf-8") as output_file: + with open(input_template_path) as template_file: + j2_template = Template(template_file.read()) + output_file.write(j2_template.render(plotly_jinja_data)) +``` + ### HTML export in Dash From 4d8baf4b929eb726b0328d278f5b4301d372bf2f Mon Sep 17 00:00:00 2001 From: Rob L Date: Sat, 6 Jan 2024 15:45:40 -0500 Subject: [PATCH 2/3] Update interactive-html-export.md based on Plotly comments --- doc/python/interactive-html-export.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index f1df1f7413d..46f60334a5a 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -57,7 +57,20 @@ 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. First create an HTML template file containing a variable like `{{ fig }}`. Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "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 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 that will provide e.g. the `` tag rather than asking Plotly to ouput a complete webpage. 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!

+{{ fig }} +

And here's some text after the graph.

+ + +``` + +Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "fig": ``` import plotly.express as px From bb55df092dd43330c031c43257b17859c5588563 Mon Sep 17 00:00:00 2001 From: Rob L Date: Mon, 8 Jan 2024 12:08:45 -0500 Subject: [PATCH 3/3] Update doc/python/interactive-html-export.md Co-authored-by: Liam Connors --- doc/python/interactive-html-export.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 46f60334a5a..683537c4720 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -57,7 +57,7 @@ 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 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 that will provide e.g. the `` tag rather than asking Plotly to ouput a complete webpage. 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`. ```