cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Try the Materials Informatics Toolkit, which is designed to easily handle SMILES data. This and other helpful add-ins are available in the JMP® Marketplace
Choose Language Hide Translation Bar
How to embed JMP Public or JMP Live content in a webpage or blog post

This article came out of some learning from my blog series about the things I wish someone had told me when I started using JMP. I realized that I wanted to make several graphs in the articles interactive. I knew I could create the interactive graphics in JMP and move them to JMP Public. But I didn't know how to do the bit where I embed the JMP Public content in the article.

So, here is how to do it. And yes, you're going to see some code. It's OK; you don't have to edit it. Here, look at this picture of a puppy and take deep breaths until you're ready to continue.

See the happy puppy - it's not worried about seeing code.  Be like the happy puppy.See the happy puppy - it's not worried about seeing code. Be like the happy puppy.
OK, you better now? Awesome. Now buckle up, because this will change your world – or at least change how you blog a little.

Setting Up the Report for JMP Public and Publishing

Step 1 – Run an analysis in JMP
You can find details on this step pretty much anywhere in the JMP User Community. There are three things to pay attention to here:

      1. Keep your data set small.  
      2. Pay attention to the size of your graphics. Below are two examples. The first one I optimized for viewing in a browser; the other I optimized for viewing in a blog. Just keep that in mind.  
      3. Remember that what you put on the web stays on the web!

 

Step 2 – Publish the analysis to JMP Public (or JMP Live)
I'm not going to reinvent the wheel by duplicating content. Have a look at this blog post: Posting to JMP Public 
Just note that you want to have the JMP Public page opened when the upload is successful.

 

Step 3 – Get the iFrame content
If you don't have your JMP Public page open, do so. Go to the icon in the upper right-hand side of the window.JMP Public Screenshot 1.png

 

Select "Embed Code (iFrame)" from the list. You've now got the HTML code needed to embed the content for that report using something called an iFrame. JMP Public Screenshot 2.png

 

 

Putting the code in a post (using this blog as an example)

The JMP User Community is built on top of a system called Khoros (formerly known as Lithium). I'm going to use that as an example, but this will work with anything that will accept an iFrame.

In my case, I created a new blog article, and this opened an editor. In the editor, I have the option to work in Rich Text (what most people do), to see the HTML code (most people pretend that doesn't exist), and then get a Preview of what I'm going to get when I click "post."
JMP Public Screenshot 3.png
When I click the HTML tab, the editor shows me the code for what I've written in the Rich Text tab.
JMP Public Screenshot 4.png
All I have to do is locate the point where I want to insert the iFrame code is and paste it there. I find this is easiest to do by entering a couple of blank lines where I want my iFrame to go. Then I have to find them in the HTML (they look like this: "<p>&nbsp</>") and then locate the last paragraph marker (looks like this: "</p>") before them. I put my cursor there (you can start a new line if you'd like) and hit paste (CTRL or command + V). It should look like this:
JMP Public Screenshot 5.png
Now that the iFrame is in the HTML, I can go the Preview tab and have a look at the embedded JMP Public content.
JMP Public Screenshot 6.png
And that's it. A little cutting and pasting, and you can integrate JMP Public content into a blog post or webpage. The only legwork you may need to do is research the specific method for inserting an iFrame, but it should look similar to the one I've shown here.

Happy blogging!

Last Modified: Jul 12, 2019 11:04 AM
Comments
John_Powell_JMP
Staff

Excellent blog post, Mike!

 

I'd just like to add a few small tips:

 

1. For a report that's small enough to fit on a JMP Community page, you can also reduce the width and height attributes in the iframe, to eliminate any extra gray space. And if you don't want scroll bars, you can add scrolling="no".

It would look something like this:

<iframe src="https://public.jmp.com/api/packages/Interactive-Legend/js-p/5cf50b6c8d935302b443bfff/indexPage" width="640" height="600" frameborder="0" scrolling="no" style="margin: 0.8em 0;" class="jmp-live-iframe"></iframe>

Here's an example.

 

2. When a report is large and needs scroll bars, you can provide a handy tip for Firefox users viewing your blog or web page: "If you are using Firefox, right click on the embedded report and choose  'This Frame > Open Frame in New Window', to see the whole report in a new window". 

FirefoxIframeMenuPNG.PNG

3. When embedding a report like this, make sure the report on JMP Public or JMP Live was set to share with Everyone.

ShareWithEveryone.PNG

~John

nina_chan
Staff

Thank you. And thank you for the puppy picture. It helped. So did your great description. It was easy to embed the reports 

MikeD_Anderson
Staff

Puppies make everything better.

Peter_Hersh
Staff

Thanks @MikeD_Anderson I had forgot how to do this great easy to follow refresher.