Highlight Stories with the JavaScript API

Last week data-dare.com put out a challenge to the Tableau community to create a story without using story points. This is sure to be an interesting challenge, with many new/alternative ways coming to light. Tableau’s story point feature is nice, but can feel a bit clunky

at times, so I am excited to see what we all come up with!

For Makeover Monday #18, Rob Radburn created a viz that read more like a news story. Rob used a combination of well written paragraphs and floating sheets that drove the story for the user. I wouldn’t be writing about this if I didn’t think it was a great idea, but I knew it could be extended using Tableau’s JavaScript API and wanted to give it a go. Using the JavaScript API provides a cleaner experience, with less worries about rendering issues on floating objects. This is also being written, as with many of my other JavaScript entries, in hopes that Tableau could see the value of integrating these extension into Desktop however difficult that may be.

Click the image to see my attempt at building a “Highlight Story” using the JavaScript API.
Read on for how it was done, and how you can do this yourself!


If you just want the code.. here you go! If not, let’s start working through the code top to bottom..


The css can easily be modified to fit your project, and will likely need to be. In Tableau terms, think of the style below as defining two vertical containers in a dashboard sized 900px wide and unlimited height. The left container houses our paragraphs and highlighters, and takes up 50% of our dashboard. The right container holds our viz and takes up the remaining 50%. Full disclaimer… I Google EVERYTHING in regard to css… so while I could assist in changing a few things, Google is your best bet for custom modifications to this style. Below the left and right containers is where we are defining how our highlighters will look. Theoretically you can style text in HTML however you want, but I thought these ghost buttons stood out nicely and helped users understand to click or hover.


Building paragraphs with highlighters

Moving down the code you will come to this section which is where we are typing out our story, and styling specific text to use our ghost buttons and run a JavaScript function. The image below is notated and will hopefully drill home the general idea. In the example below, I want to use the word “Louisiana” as a highlighter. For that text I am giving it the class of orangeButton, and telling that button to run the selectLouisiana() function on a mouse click or mouse hover. Rinse and repeat for all of your highlighters!



The image below is an integral part of any JavaScript API project. Use the code provided, but be sure to sub in your Tableau Public URL in the var vizURL section. Hint: adding showVizHome=no to the end of your URL provides a better viewing experience IMO.



This is what you are here for. I know… you were expecting more complexity, my apologies if this is just too easy! Each of our highlighters is essentially built the same way: copy one of the function, name it uniquely, sub in your target worksheet, provide your dimension name, and tell it what field to highlight. Sound familiar? We essentially just went into the Actions menu on a dashboard and defined a highlight action!


Hopefully the code is concise and simple enough to scale. If we start seeing more use of the JavaScript API and its great extension capabilities, we will inevitably see this integrated into Desktop as time goes on. Let me know if you have any questions or would like some quick assistance integrating this into one of your projects!

Thanks for reading,


Leave a reply:

Your email address will not be published.

Site Footer