Editor's Note: This paper was selected as the Best Invited Paper by the attendees of JMP Discovery Summit 2016.
Heman Robinson heman.robinson, JMP Principal Software Developer, SAS
HTML Version 5, or Interactive HTML, supports many of the exploratory features of JMP®, including point identification, linking, and brushing (Becker and Cleveland, 1987; Stuetzle, 1987). Saved reports can be uploaded to a web server, placed in a shared folder, or emailed to colleagues. Reports can be viewed in any modern web browser.
Interactive HTML was introduced in JMP Version 11, and each succeeding version adds more features based on their usage in the product. JMP 13 adds support for the most popular features of Graph Builder, along with other features requested by customers.
This paper describes how to share JMP results with Interactive HTML and the new features in JMP 13.
![12508_Diamonds.gif 12508_Diamonds.gif](https://community.jmp.com/t5/image/serverpage/image-id/3466i529EEEA0460360C3/image-size/medium?v=v2&px=400)
Figure 1. An Interactive HTML Dashboard: Diamond Price, Carat Weight, Color, Clarity, Cut
History
HTML, or HyperText Markup Language, is the technology that defines the structure of all Web pages (http://www.w3.org/html/) (Berners-Lee, 1989). HTML is used together with Cascading Style Sheets for styling (http://www.w3.org/Style/CSS/) (Meyer, 2004), and JavaScript for programming (http://www.ecmascript.org/) (Crockford, 2008).
HTML Version 4 was limited in its support for graphics and interactivity. Starting around 2011, HTML Version 5 began supporting graphics in the canvas element, along with new controls such as sliders for interactivity.
Support for Adobe Flash (http://www.adobe.com/products/flashplayer.html) and other competing technologies began to decline around this time (Goldman, 2011). In response, JMP, like other software products, began migrating its technology from Flash to Interactive HTML.
In JMP 11, Interactive HTML supported tables and simple graphs, including scatter plots, histograms, lines, and ellipses, and box plots.
In JMP 12, Bubble Plots and Profilers were added, along with support for tablets.
In JMP 13, Interactive HTML supports the most popular features of Graph Builder. We’ve also delivered a collection of smaller features requested by our customers.
How to Use It
Saving the JMP Report
To save a JMP report in HTML5 format, choose “File: Save As:” on Windows, or “File: Export” on the Mac. Save as type “Interactive HTML with Data”. This creates an Interactive HTML file in the specified directory.
![12515_HTML5.png 12515_HTML5.png](https://community.jmp.com/t5/image/serverpage/image-id/3467iC3A2453D0CCA4D37/image-size/medium?v=v2&px=400)
Figure 2. “File: Save As” Dialog for Interactive HTML
Supported Browsers
After the HTML file is saved, you can open it in any modern web browser. JMP 13 supports Interactive HTML on the following devices and browsers:
Device
|
Supported Browsers
|
Windows
|
IE 11, Edge, Chrome, Firefox, Opera
|
Mac
|
Safari, Chrome, Firefox, Opera
|
iPad
|
Safari, Chrome
|
Android
|
Chrome
|
Kindle Fire
|
Silk
|
Table 1. Supported Devices and Browsers
Because of limited customer demand, we do not test Interactive HTML on phones. However, it often works well on phones running Safari or Chrome browsers, because those phone browsers share code with their tablet versions. Performance varies depending on the phone.
Unsupported Features
Interactive HTML supports the most frequently used features of JMP. If your report contains a feature that is not supported, you’ll see a warning in the dialog, and a more detailed message in the JMP Log, as shown in the figures below.
![12516_Warning.png 12516_Warning.png](https://community.jmp.com/t5/image/serverpage/image-id/3468i8D12366F558A373F/image-size/medium?v=v2&px=400)
Figure 3. Warning of Unsupported Feature
![12517_4. Log.png 12517_4. Log.png](https://community.jmp.com/t5/image/serverpage/image-id/3469i223AFD337A1BCACB/image-size/medium?v=v2&px=400)
Figure 4. Log Message
If a feature is unsupported, part of your report will be exported as a static image. In the figure below, the two-dimensional profiler is interactive. As the log message indicated, the three-dimensional profiler is static.
![12518_5. Fit Model.png 12518_5. Fit Model.png](https://community.jmp.com/t5/image/serverpage/image-id/3470iFC3977A27C3EF6E0/image-size/medium?v=v2&px=400)
Figure 5. Interactive 2D Profiler, with Static 3D Profiler
Securing Your Data
JMP Interactive HTML, like JMP on the Desktop, enables interactivity by storing data in memory. This means: the data in the graphs are embedded in the web page. The data are obfuscated, but readable by any motivated hacker.
It might seem that this security risk could be mitigated by encrypting the data. It cannot. The data must be readable by web browsers. Therefore, encrypted data would require a decryption key, also readable by web browsers – and by everyone else. Encrypting the data would be equivalent to buying an expensive burglar alarm for one’s house, and then leaving the key under the mat.
You can reduce risk by anonymizing your data, e.g. by creating a subset of your data without Name or ID columns. It is safest to create this subset yourself. However, columns not used in the JMP report are not embedded in the Interactive HTML file. So, as long as you don’t use any identifying columns for labels or other purposes, your data are anonymized automatically.
An alternative is to use static HTML (HTML Version 4), which embeds no data. In the “File: Save As” dialog, HTML4 is labeled simply “HTML File”. HTML5 is labeled “Interactive HTML with Data” to emphasize both interactivity and security.
![12519_6. HTML4.png 12519_6. HTML4.png](https://community.jmp.com/t5/image/serverpage/image-id/3471iC812719231736A4A/image-size/medium?v=v2&px=400)
Figure 6. “File: Save As” Dialog for Static HTML (HTML4)
![12520_7. HTML5.png 12520_7. HTML5.png](https://community.jmp.com/t5/image/serverpage/image-id/3472i4B53E965EB88F978/image-size/medium?v=v2&px=400)
Figure 7. “File: Save As” Dialog for Interactive HTML (HTML5)
Scripting the Report
Creation of Interactive HTML reports can be automated with the JMP Scripting Language (JSL) (SAS, 2014). In the script below, the “Save Interactive HTML” command is followed by the “Web” command. This automatically displays the report in your default web browser.
// Exports a Bivariate Fit.
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
obj = Bivariate( Y( :weight ), X( :height ), Fit Line );
obj << Save Interactive HTML( "C:\Bivariate.html" );
Web( "C:\Bivariate.html" );
New Features in JMP 13
Graph Builder
In JMP 13, we've added support for reports created with Graph Builder. This includes the most frequently used features of Points, Smoothers, Ellipses, Lines, Bars, Areas, Box Plots, Histograms, Heatmaps, Mosaic Plots, Caption Boxes, and Map Shapes. These Graph Builder elements are highlighted in the figure below.
![12521_8. Elements.png 12521_8. Elements.png](https://community.jmp.com/t5/image/serverpage/image-id/3473iC2D60F0FE8C4E694/image-size/medium?v=v2&px=400)
Figure 8. Graph Builder Elements
Dashboard Support
Information dashboards (Few, 2013) combine related information in custom layouts for efficient communication. In JMP 13, dashboards can be created using the “File: New: Dashboard” menu, or using the “Window: Combine Windows” menu.
Adding support for Graph Builder enables us to support many more kinds of dashboards in JMP 13. The first dashboard below contains four of the new Graph Builder elements, illustrating regional air quality and temperature.
In addition, we've improved support for dashboard layouts in Interactive HTML. The second figure below shows a dashboard using an efficient layout with tab controls to show profits per employee for different types of companies.
![12522_9. Dashboard.gif 12522_9. Dashboard.gif](https://community.jmp.com/t5/image/serverpage/image-id/3474i09FC6DF40A5EFDA0/image-size/medium?v=v2&px=400)
Figure 9. Air Quality Dashboard
![12523_10. Tabs.png 12523_10. Tabs.png](https://community.jmp.com/t5/image/serverpage/image-id/3475iCB16378CE47337EB/image-size/medium?v=v2&px=400)
Figure 10. Dashboard with Tab Controls
Organizing Your Web Pages
If you create many HTML pages, you’ll want to organize them. In JMP 12, your pages can be easily organized by using the JMP Auto-Publishing Add-In (Valente, Brady, and Kennedy, 2014). This provides an automated way to organize your reports, with a cover page and thumbnail sketches linked to individual reports. You can download the JMP Auto-Publishing Add-In from the JMP User Community at https://community.jmp.com/docs/DOC-6689.
In JMP 13, the Auto-Publishing Add-In has been built into the product, under the “View: Create Web Report” menu. This menu displays a wizard-style interface that walks you through the process of organization, enabling you to customize ordering, styles, and images. This tool was used to create all our examples at http://www.jmp.com/jmphtml5/.
![12524_11. CreateWebReport.png 12524_11. CreateWebReport.png](https://community.jmp.com/t5/image/serverpage/image-id/3476i487DC894817B5A82/image-size/medium?v=v2&px=400)
Figure 11. JMP “View: Create Web Report” menu.
Just A Few More Things
Customers have requested a number of features over the years. So in addition to the above, we've added support for the following in JMP 13:
• New and Improved Profilers
• Reference Ranges
• Value Labels and Value Ordering
• Pinned Tooltips and Hover Pictures
Three new embedded profilers support Neural, Generalized Regression, and Generalized Linear Model reports. Also, profilers have improved support for adaptive Y axes, formatted X values, wrapped layouts, and mixture designs.
![12525_12. Profiler.png 12525_12. Profiler.png](https://community.jmp.com/t5/image/serverpage/image-id/3477iE9BA125D814FB5F5/image-size/medium?v=v2&px=400)
Figure 12. Generalized Regression Profiler with Wrapped Layout
Reference ranges, value labels, and value ordering enable more descriptive graphs. The graph below uses these features to illustrate marriage and divorce rates over time.
![12526_13. Ranges.png 12526_13. Ranges.png](https://community.jmp.com/t5/image/serverpage/image-id/3478iC698DA1E864A6894/image-size/medium?v=v2&px=400)
Figure 13. Marriage and Divorce Rates
Pinned Tooltips and Hover Pictures enable more enjoyable and efficient presentation and exploration. The figure below shows information about the planets plotted by their distance from the sun.
![12527_14. Hover Tips.png 12527_14. Hover Tips.png](https://community.jmp.com/t5/image/serverpage/image-id/3479i95A5F1CC3C0C1143/image-size/medium?v=v2&px=400)
Figure 14. Pinned Tooltips and Hover Pictures
Interactive Examples
This paper has shown many static images, but that is no substitute for interacting with the web pages themselves. You can explore all features of JMP Interactive HTML at http://www.jmp.com/jmphtml5/.
We look forward to your comments and suggestions as we continue to develop our part of JMP.
![12529_15. Examples.png 12529_15. Examples.png](https://community.jmp.com/t5/image/serverpage/image-id/3480i10CDF6ABECAA554E/image-size/medium?v=v2&px=400)
Figure 15. JMP 13 Interactive HTML Examples, Organized with “View: Create Web Report”.
References
Becker R. and Cleveland W. (1987). “Brushing Scatterplots”, Technometrics, 127-142.
Berners-Lee T. (1989). “Information Management: A Proposal”, CERN.
Crockford D. (2008). JavaScript: The Good Parts. O’Reilly.
Few S. (2013). Information Dashboard Design: Displaying data for at-a-glance monitoring, Second Edition. Analytics Press.
Goldman D. (2011). “The Beginning of the end for Adobe’s Flash”. CNN Money (http://money.cnn.com/2011/11/10/technology/adobe_flash/).
Meyer E. (2004). Cascading Style Sheets: The Definitive Guide. O’Reilly.
SAS (2014). JMP 11 Scripting Guide, Second Edition. SAS Institute Inc.
Stuetzle W. (1987). “Plot Windows”, Journal of the American Statistical Association, 82, 466-475.
Valente D., Brady B., and Kennedy, A. (2014). “A JMP Add-In for Auto Publishing Interactive HTML Reports”, JMP Discovery Summit 2014.