Comments

Making Responsive Tableau Dashboards

Editor's note: As part of Tableau Design Month - Part 2 we are excited to have Dwight Worley from The Journal News/LoHud.com contributing this guest blog post for us.

I have been a Tableau Desktop user for about 18 months, using a free copy of the software I received as a member of Investigative Reporters and Editors (Thanks Tableau!). The software truly impresses with how quickly even a novice user can make good-looking, powerful data visualizations. I've used it for several projects, including LoHud School Security, SBALoans and Fugitives.

Issue: How to make Tableau dashboards responsive?

But an ongoing issue for me has been how to make a Tableau viz responsive. As extensible as it is, Tableau isn't entirely mobile-friendly, meaning visualizations can not be easily reformatted by a browser to fit varying screen sizes. Visualizations will retain the size in which they were created no matter the size of the screen viewing it. That is not an ideal experience for users, who end up seeing a desktop-sized chart on a phone and have to zoom in and out or scroll around to see the full viz.

Reviewing those links I posted, you might notice a trend. In our mobile-first world, I sized them small to ensure they work on phones. In the news business, it is critical that the content we create work for all screen sizes since half or more of our daily web traffic comes mobile devices (smartphones and tablets). But this is a compromise. While doing this ensures users on all devices can see the full viz, desktop and tablet users would rightly be annoyed that half or more of their screens are empty. This is also not ideal since it greatly limits the real estate you have to play with.

Cue the late-night infomercial guy: What if there was a way to make a single Tableau project display differently on devices of all sizes?

Solution: CSS

I found the answer - well, one answer - with 20-year-old web tech: Cascading Style Sheets, or CSS.


How to implement my CSS solution

This is the project I'll walk you through (a very basic example): 2014 School Test Scores

Open that link on your smartphone. Then on your tablet and on your desktop. You will notice it is a different presentation, formatted differently for varying screen sizes. There's no wizardry involved. Basic CSS is all you need.

Step 1: Create multiple dashboards

The key is in how Tableau works. Every Tableau project, once uploaded to the company's servers, gives users an embed link for that project’s dashboard. You can drop that link on a webpage and the dashboard project will appear in a browser at whatever size it was in your project. What had not occurred to me until lightning struck was that you can create multiple dashboards with a project - each can be a different layout and each has its own embed link!

I decided to experiment. I created a viz using school test scores. I imported my data into Tableau and created three dashboards, one sized for desktop, one for tablet and one for mobile phones.

My desktop dashboard takes up the most space and has dropdowns lined up side by side.

My tablet dashboard is sized at 764 by 655. I am now dealing with smaller tablet screens so I keep the full-sized dropdowns but I stack them on top of each other instead of placing them side by side.

This next step is where my intermediate Tableau skills might have hindered me. I attempted to make a third dashboard in this project with even smaller fields for mobile but for some reason going that small affected the display of my other dashboards. They must share some global settings where changes are mirrored among them. Rather than hammer out this issue, I took the easier, more cumbersome, route. I imported my data into a separate Tableau project and made a mobile-sized dashboard, sizing it at 320 by 520, shrinking the size of the fields and using smaller dropdowns.

Step 2: Grab the embed code for all your dashboards

Once done, I uploaded both projects to Tableau and grabbed the embed links for each dashboard. From there, you can begin making your web page. Add in whatever markup you'll need (banners, title, introductory text, etc.) then place each of the embed scripts for your dashboards on the page.

Wrap each embed link inside of its own div tag and give each a name. At this stage, my page body looked like this:

(Desktop)

(Tablet)

(Phone)

Step 3: Write the CSS

I then wrote the CSS rules. I'm assuming you're familiar with CSS but basically it's the web language that applies styles and formatting to plain HTML. CSS is also able to show and hide different elements on a page based on rules you set (screen size, user interaction, etc). We'll focus on screen size.

Be sure to include a viewport meta tag, which is necessary to optimize the page for a mobile display.

< meta name="viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no" >

Running through it quickly, this basically grabs the width of a device for the browser, loads the content at its full responsive display size and does not let the user zoom in and out. That last part is not a hard and fast rule. Sometimes you will want the user to be able to zoom.

