Web Page Objects on Tableau Dashboards

Spice up your Tableau dashboard with a web page object showing additional web-based or other external information at your user’s fingertips

Tableau dashboards and all their built–in interactive features are a piece of art on their own.

However, in certain circumstances (i.e. if your data and visualization is suitable), you can even top this by embedding a web page object into your dashboard and a URL action to hyperlink to additional web–based information outside of your data source, depending on your data and on the user’s selection.

Google Map views of your geographical data, additional product information from the Internet, websites of other companies, content from your company’s Intranet or even folders and files stored on a file server.

Today’s post is a step-by-step tutorial how to embed web pages into your Tableau dashboard and update the views depending on user inputs. Furthermore the article includes a couple of real life examples and a discussion of the pros and cons of using this technique.

The Idea

Your dashboard hopefully visualizes all relevant information in your database or Data Warehouse you need for successful decisions. However, sometimes the data in your Data Warehouse just ain’t enough. In some cases you need additional, up-to-date information from other sources like the Internet or your company’s Intranet. Detailed data on the products of your competitors, companies’ stock prices, exchange rates, links to external documents and so forth.

The Basics: Web Page Objects and URL Actions in Tableau

What is a Web Page Object?

First and foremost, a Tableau Dashboard combines different views including the legends, the filter controls, the parameters, etc. to one interactive visual display. The views you created on your worksheets are in the focus, but you can enhance the dashboard using other objects, like a title, text boxes, images or a web object.

A web object is a fully functional Web Browser (using Microsoft Internet Explorer) which allows you to add additional information from the web, your company’s intranet or a file server.

Let’s start with the most basic example: embed a web page into your dashboard statically linking to the Tableau Software website. Go to your dashboard, double click on Web Page in the objects area at the bottom range of the dashboard window (see screenshot left) and enter the link in the subsequent dialogue box.

 

 

 

 

 

 

That’s it. Three mouse clicks and you are good to go:

Please notice that the web object is a fully functional browser, i.e. all links are working, you can enlarge images, watch videos, etc. You can navigate within the web page object using the right click menu or Internet Explorer keyboard shortcuts like the backspace key.

What is a URL Action?

A web browser on your dashboard with a static link is a nifty little feature. However, it is only the first step. Web page objects take their full effect only in combination with a URL action.

What are actions in Tableau?

In a nutshell, actions send information across different worksheets and views. If the user of your Tableau workbook clicks on a data point on any given worksheet or dashboard view, actions give you full control over what should happen on all other worksheets and views.

If you are new to actions in Tableau, you may be interested in this article: The Power of Tableau Actions.

Tableau provides actions to filter, to highlight and so called URL actions. The latter are the ones we will have a closer look on.

A URL action is a hyperlink pointing to web-based resources outside of your data source. Unlike the static link you enter when adding a web object to your dashboard (see section above), a URL action allows you to make the link variable, i.e. depending on the user input. In other words, the user will e.g. click on one product in a data table or a line representing the sales of this product over time and the web page will show additional web-based information for exactly this selected product.

All we need is a dimension containing the correct URL (uniform or universal resource locator, i.e. a link) to navigate the web browser to a specific external resource. This could be a dimension in the original data source, a dimension in a second data set brought in via data blending or a calculated field.

Defining a URL action in Tableau is a piece of cake. The next section provides a detailed step-by-step tutorial.

The step-by-step how-to

In the Visual Gallery of its website, Tableau provides a beautiful interactive visualization of real estate price development in the Seattle area: the Around the Sound Dashboard:

Geographical data in general and real estate visualizations in particular are a primer example to demonstrate how to enhance a dashboard with a web page object.

The basic idea is obvious: After clicking on a bubble on the map or on a line in one of the line charts, a Google Map view of the selected county shall be displayed in a browser object embedded in the dashboard.

The following steps will guide you through the process.

Step 1: Find out how to create the URL

First and foremost, you have to know how to create a URL from the latitude and longitude which navigates a web browser to display this location on a Google Map view. The documentation of the Google Static Maps API will provide you with all information you need.

There are dozens of optional parameters in a Google Map link, but for our purposes we only need to know that ‘ll=’ specifies the latitude and longitude and ‘spn=’ the span of the viewport.

The URL looks like this:

http://maps.google.com/maps?ll=[Latitude],[Longitude]&spn=.1,.1&t=k&hl=en&output=embed

[Latitude] and [Longitude] are the geographical measures in our data source and we set the span (the zoom factor) hardcoded to 0.1. There are some other parameters in the link, but explaining all of them would go beyond the scope of this post. Have a look at the Google Map documentations if you need something else.

Step 2: Bring the URLs to your workbook

You have three main options to bring the URLs to your Tableau workbook:

