Create Graph Popups with Javascript

I’ve previously written about Information Windows and how useful they can be for packing context and detailed information into your dashboard.  While very slick and useful, they unfortunately are limited in the ways you can use them.  Specifically, you can only call them from an attribute on a grid.  In one scenario recently, I had a grid that showed only metric values and I wanted to be able to click on the number to popup a trend graph.  Info Windows would have been perfect here if there was a way to launch them from a metric value.  Fortunately, I was able to develop a workaround to create a popup window using Javascript that closely mimics the behavior of an Info Window.

Creating the Popup
An Information Window is just a panel that uses a grid’s attribute as a selector value for filtering.  It then displays that panel relative to where you clicked.  To recreate this, we’ll use a separate report and instead of having a selector handle the filtering, we’ll have to use URL API.

Step 1 – Create Your Popup Report

Now, I’d like to be able to click on a number and show my popup window with my trend graph to show how we arrived at those numbers.

Creating the Popup Link
The straight forward way to do this is to use the Links feature or a text box with a hyperlink option on it.  The problem is that this will either navigate away from the Dashboard or open it up in a new tab.  Neither are great experiences since what we really want is for the user to have the Info Window experience where the context is just popping up right in line.  To accomplish this, I use a little bit of Javascript.

Step 1 – Add an HTML Container

Add an HTML Container control and size it over the area that you want to be clickable.

Right click it and choose Fill -> No Fill so that it’s transparent.  I left it white so you could clearly see it in this screenshot.

Step 2 – Craft the URL

The URL we need to use is going to be a link to open the graph we created in the beginning.  However, we want to use a bit of Javascript magic to make it look nice, and some URL API to trim it down.  The code will look like this:

<a style="cursor:pointer" onclick="window.open('Main.aspx?Server={&SERVERNAME}&Project={&PROJECT}&Port=8080&evt=2048001&src=Main.aspx.2048001&visMode=0&documentID=B0F20C1242BC5E3237214A864916B007&currentViewMedia=2&elementsPromptAnswers=8D679D4B11D3E4981000E787EC6DE8A4;8D679D4B11D3E4981000E787EC6DE8A4:Northeast&hiddenSections=header,footer,path,dockTop', '', 'height=435,width=710');" >

First, we want to popup the window instead of opening it in a new tab, so that’s where we use the Javascript command for window.open and give it a fixed height/width (find the sizes that work for your grpah).

The link we’re opening has some Autotext macros to make the Server Name and Project dynamic, and it answers the Region element prompt by passing in the element ID for the Northeast region (more info on doing this).  I’ve also included code for hiddenSections to remove the toolbars so that we just have the content of the Document.

We want to make sure the user knows they can click on this, so we set the cursor style to pointer, which makes it look like a normal hyperlink.

Finally, this anchor tag doesn’t have any physical size, so in order to give the user something to actually click on, but not obscure the grid beneath it, I used a long list of  , which is the code for a whitespace (experiment with the number of them that works for you).

My final HTML Container code:

<a style="cursor:pointer" 


onclick="window.open('Main.aspx?Server={&SERVERNAME}&Project={&PROJECT}&Port=8080&evt=2048001&src=Main.aspx.2048001&visMode=0&documentID=B0F20C1242BC5E3237214A864916B007&currentViewMedia=2&elementsPromptAnswers=8D679D4B11D3E4981000E787EC6DE8A4;8D679D4B11D3E4981000E787EC6DE8A4:Northeast&hiddenSections=header,footer,path,dockTop', '', 'height=435,width=710');" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br></a>

And the final output:

This looks better in Chrome where there isn’t such a large title bar, but I didn’t have it installed on the VM I was using for this.  You can also resize the Document to get rid of those scrollbars and adjust the values of the height/width in the Javascript code to get a nice and tight fit.