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

Data Source: MicroStrategy Tutorial
In this example, I’ve created a report with Day, Revenue and an Element prompt for Regions.  This will be the source for my popup graph.
Step 2 – Create A Document
This is optional based on preference, but I like to wrap this graph in a Document so that I can fancy it up a bit.  Specifically, there likely won’t be an obvious indicator on what the data graph is showing, so I like to use the Autotext macro {&PROMPTn&} where n is the prompt’s number to display the selected value.  Remember that this will end up being a free floating graph so providing context for it will be important.
I also have been using the DHTML Widget Line Chart as I find that it looks a lot nicer than the stock charts and providers better handling for highlighting data point values (although since it was designed for the iPad, you have to click to highlight the values instead of hovering.  A small price to pay in my opinion.) 
Just right click on your grid, choose Properties, select the Widget tab, and you can find Line Chart under the DHTML menu.
The end result will look like this:
Source: MicroStrategy Tutorial
Make a Dashboard
First, I’ll create a dashboard (just something quick and dirty for this illustration)
In this example, I’ve placed two grids on the layout with view filters for the two Regions I’m interested in, showing the latest day’s value for each.  When executed, it looks like this:
Source: MicroStrategy Tutorial

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="'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 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 &nbsp;, 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="'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.

You may also like...