Engine Works
Under the hood of Alteryx: tips, tricks and how-tos.
In the last 2 weeks, I have introduced (as a prototype) the idea of embedding HTML visualizations into Alteryx. If you have not read them you can read Part 1: JSON Data Output and Part 2: HTML5 Visualizations. In last week’s post, I explored a generic HTML 5 output tool and a sample visualization based on NVD3. Although I was able to return a very nice visual from NVd3, all interactivity was lost. This week I want to show a prototype with the interactivity working the way it should in NVD3.
Looking at the screenshot on the left, you can see an App running in the Gallery with a NVD3 chart. In that particular screenshot, my mouse is over the US in 1995 so NVd3 displays a popup with the relevant information at that point. You can also click on the modes (Stacked, Stream & Expanded) to show different views and you can click on the countries at the top, or in the graph itself to only show a subset of the data. This is how NVD3 is designed to run.
You can play with this app and interact with it yourself at the Alteryx Analytics Gallery: Interactive Html Demonstration. Although it looks fairly well integrated, it is not, it is just a prototype. Keep in mind that this is not a full product feature now, but hopefully will be in the future.
Technical Details
This module builds on last week’s – although it doesn’t actually use the macro from last week This time instead of just rendering HTML to a PNG to insert it into a report, we want to insert the HTML itself. Fortunately the composer engine (the reporting engine embedded in Alteryx) has a special tag for this purpose: <htmlpassthrough>. Any data inside of that tag will get passed through verbatim when rendering to HTML, but will be ignored while rendering to all other formats.
I had to be very careful about the html in this case, because it is getting rendered in a browse tool of in the gallery at a very different time than when it is running. Specifically, this means that I can’t count on the location of JavaScript files that would be included in the script. For now, I worked around this issue by embedding, D3, NVD3 and all the data (as JSON) into the HTML. That way, there are no includes and anywhere that has the HTML code will be able to view the interactive chart.
You can also see the interactive chart in a browse window in Alteryx – with some caveats. Alteryx uses an embedded version of Internet Explorer in order to show the report preview in the browse. In order to see the interactive chart there, you need to have IE 10 installed on your system. After that, you need to set a registry entry to force it into standards mode. Presuming you have the 64 bit version of Alteryx, you need to set a registry value “AlteryxGui.exe” to 10001 decimal in the registry key:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION.
This tells the embedded IE in Alteryx to render with IE 10 standards mode.
Other Render Formats
This is all great for HTML output, but what about other output formats like PDF and Word? In this case I use the same technique I used last week to pre-render the HTML to a PNG file that also gets embedded into the report. This is great for those formats, but now I have 2 copies of the chart in the HTML output – 1 static and another dynamic. That is solved by another quick JavaScript hack. I embedded a little bit of code to find the static image and make it invisible. As a side note, the 1st time I wrote it I was a little too broad and managed to turn off all the images in the gallery site, not just the ones for this report. Oops!
Wrapping Up
You can download the app from the gallery if you want to play with it on the desktop. Click Interactive Html Demonstration and then the Download button. I feel the need to call out once again that this is purely prototype. I was able to make it work in the current version of the Gallery by hand crafting it, but it is not anywhere close to what I would call a release standard. Presuming we get enough positive feedback about this idea, this is likely to be worked on by the development teams after the release of Alteryx 9.0.
Thanks for reading,
Ned.
This post originally appeared at http://inspiringingenuity.net/2013/10/23/alteryx-interactive-html-visualizations/
