60478_en-US

liliconcom

posting interactive html plots on websites

Hello, 

    I am interested in putting interactive JMP HTML files on my personal website, which is hosted by Squarespace. It seems like the only way to do this is 1) open the interactive HTML file on Chrome, 2) copy the HTML scripts (using Mac's "Developer" option), and 3) pasting the script into either a code box or "embed" box on my website. This does work (although I always get an error message saying the code is too long). However, it always puts the interactive plot under the footer at the bottom of the page (regardless of where I have "placed" the code box). Is there a way I can modify the script to where it actually puts the interactive plot where I want it to go? Alternatively, is there a way to simply "post" an interactive plot on a website, without the need for scripting? (I know hackers can steal my data this way; this is not a concern of mine. I want people to steal my data since it is for the common good!). 

Re: posting interactive html plots on websites

Thank you @Michael_Goff for the detail answer.

 

I'll check my option with local IT to find a long-range solution that works for me.

 

appreciate your and everyone help!

Adam.

Re: posting interactive html plots on websites

Hi Adam!

 

This thread is originally from 2018 and since it was originally posted, some things have changed in the internet ecosystem. The reason this embedding scenario is failing is due to a change in browser's security policies. In 2020, Chrome, and other browsers, changed the default value of one of their policies called a "Referrer-Policy" to something more secure.  This is in order to help protect your data. The new default policy is called strict-origin-when-cross-origin. Note, the default policy is used when no other policy is specified by the server hosting the content. This means, that when two webpages try to communicate with each other, they need to have the same origin. In this case the origin means the same protocol, hostname, and port. 

 

The issue you're seeing is a consequence of this browser policy change. In JMP 17, our interactive HTML reports are pinging the parent page to see if extra information is available. Since this policy is in place, we hit an error because we're not allowed to access that parent anymore with the new default policy. We have addressed this situation with JMP 18. That would be the easiest path to get something working. 

 

In your case, it looks like you might be accessing these HTML pages through the filesystem:

window.onload (file://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711)

It's a bit difficult to fully diagnose without looking at the full URLs, but some browsers treat the file:// protocol paths differently than pages hosted on a webserver and consider them all to be "cross-origin" from one another. One way to ensure these files are on the same origin is to host them from a web server. You'd want the parent page to be on something like https://.com/iframe_example.html  and the child page to be hosted from https://.com/Counters.html. 

Sometimes we test with a local web server is using a VS Code plugin called Live Server. It allows us to quickly spin up a webserver using contents from a folder in our filesystem. However, for any kind of production usage you would probably need to reach out to your IT department to spin up a web server to host these pages. 

 

Again, hosting a webserver would be a workaround for embedding Interactive HTML reports from JMP 17. In JMP 18 we've added a fix to avoid running into that error, and you should be able to embed these pages from the filesystem again. 

 

Thanks,

Michael Goff

Re: posting interactive html plots on websites

Thanks, Adam. 

I tested the page in Chrome and Firefox and it loaded despite the error in the console. In Edge, as you found, and now I also can replicate, the iFrame does not load.  I'm going to ask internally for some help. Please stay tuned.  

 

Thanks,

~John

Re: posting interactive html plots on websites

I don't mind shearing here.

 

seems like it's not working.

 

 

Re: posting interactive html plots on websites

Hi Adam, 

 

There might be something in the way your main web page is including the Interactive HTML page that is seen as an uncaught exception. 

There are many ways this can be done. Below is one of the simplest methods that usually works:

The main page would contain the following:

 

    <TITLE>iFrame Example</TITLE>


    <H1 id="toc-hId-2019574682">iFrame Example</H1>
    <P>Below is an example of an embedded Interactive HTML file using and iframe.</P>
    <IFRAME src="https://community.jmp.com/bivariate.html" height="900" width="500" title="iframe example"></IFRAME>

In this case, bivariate.html is an Interactive HTML file exported from JMP.  

 

When this is done with a JMP 17 Interactive HTML file, there will be an network error displayed in the console,

"GET file:///C:/api/webjmp net::ERR_FILE_NOT_FOUND"

but it should not stop the page from loading. 

 

If you would, please try this and let me know if it works.

 

If your main page uses JavaScript to load the Interactive HTML page, you may need have it use a try/catch block to handle/ignore the network failure so it can continue loading the page.

 

If you need help with this, please contact JMP technical support to provide more details, unless you are comfortable sharing in this forum. 

 

~John

Re: posting interactive html plots on websites

there are on the same server (in the same main folder).

I also tried moving them to different server and to my desktop.

 

unfortunately, I'm getting the same error.

 

Adam.

Re: posting interactive html plots on websites

@AdamChoen , 

 

That error occurs when the web page including the iframe is on a different server than the Interactive HTML page referred to by the iframe.  If you can move the Interactive HTML content to the same server/domain as the page with the iframe, this error should go away. 

 

In JMP 18, we worked around this restriction by modifying the Interactive HTML output.

 

~John 

Re: posting interactive html plots on websites

@John_Powell_JMP 

i think thats the relevent error for my issue

 

Uncaught (in promise) DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
at window.onload (file://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711)

Re: posting interactive html plots on websites

@AdamChoen , 

When you open a web page where you've embedded an Interactive HTML page from JMP 17, please check the browser console (right click, Inspect, then choose Console) to see if there any errors reported. 

 

If there are any, please copy them here so I can see what might be going wrong.

 

Thanks, 

~John

 

 

Re: posting interactive html plots on websites

@John_Powell_JMP  A questions came in that you might be able to answer Adam @AdamChoen  if you @mntion someone they get pinged in email.

 

AdamChoen

Level III

 

 

 

May 29, 2024 03:01 PM |  Posted in reply to message from cwillden 06-22-2018

Iframe is not working for me anymore with JMP17 interactive HTML.

appreciate some TSing clues 

Thanks, Adam

Re: posting interactive html plots on websites

Iframe is not working for me anymore with JMP17 interactive HTML.

appreciate some TSing clues 

Re: posting interactive html plots on websites

I wrote a complaint to OneDrive about their inability to handle HTML files. When you "open" an interactive HTML file WITHIN OneDrive, it only shows code!!! You would think Microsoft could handle this task....

 

I do want to mention here, in case a non-JMP expert/employee stumbles across this post, that the raw data can be extracted from interactive plots (i.e., a hacker could get at your data and reproduce them). I think that, for this reason, there is not currently a large demand for posting these kinds of interactive figures on personal websites (and why this is the first post on this topic). I'm mainly focusing on meta-analyzing already published data, so this is less of an issue for me. 

Re: posting interactive html plots on websites

This request and the responses are awesome! Thanks!

I tried Dropbox, GoogleDrive, and OneDrive before my presentation about sharing Interactive HTML last year and had to report some disappointing findings.

It's good to know there are alternatives that work.

By the way, iFrames work in the JMP Community too!

Re: posting interactive html plots on websites

BTW, this is also an "accepted" solution; the reason it did not work for me was because none of my websites or clouds could properly "host" an interactive HTML file. As it turns out, Amazon's S3 server CAN do so, so, upon using your script and providing a link to the interactive JMP HTML plot found on my S3 cloud, the plot appears in the correct location, and I do not need to paste in the 200 pages of script. 

Re: posting interactive html plots on websites

Awesome! And as a note to other interested individuals: Google Drive also DOES NOT WORK (interactive HTML files cannot be hosted by GoogleDrive and referenced in scripts to appear on websites). I wonder why S3 is the only one of these major clouds that works with interactive HTML (I didn't try Apple's iCloud, though). Shouldn't everyone have already switched over to this language for interactive file types?

 

My next step is going to be getting a JMP report with multiple windows to appear on my website. I'm guessing it should be no different from a single graph in terms of the steps necessary to do so (provided I use S3).

Re: posting interactive html plots on websites

Glad it helped! And don't forget, if you use JMP Pro, you can export your JMP models to scoring code and host them in AWS too:

https://dfd3m9li3aipf.cloudfront.net/index.html

or embed them (as JavaScript scoring code) directly into your HTML dynamic pages:

http://jmp.scoring.iris.s3-website.us-east-2.amazonaws.com/

http://jmp.valentine.s3-website-us-east-1.amazonaws.com/

 

 

 

 

Re: posting interactive html plots on websites

Great idea! I don't know why I didn't just simply copy and paste your code before, but YOUR graph comes up on my website fine. There is a long list of complaints about OneDrive's handling of HTML files (they open as script, rather than the final product within OneDrive). I just tried it with Dropbox and had the same problem as with OneDrive. I wonder if it's because, when you share files via a link, the link doesn't look like a regular website link (like yours)?For instance: https://www.dropbox.com/s/dwjyb5n0fk24zoo/Fit%20Y%20by%20X.html?dl=0. Interestingly, there is an "embed" feature with OneDrive that is meant to get around this issue (it gives you HTML code to copy to your website), but, ironically, it doesn't work for interative HTML!

 

In any event, I have just signed up for an S3 account, and it WORKS! Man, I never thought it would be such a pain to do this, but I think that, thanks to your help, using S3 to host the interactive HTML files from JMP and then referencing the S3 file links is a workable solution. Thanks so much for your help (and to the others, as well).

Re: posting interactive html plots on websites

You might have to enable visibility properties in One Drive to get the pages to report the correct MIME type.

It is also possible that Square Space is blocking all foreign pages (or all foreign JavaScript content) for security reasons.

 

Try creating an iframe pointing to my interactive HTML page on S3. The URL is on my first post.

This way you will know if the issue is with One Drive or SquareSpace. 

 

Also, check your JavaScript console for error messages, you might find a clue there.

 

Re: posting interactive html plots on websites

Hello,

    This sounds like a good plan, but it doesn't work for One Drive (my current file sharing/storing device). I had previously hosted the interactive HTML file there and referenced it on Squarespace, but it just shows up as an empty box on my website. Maybe I will try S3 later, but it seems like it should be the same thing, right? Maybe it's a Squarespace issue....

Re: posting interactive html plots on websites

You can host the generated HTML in S3 and point your iframe to it from there. Here is an example:

http://blog.nascif.com/2015/08/a-software-developers-career-visualized.html

 

Relevant code:

 

<a href="https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt" target="_blank">https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt</a>;" width="100%">

 

Re: posting interactive html plots on websites

This is a great idea, BUT apaprently Squarespace does NOT allow it! This is what they told me:

"The people can still download the html files, it's just not able to open in-browser via a Squarespace link and have that static URL like a .pdf file would."

 

I am kind of hoping this guy is wrong, so I'm going to try to figure out a work-around to do it your way, which seems to be possible on most other websites!

 

Otherwise, I need to go back to pasting in the 200 pages of code.....

I will let you know if I am successful. Thanks again for your help. Surely posting an interactive HTML in the correct place in a personal website is achievable!

Anderson

 

Re: posting interactive html plots on websites

I found a really easy solution!  You can embed an html page within another html page using tags.  Here's a really simple example:</P><PRE><!DOCTYPE html> <html> <head> <title>Main Page</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="initial-scale=1.0"> <style> iframe { width: 100%; height: 600px; } </style> </head> <body> <p>Some content above.</p> <iframe src="Graph%20Builder.htm">

Some content below.

In the opening iframe tag, you link to the JMP interactive html file.  You will need to upload that file to foursquare so it can find it and make sure the path is correct.  You will also want to add styling to the iframe to resize it as needed.  In the tags, I made the iframe as wide as possible and 600 pixels tall.</P><P> </P><P>Here's what my result looks like.<span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="iframeexample.PNG" style="width: 592px;"><img src="https://us.v-cdn.net/6038925/uploads/images/11223i427DB074EDA86FA5/iframeexample.PNG" role="button" title="iframeexample.PNG" alt="iframeexample.PNG" /></span></P><P> </P><P> </P><P> </P></lingo-body><lingo-sub id="lingo-sub-60916" slang="en-US" mode="CREATE">Re: posting interactive html plots on websites</lingo-sub><lingo-body id="lingo-body-60916" slang="en-US" mode="CREATE"><P>Gail, </P> <P>   Thank you for your response. Sharing the html file/link is easy. What I'm trying to do is have the interactive plot appear on my website. So far, this is possible by copying an immense amount of HTML code and pasting it into a code box. What I can't figure out is why it always places my interactive plot in the footer area, not at the correct position in the page. I think this will just require some tinkering with the code, so I have reached out to Cameron to see if he can help show me what exactly needs to be modified in the code. The alternative is to just tell the reader to scroll to the bottom of the page!</P> <P>    I am very excited about this. I even got a moving bubble plot to embed so that the reader/user can play around with speeds, timing, etc. Once I can get it positioned correctly, my website is going to be chock full of moving/interactive JMP plots!</P> <P>Thanks for your help, </P> <P>Anderson</P> <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Screen Shot 2018-06-22 at 10.38.23.png" style="width: 400px;"><img src="https://us.v-cdn.net/6038925/uploads/images/11220i34DD91CD1C6B1119/Screen Shot 2018-06-22 at 10.38.23.png" role="button" title="Screen Shot 2018-06-22 at 10.38.23.png" alt="Screen Shot 2018-06-22 at 10.38.23.png" /></span></P></lingo-body><lingo-sub id="lingo-sub-60915" slang="en-US" mode="CREATE">Re: posting interactive html plots on websites</lingo-sub><lingo-body id="lingo-body-60915" slang="en-US" mode="CREATE"><P>Cameron, </P><P>     I have played around with JMP and Squarespace more, and, thankfully, I CAN simply paste in 150 pages of HTML code and get it to embed even the most complex graphs (including moving bubble plots!) into my website. The lingering issue is the placing of it in the footer (as I mentioned last time). You mentioned a solution to this involving the addition of a >div to the script. At the very end of the MONSTER HTML script, there is this line of code: <SPAN class="html-tag"></script></SPAN><SPAN class="html-tag"></head></SPAN><SPAN class="html-tag"><body></SPAN><SPAN class="html-tag"></body></SPAN><SPAN class="html-tag"></html>. Do I need to change one of those "body"s to "div" or is it more complicated than that? I tried changing them in isolation and when combined to div, but, knowing nothing about scripting, I could be way more complicated than that! Any ideas? I am attaching the 200-page HTML code for reference. </SPAN></P><P><SPAN class="html-tag">Thanks, </SPAN></P><P><SPAN class="html-tag">Anderson</SPAN></P></lingo-body><lingo-sub id="lingo-sub-60905" slang="en-US" mode="CREATE">Re: posting interactive html plots on websites</lingo-sub><lingo-body id="lingo-body-60905" slang="en-US" mode="CREATE"><P>Hi Anderson,</P> <P>A few people at JMP are trying to find a solution to your issue, and we have logged the need for a future JMP enhancement to meet the need you describe.</P> <P> </P> <P>As I mentioned when you first inquired, here are the steps to share.</P> <OL> <LI>Create the graph and save it somewhere.  (You already did this).</LI> <LI>The key is you need to share the .htm file.  So a) you can attach it to an email tell them to OPEN it.  (I emailed you mine.  Try opening it.) b) You can put it on a shared drive and when they click on it, it will open. (I attached one that I Published to open with Chrome, also.  You will need chrome to open that one.)</LI> <LI>Alternately you can PUBLISH one or more reports and do the same with the .html file.  <A href="https://www.jmp.com/support/help/14/create-a-web-report.shtml" target="_blank" rel="noopener noreferrer">https://www.jmp.com/support/help/14/create-a-web-report.shtml</A></LI> </OL> <P> </P> <P> </P></lingo-body><lingo-sub id="lingo-sub-60543" slang="en-US" mode="CREATE">Re: posting interactive html plots on websites</lingo-sub><lingo-body id="lingo-body-60543" slang="en-US" mode="CREATE"><P>Cameron, </P><P>    Thank you so much for your response. It looks as if it is as I feared: I can't just simply paste in the interactive plot onto a webpage! Squarespace supports CSS, Java, and HTML, so I'll give your suggestion a try tomorrow. Ironically, Squarespace is deliberately designed to move away from having to script anything, though it CAN do so in a pinch. Thanks again for your suggestion, and I'll report back later regarding my success (or lack thereof) in case other JMP users are interested in posting interactive HTML plots on their websites, too! Anderson</P></lingo-body><lingo-sub id="lingo-sub-60522" slang="en-US" mode="CREATE">Re: posting interactive html plots on websites</lingo-sub><lingo-body id="lingo-body-60522" slang="en-US" mode="CREATE"><P>Hi <a href="https://community.jmp.com/t5/user/viewprofilepage/user-id/12111">@abmayfield</a>,</P><P> </P><P>That is probably going to be a little tricky.  Those files aren't really constructed for easy copy/paste of just the graph to be embedded in a website.  Do you have some experience with html, css, and JavaScript?  I haven't put any JMP graphs on a website, but I exported a Graph Builder example to see how it's all structured.  All of the action happens within the <head> tags.  The actual DOM is just the head tags, which contain the CSS and JavaScript, and empty <body> tags.  The JavaScript inserts all of the content into the <body> tags. </P><P> </P><P>If you want to give it a go, I would recommend clipping out everything within the <style> tags and putting that into a CSS file, and then clipping out all the JavaScript in the <script> tags and saving that as a .js file.  I don't use foursquare, but I found this which may be helpful for adding your own custom CSS and Javascript: <A href="https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript" target="_self" rel="nofollow noopener noreferrer">https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript</A></P><P> </P><P>The JavaScript is pretty unreadable in its unformatted state.  I'm guessing it is ending up in the footer because the JavaScript just appends the content to the <body> tag, so it will go right at the end.  You could add a <div> to the body and edit the JavaScript to to write to that div instead.</P><P> </P><P>Also, I'm sure there will be some conflicts with the CSS that JMP provides with your website's own styling, so that may have some unintended consequences.  If you know what you're doing, you can probably sort that out.</P><P> </P><P>Good luck!</P></lingo-body></lingo-body>