1. If you have full control over your data source (e.g. a Microsoft Excel workbook), you can simply add a column and use Excel’s CONCATENATE function or ampersands to create the URL based on the values in columns [Latitude] and [Longitude]
2. Another option would be Data Blending: create a new Excel workbook including the county names, the latitudes, the longitudes and the URL string (using an Excel function as described above). In Tableau add a data connection to this new Excel file and use Data Blending to link the two data connections.
3. Create a Calculated Field in Tableau and use the plus-sign and the STR function to create the URL string

Whichever option you prefer, let’s assume we have a new dimension called [Google_Map_URL].

Step 3: Make the URL available for the action

Add the dimension [Google_Map_URL] to the Level of Detail Shelf on all worksheets used on the dashboard.

Step 4: Add a web page object

Double click on Web Page in the dashboard window. In the subsequent Edit URL dialogue you can simply leave the URL empty and click on Ok.

Step 5: Create a URL Action

Go to Dashboard|Actions, click on Add Action and on URL. In the subsequent dialogue select all sheets in the Source Sheets area, activate Select in the Run on Action area and select the field [Google_Map_URL] after clicking on the arrow right to the URL input line:

That’s it.

5 simple steps and you are good to go:

Where is the beef? Seven real-live examples

Ok, this sounds like a nifty little feature of Tableau, but where is the beef?

I guess I don’t have a snowball’s hope in hell to cover every possible use case for this feature in a blog post. However, this section provides a couple of more examples on how to use web page objects and URL actions to enhance your Tableau dashboards which hopefully will get you started and provide some ideas.

Example 1: Google Map Views

Especially if you are analyzing geographical data, Google Map views and the option to let the user interact with the Google Map (like zooming in and out, etc.) is always worth consideration. The step by step section above already demonstrated this technique in detail. Anyway, here is another example dashboard I published in an article quite some time ago called The Power of Tableau Actions. The dashboard shows the 50 most prominent summits of the world on a map, a bar chart and the Google Map view of the selected mountain:

The technique for creating the URLs is exactly the same as described in the step by step section. However, this time the links include optimized zoom factors, specified by the parameter ‘spn’ in the URL, e.g.:

http://maps.google.com/maps?ll=27.99,86.92&spn=.429,.596&t=k&hl=en&output=embed

http://maps.google.com/maps?ll=45.83,6.87&spn=.169,.298&t=k&hl=en&output=embed

etc.

Example 2: Links to the Top Selling Books on Amazon

Of course, web page objects are not only eligible for adding Google Maps. If you are analyzing marketing or sales data or if you have to create a competitive analysis, additional web based information on your own and / or your competitors’ products can be very helpful.

The following dashboard shows a table of the bestselling 100 books between 1998 and 2010 in a table on the left side. Clicking into one row of the table displays the Amazon page of this book on the right side of the dashboard:

The data source includes the ISBN of each book ([ISBN]) and the URL action is triggered by this calculated field:

"http://www.amazon.com/gp/product/" + [ISBN]

If you don’t have the ISBNs of the books available, you could also pass through the title and the author of the book to Amazon’s search engine. The calculated field would be this:

"http://www.amazon.com/gp/search?index=books&linkCode=qs&keywords=

"+[Title]+" , "+[Author]

The according dashboard shows the Amazon search results in the web page object:

Example 3: Major League Baseball Players Profiles

Are you interested in Baseball? Baseball is a primer for visualizing sports data. However, there is so much data available that you probably will barely have all information in your database. Again, the web page object can help. Let’s say you are comparing players by performance and salaries. A link to e.g. www.baseball–reference.com can provide you with any other detail on the selected player you may be interested in:

All you need to have in your data is the player ID used in the database of baseball–reference.com, like rodrial01 for Álex Rodríguez. The URL looks like this:

"http://www.baseball-reference.com/players/r/rodrial01.shtml"

Example 4: Stock Exchange Charts and Reports

Let’s say you have several listed companies in your database and you want to display the current stock market prices, the stock charts and maybe even some documents and public statements on your dashboard. Another great use case for the web page object.

But here is even one step up: a Tableau parameter in combination with a calculated field enables you to let your user decide, which type of webpage he wants to navigate to.

Let’s take the list of the Standard & Poors 500 companies. We could either look at the actual charts (from www.StockCharts.com):

Or we navigate to the webpage with all filings of this company (from the U.S. Securities and Exchange Commission www.sec.gov):

The technique to implement this is pretty much the same as described above. However, we need a parameter and a calculated field based on this parameter.

Here is a screenshot of the parameter dialogue:

And here is the calculated field:

That’s it. One parameter and one calculated field and the user can select from two or more web resources at his fingertips.

Please be aware of the fact that changing the parameter does not trigger the URL action. You have to click on a company in the table on the left again to update the web object (see also Pros and Cons below).

