Shinytableau - How To Create Tableau Dashboard Extensions With R Shiny

If you're in the business of business analytics, you know what Tableau is. It’s one of the top drag-and-drop BI tools for analyzing and visualizing data. Pretty much anyone can use it to make decent dashboards. But here’s the problem - it’s quite limiting for developers with a background in R and R Shiny. After all, Tableau was intended for business users, not hardcore developers. If you still like using Tableau, or your client insists on it - fear not. There's something Shiny over the horizon! RStudio recently announced <code>shinytableau</code> - an <a href="https://rstudio.github.io/shinytableau/" target="_blank" rel="noopener noreferrer">R package</a> that lets you create Tableau dashboard extensions using R and R Shiny. We’ve taken it for a test ride, and boy is it good. Today’s article will show you how to get started and how to create your first extension in minutes. We assume you have Tableau installed. If not, please download a <a href="https://www.tableau.com/products/trial" target="_blank" rel="noopener noreferrer">14-day trial version</a>. <blockquote><strong>Looking for an in-depth comparison between Tableau and R Shiny? <a href="https://appsilon.com/tableau-vs-r-shiny/" target="_blank" rel="noopener noreferrer">This article will show you which Excel alternative is right for you</a>.</strong></blockquote> Table of contents: <ul><li><a href="#getting-started">Getting Started With shinytableau - Project Setup</a></li><li><a href="#create-extension">How To Create a shinytableau Extension with R and R Shiny</a></li><li><a href="#tableau">How To Use a shinytableau Extension in Tableau</a></li><li><a href="#conclusion">Conclusion</a></li></ul> <hr /> <h2 id="getting-started">Getting Started With shinytableau - Project Setup</h2> First things first - you’ll need a dataset. The <a href="https://gist.githubusercontent.com/seankross/a412dfbd88b3db70b74b/raw/5f23f993cd87c283ce766e7ac6b329ee7cc2e1d1/mtcars.csv">MTCars dataset</a> is built into R, but not into Tableau. Download it from the given URL and store it someplace safe. <img class="size-full wp-image-8958" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fb717100cb0776cec3_1-3.webp" alt="Image 1 - MTCars dataset in CSV format" width="2588" height="1550" /> Image 1 - MTCars dataset in CSV format Next, you’ll have to create a new RStudio Project. Simply navigate to <em>File - New Project…</em>, and a window like the one below should appear: <img class="size-full wp-image-8959" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fb93d27c1f5c8d1eec_2-3.webp" alt="Image 2 - Creating a new RStudio project" width="2146" height="1564" /> Image 2 - Creating a new RStudio project Go with the <em>New Directory</em> option and save the project anywhere on your machine. We’ve named ours <code>MTCarsShinyTableau</code>, but you’re free to be more creative. <img class="size-full wp-image-8960" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fcbc018ec42e937744_3-3.webp" alt="Image 3 - Creating a new RStudio project (2)" width="2146" height="1564" /> Image 3 - Creating a new RStudio project (2) Once you click on <em>Create Project</em>, you’ll see the R console open up. We’ll install the libraries and do the initial setup here. The <code>shinytableau</code> package isn’t available on CRAN just yet, so you’ll have to install it from GitHub. Doing so requires a <code>remotes</code> package. Use the following snippet to install both: <pre><code class="language-r">install.packages("remotes") remotes::install_github("rstudio/shinytableau")</code></pre> Let it do its thing, and once done, proceed to the final setup step - <strong>creating a manifest file</strong>. It’s required for all R Shiny Tableau extensions and will contain details about your extension, such as the version number, name, description, author, and so on. To start, run the following line from the R console: <pre><code class="language-r">shinytableau::yaml_skeleton()</code></pre> A window like this should pop up: <img class="size-full wp-image-8961" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fc2409d7504a170e60_4-3.webp" alt="Image 4 - YAML skeleton for the shinytableau extension" width="2146" height="1564" /> Image 4 - YAML skeleton for the shinytableau extension You can leave everything as-is, but it’s recommended to change the defaults so your extension is somewhat unique. We’ve changed the extension ID, name, description, author, organization, and website: <img class="size-full wp-image-8962" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fdd57109a61a5aa8d8_5-2.webp" alt="Image 5 - YAML skeleton for the shinytableau extension (2)" width="2146" height="1564" /> Image 5 - YAML skeleton for the shinytableau extension (2) And that’s it - click on <em>Save</em> and you’re good to go! You’ll create your first extension in the following section. <h2 id="create-extension">How To Create a shinytableau Extension With R and R Shiny</h2> A <code>shinytableau</code> is just a slightly modified R Shiny application. It still has the same UI and Server functionality but also adds support for configuration UI and configuration Server, which are specific to <code>shinytableau</code>. We’ll explore them one by one. To start, create a new R file for the extension - we’ve named ours <code>app.R</code>. The first things you should do in any R Shiny <code>shinytableau</code> extension is to declare the file type, import packages, and connect to the previously created manifest file. <script src="https://gist.github.com/darioappsilon/0db9dd1aad75cce61cd32f5a583eaa90.js"></script> The file type is just a hint to RStudio that we’re working with an R Shiny app, even though it won’t follow the structure of a Shiny application. Next, let’s discuss the UI. We’ll have a single UI element displaying a ggplot-based scatter plot between two variables from the MTCars dataset. The <code>brush</code> parameter is here to enable creating and moving a selection box on your chart. <script src="https://gist.github.com/darioappsilon/acafa98b4d414c1e3a63c2438ea73238.js"></script> Onto the Server now. You’ll need to wrap the data inside the <code>reactive_tableau_data()</code> function. We’ve gone with the ID of <code>data</code>, but you can use any, just make sure to change the ID in other calls as well. The Server function renders a ggplot-based visualization based on the data and columns selected. You can access the columns via the <code>tableau_settings()</code> function by passing in the parameter names. We’ll set these later in the app, but for simplicity, we’ve gone with <code>colX</code> and <code>colY</code>. Finally, you can render the plot using the reactive dataset and a promise. <script src="https://gist.github.com/darioappsilon/0846ae9b498b8709aa1e844ed44d3d02.js"></script> Let’s discuss the Config UI now. It’s specific to <code>shinytableau</code>, and contains a list of elements displayed in Tableau while configuring the extension. We’ll show a UI element for choosing the datasheet, a variable selection element that will contain our two variables for the chart and a table output that lets you preview the columns you’ve selected. <script src="https://gist.github.com/darioappsilon/80851bb0dbc0076c57c5d352cd7ca6b6.js"></script> Almost there! What comes next is the Config Server. It handles the logic of the previously discussed UI. First things first, we’ll use the input validator <code>iv</code> to specify our <code>colX</code> and <code>colY</code> attributes that are required. We’ll then choose a data sheet and display a preview of the dataset used and the columns selected. The magic happens inside the <code>varSelectionUI</code> rendering. There you can specify the dropdown menus that will have the dataset’s column names as possible choices. We’ll have two dropdowns, as we need to choose values for both X and Y axes. Finally, we’ll declare an inner function that updates the tableau settings with the selected dataset and columns. <script src="https://gist.github.com/darioappsilon/5d71c2949559fd1fc60732067d8c65a3.js"></script> It’s a lot to digest at once, so take your time. You could completely remove the input validator rules and the preview data if you aim for less code overall, but doing so would take a toll on the user experience. Finally, let’s connect everything declared above into a single function. It’s called <code>tableau_extension()</code> and it’s an alternative to <code>shinyApp()</code> from your regular R Shiny applications. You’ll have to declare a couple of additional parameters, as there are more elements in the script: <script src="https://gist.github.com/darioappsilon/a4177cc774905f82166469e237e21816.js"></script> We’ve tried to simplify every step needed to create a <code>shinytableau</code> extension. If you got stuck in the process, you can simply copy/paste the entire <code>app.R</code> from below: <script src="https://gist.github.com/darioappsilon/59a94b4430a776b59bfcc76be8feb093.js"></script> And now comes the part you’ve been waiting for. Simply click on the <em>Run App</em> button, and a window like the one below should pop up: <img class="size-full wp-image-8963" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fe54af827f261e3f17_6-2.webp" alt="Image 6 - Running a shinytableau extension" width="1874" height="1550" /> Image 6 - Running a shinytableau extension From here, click on the <em>Download</em> button and save the <code>.trex</code> file somewhere you’ll remember. <img class="size-full wp-image-8964" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266fe99ae053bb708c503_7-1.webp" alt="Image 7 - Saving the .trex file" width="1824" height="1120" /> Image 7 - Saving the .trex file And that’s it - the extension was successfully created and saved. Let’s see how to use it in Tableau next. <h2 id="tableau">How To Use a shinytableau Extension in Tableau</h2> With all of the coding out of the way, you can fire up Tableau and connect to the MTCars dataset (<em>Connect menu - To a File - Text File</em>). <img class="size-full wp-image-8965" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b266ff0b9b8220e468e343_8-2.webp" alt="Image 8 - Connecting to the MTCars dataset with Tableau" width="2764" height="2148" /> Image 8 - Connecting to the MTCars dataset with Tableau Go to <em>Sheet 1</em> and create a dummy data visualization as you normally would. The one below displays a scatter plot between the horsepower on the X-axis, and miles per gallon on the Y-axis. <img class="size-full wp-image-8966" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b267005334ffd64950f245_9-1.webp" alt="Image 9 - Horsepower vs. miles per gallon scatter plot" width="2764" height="2148" /> Image 9 - Horsepower vs. miles per gallon scatter plot Create a new dashboard by clicking on the second icon to the right of <em>Sheet 1</em> in the bottom tab menu, and drag <em>Sheet 1</em> to the dashboard view. <img class="size-full wp-image-8967" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2670017c4b0497b7c42c3_10-1.webp" alt="Image 10 - Creating a new dashboard in Tableau" width="2764" height="2148" /> Image 10 - Creating a new dashboard in Tableau Let’s now use our <code>shinytableau</code> extension to create the same visualization. First, drag the <em>Extension</em> object from the <em>Objects</em> panel just below the visualization. It should automatically create a 50:50 vertical split for you. <img class="size-full wp-image-8968" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b26701bc120c66ebeafb0a_11-1.webp" alt="Image 11 - Creating a placeholder for the extension" width="2764" height="2148" /> Image 11 - Creating a placeholder for the extension A modal window should immediately pop up. It lets you choose from one of the built-in extensions, but it also allows you to use your own. You’ll see the <em>Access Local Extensions</em> option in the bottom left corner. Click on it. <img class="size-full wp-image-8969" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d4cbc92cb2a06ec09558_6d6ae7fb_12.webp" alt="Image 12 - Loading a custom extension" width="1896" height="1378" /> Image 12 - Loading a custom extension From here, navigate to the <code>.trex</code> file created earlier and open it. <img class="size-full wp-image-8970" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b267020b9b8220e468e598_13.webp" alt="Image 13 - Loading a custom extension (2)" width="1824" height="1120" /> Image 13 - Loading a custom extension (2) You’ll see an additional modal window asking if you want to allow the third-party extension to extend the capabilities of Tableau. Click on <em>OK.</em> <img class="size-full wp-image-8971" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b26703b8f56019e5df07fb_14.webp" alt="Image 14 - Allowing third-party extensions" width="1296" height="602" /> Image 14 - Allowing third-party extensions The extension will appear in its placeholder now. You can see the title and the version printed on the top, and a warning message just below it telling you the extension isn’t configured yet. <img class="size-full wp-image-8972" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d4cd3e4ce096530657f4_c3e81caf_15.webp" alt="Image 15 - Unconfigured shinytableau extension" width="2764" height="2148" /> Image 15 - Unconfigured shinytableau extension To configure the extension, click on the down arrow button in the top right corner of the placeholder and choose <em>Configure.</em> <img class="size-full wp-image-8973" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d4ce8682e8fbf3724e47_34ae5024_16.webp" alt="Image 16 - Options for the extension placeholder" width="476" height="540" /> Image 16 - Options for the extension placeholder This is where the Config UI and Config Server show their purpose. You’re now presented with a configuration window showing you the worksheet selection option, dropdown menus for X and Y axes, and the dataset preview below them. You’ve specified these in the Config UI, and coded the logic in the Config Server. <img class="size-full wp-image-8974" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b26707ef69c7c93dc46d34_17.webp" alt="Image 17 - Configuration modal window" width="1424" height="1080" /> Image 17 - Configuration modal window Select <em>Sheet 1</em> as the worksheet and <em>Hp/Mpg</em> as the axes values. <img class="size-full wp-image-8975" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b26708717100cb0776dac9_18.webp" alt="Image 18 - Configuration modal window (2)" width="1424" height="1080" /> Image 18 - Configuration modal window (2) And that’s it - click on <em>Apply</em> and <em>OK</em> and you’re set. <img class="size-full wp-image-8976" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b267098533723b2a959ebe_19.webp" alt="Image 19 - Final Tableau dashboard" width="2764" height="2148" /> Image 19 - Final Tableau dashboard You have to admit creating custom extensions is easier than it sounds. It took only 90 lines of code to implement a fully customizable scatter plot. Of course, Tableau can create scatter plots for you, but this was just a single example of what you can do with <code>shinytableau</code>. The door to more customizable Tableau dashboards is opening with Shiny. You have the ability to do more while giving your clients the comfort and familiarity of Tableau. <hr /> <h2 id="conclusion">Conclusion</h2> You’ve learned a lot today, from the basic intuition behind custom <code>shinytableau</code> extensions to creating and testing the first one from scratch. It’s a lot for a single article, sure, but we wanted to provide you with a central place for getting started, besides the <a href="https://rstudio.github.io/shinytableau/" target="_blank" rel="noopener noreferrer">documentation</a>. We recommend you work on the following homework challenges to reinforce your knowledge of <code>shinytableau</code>: <ul><li>Make an extension that plots a histogram of a single variable</li><li>Tweak the visuals of the plot</li><li>Allow user to tweak title and axis labels</li></ul> For more FAQ, general advice, and "best practices" we encourage you to go to <a href="https://community.rstudio.com/c/r-admin/bi/63" target="_blank" rel="noopener noreferrer">RStudio's BI community board</a>. Be sure to report any technical issues to the<a href="https://rstudio.github.io/shinytableau/" target="_blank" rel="noopener noreferrer"> Github repo</a>. For customer issues, we recommend you reach out to the RStudio or Tableau customer support. Feel free to share your results with us on Twitter - <a href="https://twitter.com/appsilon">@appsilon</a>. We’d love to see what you’ve come up with. <blockquote>Do you find R Shiny inspiring? <a href="https://appsilon.com/how-to-start-a-career-as-an-r-shiny-developer/">Here’s everything you need to start a career as an R Shiny developer</a>.</blockquote>