topic Re: posting interactive html plots on websites in Discussions

posting interactive html plots on websites

abmayfield — Mon, 18 Jun 2018 15:15:26 GMT

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

cwillden — Tue, 19 Jun 2018 15:10:45 GMT

Hi @abmayfield,

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.

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&colon; https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

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.

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.

Good luck!

Re: posting interactive html plots on websites

abmayfield — Mon, 18 Jun 2018 22:39:06 GMT

Cameron,

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

Re: posting interactive html plots on websites

gail_massari — Fri, 22 Jun 2018 13:17:59 GMT

Hi Anderson,

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.

As I mentioned when you first inquired, here are the steps to share.

Create the graph and save it somewhere. (You already did this).
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.)
Alternately you can PUBLISH one or more reports and do the same with the .html file. https://www.jmp.com/support/help/14/create-a-web-report.shtml

Re: posting interactive html plots on websites

abmayfield — Fri, 22 Jun 2018 14:21:20 GMT

Cameron,

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: </script></head><body></body></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.

Thanks,

Anderson

Re: posting interactive html plots on websites

abmayfield — Fri, 22 Jun 2018 14:44:51 GMT

Gail,

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!

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!

Thanks for your help,

Anderson

Re: posting interactive html plots on websites

cwillden — Fri, 22 Jun 2018 16:30:55 GMT

I found a really easy solution! You can embed an html page within another html page using <iframe> tags. Here's a really simple example:

<!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"></iframe>
        <p>Some content below.</p>
    </body>
</html>

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 <style> tags, I made the iframe as wide as possible and 600 pixels tall.

Here's what my result looks like.

Re: posting interactive html plots on websites

abmayfield — Fri, 22 Jun 2018 17:39:41 GMT

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

nascif_jmp — Mon, 25 Jun 2018 14:21:01 GMT

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:

Re: posting interactive html plots on websites

abmayfield — Tue, 26 Jun 2018 13:02:02 GMT

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

nascif_jmp — Tue, 26 Jun 2018 13:38:54 GMT

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

abmayfield — Tue, 26 Jun 2018 14:22:12 GMT

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

nascif_jmp — Tue, 26 Jun 2018 14:29:59 GMT

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

abmayfield — Tue, 26 Jun 2018 14:53:05 GMT

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

abmayfield — Tue, 26 Jun 2018 14:58:13 GMT

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

John_Powell_JMP — Tue, 26 Jun 2018 18:07:15 GMT

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

abmayfield — Tue, 26 Jun 2018 18:12:25 GMT

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

AdamChoen — Wed, 29 May 2024 19:01:28 GMT

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

appreciate some TSing clues

Re: posting interactive html plots on websites

gail_massari — Wed, 29 May 2024 19:40:48 GMT

@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.

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

John_Powell_JMP — Fri, 31 May 2024 12:31:27 GMT

@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