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.
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.
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:
This tells the embedded IE in Alteryx to render with IE 10 standards mode.
Other Render Formats
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,
This post originally appeared at http://inspiringingenuity.net/2013/10/23/alteryx-interactive-html-visualizations/