Plotly in a Qualtrics survey

plotly.js
1

I have a public plot that I’m currently embedding within Qualtrics using an iframe. But as the data is somewhat personally identifiable, I’d rather host it privately. So I downloaded the zip file and unpacked its four files - figure.js, plot.html, plot.png and plotly.min.js - within Qualitrics’ file library (https://www.qualtrics.com/support/survey-platform/account-library/files-library/).

Qualtrics doesn’t permit embedding of <script src="plotly-latest.min.js"></script> within questions, so I got around this by including the contents of plotly-latest.min.js using its “Add Javascript” functionality. But I can’t figure out how to set up the iframe (http://help.plot.ly/embed-graphs-in-websites/#embed-plotly-graphs-in-a-blog-or-website) to point to the plotly html file, having tried:

<iframe frameborder=”0” seamless=”seamless” scrolling=”no” src=”URL OF HTML FILE IN QUALTRICS FILE LIBRARY”> </iframe>

Thinking that maybe files in Qualtrics’ file library can’t be directly linked, I tried hosting them on Google Drive with public sharing, but that didn’t work either. I also tried get the “paste the HTML” method, but it doesn’t work because, again, Qualtrics doesn’t permit <script>.

Any ideas? Maybe somehow including (perhaps after editing) the figure.js script into Qualtrics using the “Add Javascript” function in Qualtrics linked above?

2

FYI, I’ve reviewed the following and no dice yet:

How to perform server side manipulation using Plotly.js
(How to perform server side manipulation using Plotly.js)

Plot data located in external file?
(Plot data located in external file?)

Best way to serve Plotly graphs …
(Best way to serve Plotly graphs on a small searchable web-app? On-demand plotly.js visualization or storing plotly iframe URLs in a database?)

Using plotly without hosting data
(Using plotly without hosting data)

3

Would you mind pasting a snippet of the index file you’re trying to serve as an iframe?

4

Sure. This is the index.html file:

<html>
    <head><meta charset="utf-8" /></head>
    <body>
        
        <script type="text/javascript" src="plotly.min.js"></script>
        <script type="text/javascript" src="figure.js"></script>
        
        <div id="9a9e51b8-17c1-42ee-afbf-f9b50c6e3bff" style="height: 549px; width: 959px;" class="plotly-graph-div"></div>
        <script type="text/javascript">
            window.PLOTLYENV={'BASE_URL': 'https://plot.ly'};
            
            Plotly.newPlot("9a9e51b8-17c1-42ee-afbf-f9b50c6e3bff",  figure.data, figure.layout, {"linkText": "Export to plot.ly", "showLink": true})
            
        </script>
    </body>
</html>
5

Everything looks ok in your index.html file, assuming figure.data contains a plotly data array and figure.layout a plotly layout object.

How are you including the <iframe> in your other page(s)?

6

Thanks, Etienne. As an example, this works:

<div><iframe width="720" height="640" frameborder="0" scrolling="no" src="https://plot.ly/~ckaiwu/105.embed"></iframe></div>

… both with or without the <div>

Edit: I think I have it figured out. Both Qualtrics and Google Drive seem to use dynamic file naming, making directly linking a file difficult if not impossible. Then I tried this old Lifehacker trick for serving files from Dropbox and lo and behold it worked. Curiously, the filename used in the iframe has to be .html rather than .embed. It’s not an ideal solution, as the plot is still publicly accessible, at least its a start in the right direction.