How to embed interactive plots?

dom_layfield November 20, 2019

I'm trying to figure out a way to embed an interactive plot (created with plotly/python) on a Confluence page.  

We use the Confluence cloud service, so need to host the plot on the Confluence server. 

What I'm currently trying is this: I save the plot as an html file.  Then I upload the plot.html file to Confluence as an attachment.   Then I create an iframe macro in the Confluence page, and paste the URL of the attachment into the iframe.

But when I publish the page and view it, the browser downloads the html code for the plot, instead of displaying it.   After some investigation, what seems to be happening is that when the Atlassian server responds to an http request for the attachment, it sets the "content-disposition" field to "attachment", which tells the browser to download the file, and not try to render it.

If the html file for the plot is hosted elsewhere (i.e. on servers that don't set content-disposition to 'attachment'), embedding the plot works just fine.  e.g. https://plot.ly/~elizabethts/9.embed

Can anyone suggest a workaround to this?  Is there a way, for example, to tell Confluence NOT to set the content-disposition?   

7 answers

7 votes
Alexis Brenon January 19, 2021

I managed to embed a Plotly chart in a page.

First, export the HTML code of your figure: `fig.write_html(buffer, include_plotlyjs=False)`

Then, in Confluence, add an "HTML" macro and copy the generated code.

Remove all the `<head>...</head>` block and add the `plotly.js` script: `<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>`.

 

So to sum-up, you should have an HTML macro containing:

  • a `script` element to get the `plotly.js` library
  • a `div` element with class `plotly-graph-div` (used by plotly for rendering
  • an inline `script` element representing your chart

Save your page, and "Voilà" !

Hope it can help.

Michael Koch December 31, 2021

Hi, 

 

this is the beginning of my html. Any tips for why it is not working?

 

<html>
<head><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<body>
<div>


<div id="7eb3aa7f-a37a-45eb-947a-9fd743f82fcb" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">

window.PLOTLYENV=window.PLOTLYENV || {};

if (document.getElementById("7eb3aa7f-a37a-45eb-947a-9fd743f82fcb")) {
Plotly.newPlot(
'7eb3aa7f-a37a-45eb-94.....

Like Prachi Agrawal likes this
Johannes Flohe
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
February 26, 2024

Hello Alexis,

can you provide an example script, how you include it? For me its not working, even following all your tips.

Thank you for your help.

Regards, Johannes

Benjamin Brayzier
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 8, 2024

I managed to get it working for me, delete the head block completely and include the script in the body, so the top of my html looks like:


<html>
<body>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <div> <div id="9cba7760-361d-48f3-8364-06e9fb2c06fd" class="plotly-graph-div" style="height:100%; width:100%;"></div> ...


Then combined with the suggestion below to put the html macro inside a panel macro I got my figure displaying properly on my Confluence page!

Hope this helps :-)

Like Johannes Flohe likes this
3 votes
Richie Phan September 26, 2023

I was able to post the html code by putting a panel macro, then putting the html macro in the panel macro, and then the code within that. For some reason that worked. 

hallsop_pers October 28, 2023

I don't know how you figured this out, but this solves the issue for me, thanks!

jehlmann February 14, 2024

Does this still work for you?  I cannot find a panel macro, and it a quick google seems like Atlassian removed this feature.  

2 votes
Alessandro Festante August 20, 2020

I know the question is a bit old, but has anyone figured out a solution? 

1 vote
dom_layfield June 19, 2020

@Carl Shan 

Nope.  No luck with this.  Which is pretty disappointing, since our organization is using HTML plot for almost everything.  (Once you've got used to interactive plots, it is hard to go back to static!)

The only viable solution right now is to host charts on a web server outside of Atlassian.  But as far as I can see, there's no method for Confluence to authenticate, so the plots would need to be public.   For us (and for your team, it sounds like) that's not an option.

What I find incredibly frustrating about this is that from a security perspective at least, it seems far more dangerous for Confluence to allow external HTML to execute than to allow HTML from page attachments.   I really can't understand why Atlassian would allow the former, but disable the latter.

I also tried using the Atlassian REST API to see if I could change the 'content-disposition' flag via that mechanism.  But no luck there: it's not visible through the API.

For us, this is a HUGE problem.   Since all our plots are HTML, Confluence is almost useless without some ability to render them.   We are considering migrating to a different platform that will support this.

-- Dom

1 vote
Carl Shan June 18, 2020

Hey @dom_layfield , did you ever get an answer to this question?

I am trying to also embed a Plotly chart into my internal wiki and I've tried the following:

  • Generate an HTML and embed it as an HTML (didn't work)
  • Generate a embed link to the Plot.ly chart using Chart Studio, but this is by default public and I cannot share the chart publicly.

Curious if you figured out a solution.

Prachi Agrawal August 29, 2022

Hey @Carl Shan how to generate an embed link to the plotly chart if I have generated chart on Jupyter notebook?

0 votes
Александр Нуждин February 10, 2022

for those who are still looking for an answer.
all you need to do:
1. move the html file to your document
2. add ntml macro via Confluence panel
3. in the window that opens, find the cell "Location of HTML data"
4. enter: ^your_file_name.html
5. you are great!

Александр Нуждин February 12, 2022

file name must not contain spaces and special characters. only text, numbers and underscores

0 votes
Sinan Teske February 8, 2021

A solution maybe could be HTML files hosted on an AWS S3 bucket and then implemented into the confluence page via iframe?

Ali El Ali April 22, 2021

Just wondering if you've had a chance to implement your idea?

Sinan Teske April 26, 2021

Yes we implemented as suggested and protect it with authentication. This way we have the possibility to implement html files as Iframes in which we have for example plotly plots exported.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events