I then set the rules to tell the browser when to display each div. All three embed scripts are on the page so these rules are essential. Without them, all three embeds will always be displayed. Here's the CSS I used:

You may need to fine-tune the pixel counts for your needs.

How it all works

That’s pretty much all it takes but let me explain what is happening. When a visitor loads your page the browser is told the size of their screen. The HTML loads containing all of the scripts but only one embed (i.e. dashboard) will be shown based on the rules you set while the other two are hidden. On a screen between 320 and 763 pixels the browser will hide the tablet and desktop embeds. Since the rule doesn't hide the mobile embed, it will be the only one shown.

Note: 320 pixels is typically the smallest size you'll have to worry about. It's the size of older iPhones. Below that and you're in dumbphone/flip phone territory, which probably wouldn't be able to display any of this.

The next rule says if a device screen is between 764 to 999 pixels, hide the phone and desktop embeds. The tablet embed will then be displayed.

Lastly, for device screens of 1000 pixels or above, the rule will hide phone and tablet displays only showing the desktop version.

There it is, responsive Tableau. Very cool, right?

See the dashboard in action!

Click on the image below to see the solution in action (try it out on your desktop, tablet and phone!)

I hope this helps some of you with what can be a vexing problem If you have any questions, you can reach me on Twitter at @DwightsNews or on my website, dwightworley.net.

Comments

Making Responsive Tableau Dashboards

Editor's note: As part of Tableau Design Month - Part 2 we are excited to have Dwight Worley from The Journal News/LoHud.com contributing this guest blog post for us.
I have been a Tableau Desktop user for about 18 months, using a free copy of the software I ...

Read more...
Comments

Designing for Information on Demand

Editor's Note: It's Design Month at Tableau Public and we are thrilled to have this guest blog post from our Iron Viz Champion: John Mathis. John is a Information Management & Analytics Consultant at Slalom and blogs as The Datographer.
How complex was ...

Read more...
Comments

November is #TableauDesignMonth - Part 2

“Good design never goes out of fashion” -Holger Nielsen
With that in mind November is #TableauDesignMonth – part 2!
Good design is central to data visualization; a brilliantly designed visualisation lets people engage with your data, while a poorly ...

Read more...
Comments

Our Favorite Political Vizzes

We're wrapping up #VizTheVote politics month with a collection of visualizations we hope will inspire you to dig deep into political data and share your findings with the world with Tableau Public. Whether it's for a local town election or a national race, visualizations that showcase new insights can help digitally engage an ...

Read more...
Comments

#Indyref and Creating Pop-Up Charts in Tableau

For #VizTheVote month I wanted to take a closer look into what has arguably been one of the biggest political events this year in the UK – the Scottish independence referendum (the outcome: on 18 September 2014 Scotland voted ‘No’ and chose to remain part of Great ...

Read more...
Comments

Mapping California's Legislative Districts

Editor's note: a huge thanks to Jim Miller of The Sacramento Bee for contributing this guest blog post.
California’s campaign season might seem a little sleepy from the perspective of people in other states. There are no hot-button U.S. Senate ...

Read more...
Comments

Collecting and Joining Congressional Voting Data

A lot of people don't know this but before I entered the world of Pokemon and Hello Kitty visualizations, I actually did some serious data work. I interned at a thinktank in Arizona helping them do data analysis for their annual Congressional Report Card. We had a monster ...

Read more...
Comments

Reviziting Bush, Gore, & Florida

It’s politics month here at Tableau Public! We are preparing for Election Day in the US (November 4th people, mark your calendars!) with our #VizTheVote theme, and so we thought we would write some blog posts about visualizing voting data and election results. I wanted to ...

Read more...
Comments

Senatorial Actions

For #VizTheVote month, I found some surface level data about the 100 United States Senators – name, party, class, and website. At first, I wasn’t sure of what kind of viz to make because there were many different angles I could take. Did I want my readers to learn more about the individual senators? Or, did I find meaning in ...

Read more...
Comments

It's Politics Month! #VizTheVote

It’s politics month! With the midterm elections coming up at the beginning of November, it seemed like the perfect time to do politics month - #VizTheVote! We will feature a wide-range of politically-themed content this month, from how-to/tutorials to guest blog posts and ...

Read more...