Example 5: Currency Exchange Rates

Along the same lines: maybe you have a list of order amounts in different currencies. A web page object can show the latest exchange currency to any given base currency, like USD in this case:

In this example, you have an order amount of 388 Brazilian Real. After clicking into this row of the table, exchange-rates.org shows you the amount in USD and the current exchange rate.

Here is the used calculated field:

"http://www.exchange-rates.org/converter/" +

[Currency Symbol]+ "/" + [Base Currency] + "/" +STR([Value])

[Currency Symbol] is the data dimension containing the symbols (e.g. USD or EUR), [Base Currency] is a defined Tableau parameter to select the base currency and [Value] is the measure in the data source (e.g. 388 BRL).

Example 6: Wikipedia Articles

Care for more generic additional information on your dashboard? How about linking to Wikipedia? The following visualization shows a list of the United States in a table and on a map and the URL action displays the Wikipedia site for the selected state in the web object:

Here is the calculated field:

"http://en.wikipedia.org/wiki/"+REPLACE([State], " ", "_")

Please note that the REPLACE function is only available, if you are using a Tableau Data Extract.

Example 7: Folders and Documents on a File Server

Last, but not least: you are not limited to websites on the Internet. You can also link to your company’s Intranet or a SharePoint or even simply to a folder or files on a file server or your local harddisk.

This dashboard shows the folders on my local drive with all articles I published on my blog in 2011:

You see the folders on the left (one folder per blog post) and the files in the selected folder on the right. The web object can be used like a file explorer, i.e. you can directly open files by double clicking.

The URL is a simple path to a folder on my local drive in this case.

C:\Users\Robert Mundigl\Documents\Projekte blogs\01 – Clearly and Simply\B Posts published\[2011]\072 – 2011-07-18 Premier League Historical Statistics

If you are having documents related to your data which can be displayed in a web browser (like pdf), you can directly link to the files from your tables or visualizations. The following dashboard shows the Tableau Quick Start Guide documents (pdfs) stored in several folders on my harddisk:

A click into the table on the left directly shows the Quick Start Guide pdf in the web page.

The calculated field uses the prefix "file://" followed by the path and name of the files:

"file://"+[Path]+[Filename]

Something Else?

Yes, much more. The possibilities are inexhaustible. Everything that can be displayed in a Web Browser can become part of your dashboard.

In my humble opinion, one of the best Tableau blogs out there is Andy Kriebel’s VizWiz. In case you haven’t seen it yet, earlier this year Andy published an excellent post on how to use a web page object to embed a PowerPoint presentation into your Tableau dashboard using a web page object:

Tableau Tip: Embedding a Presentation in a Dashboard

Great job, Andy.

The Pros and Cons

The advantages of the described technique are obvious: it is easy and fast to implement, easy to understand, easy to use and opens a window to all kind of information outside of your data source.

However, web page objects on dashboards also come with some limitations and pitfalls:

• Web page objects require a considerable amount of real estate and real estate is definitely the most limited resource on a dashboard.
• You have to do some research on how to create the URL links, like reading the Google Map documentation or how to pass a book title to Amazon’s search engine via a hyperlink.
• URL actions work only for the first web page object on your dashboard. You can have more than one web object on a dashboard, but the URL action will always trigger only the first one.
• URL actions are limited to links that can directly be passed to the web object. You can’t use APIs or HTML code.
• Only the URL action is triggering the update of the web page. In other words, the web page will only be updated after the user clicks on one of the views defined as the source of the URL action. Changing a parameter, for instance, will not update the web page.
• Last, but not least, please forgive me stating the obvious: you need an Internet connection. If you are working offline, the web page on your dashboard will stay empty.

Download

The layout of my blog is not suitable for providing wide Tableau Public dashboards. That’s why I did not publish my example workbooks on Tableau Public and used screenshots instead. If you have Tableau Desktop available or the free Tableau Reader installed and you want to play around with the examples, here is a link to a zipped folder containing all Tableau workbooks mentioned above (except for the ones linking to folders and documents on my hard drive, since those wouldn't work for you):

Download Tableau Web Page Objects Examples (zipped folder with 8 Tableau Packaged Workbooks, 1,355K)

Summary

Web page objects in combination with URL actions are a great way of enhancing your visualizations. They are easy to implement, easy to understand, easy to use and offer the opportunity of bringing up–to–date additional information from the Internet or an Intranet to your dashboard.

However, you should always think twice before using them. Don’t use a web page on your dashboard just for the sake having one. Only use them, when information from outside of your data source will considerably increase the content and the usability of your visualization. Dashboards are made to answer questions. If additional information from the Web really contributes to the process of analyzing and understanding your data, a web page object is the way to go.

Stay tuned.