If the viz below does not load, please click here.
Recently I came upon a need to be able to reset many parameters to their default value, without resetting any filters that have already been applied. Of course this can be accomplished a couple of different ways: pausing the dashboard and resetting each parameter manually or resetting each parameter one by one with dashboard updates in between. Neither of these options are satisfactory. You could also reset the dashboard to its published state, but that breaks the requirement for not resetting filters.
I'll note that this is a use case that would rarely be brought up, but there are a few instances where I think it would be useful. This demo will cover the second bullet point..
On the left you should see a Tableau dashboard with two buttons above it. These buttons were created using CSS and are being controlled using Tableau's JavaScript API. The exact code used to create this application is on the right hand side. Normally I wouldn't embed CSS and JavaScript right into the HTML, but this blog required all the code to be in one file... oh well.
This dashboard covers all of the requirements mentioned in the initial paragraph. One can adjust the filters in the top left corner, turn on/off parameters to control which groups are added to the lines in the line chart, and reset all parameters to their default value without reverting the filters. Pretty cool huh?
I'm hoping that the code is fairly self explanatory as I don't have enough time to dive into every line... feel free to ask questions if not! Here are a few basics..
Recently I came upon a need to be able to reset many parameters to their default value, without resetting any filters that have already been applied. Of course this can be accomplished a couple of different ways: pausing the dashboard and resetting each parameter manually or resetting each parameter one by one with dashboard updates in between. Neither of these options are satisfactory. You could also reset the dashboard to its published state, but that breaks the requirement for not resetting filters.
I'll note that this is a use case that would rarely be brought up, but there are a few instances where I think it would be useful. This demo will cover the second bullet point..
- When using parameters to weight/rank measures
- When using parameters to group together dimensions for comparative purposes
- When a custom view is saved for specific users with many filters applied, but parameters still require adjustment for analytic purposes
On the left you should see a Tableau dashboard with two buttons above it. These buttons were created using CSS and are being controlled using Tableau's JavaScript API. The exact code used to create this application is on the right hand side. Normally I wouldn't embed CSS and JavaScript right into the HTML, but this blog required all the code to be in one file... oh well.
This dashboard covers all of the requirements mentioned in the initial paragraph. One can adjust the filters in the top left corner, turn on/off parameters to control which groups are added to the lines in the line chart, and reset all parameters to their default value without reverting the filters. Pretty cool huh?
I'm hoping that the code is fairly self explanatory as I don't have enough time to dive into every line... feel free to ask questions if not! Here are a few basics..
- The style section is completely optional.. I just happen to like ghost buttons. If you omit the style, you would still be able to create buttons that perform Tableau functions, they will just look like they came from Windows 95.
- If you do choose to use CSS to create nicer looking buttons, you can actually float them anywhere you would like on the screen, including on top of the viz. This would almost create the illusion of a floating dashboard object.
- The link to the Tableau debug file will change if you want to deploy something like this on your own Tableau Server and depending on which version of Server you are using.
- You can see that the button definitions have an onclick action that refers to a JavaScript function defined later in the code which resets our blue or orange parameters.
- Also note that any function you can create using the JavaScript API could be weaponized using custom buttons. In theory.. you are creating a custom toolbar with functions that the built-in toolbar lacks.
- Download the workbook to see the setup of the dashboard, parameters, and chart.
|
<html>
<head> <title>Shipping Cost Configurator</title> <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.debug.js"></script> <style media="screen" type="text/css"> .ghost-button-border-color-blue { font-family: 'Segoe UI'; font-size: 15px; display: inline-block; width: 155px; padding: 13.5px; color: #1f77b4; border: 3px solid #aec7e8; text-align: center; outline: none; width: auto; text-decoration: none; transition: border-color 0.3s ease-out, color 0.3s ease-out; } .ghost-button-border-color-blue:hover, .ghost-button-border-color-blue:active { color: #1f77b4; border-color: #1f77b4; transition: border-color 0.4s ease-in, color 0.4s ease-in; } .ghost-button-border-color-orange { font-family: 'Segoe UI'; font-size: 15px; display: inline-block; width: 155px; padding: 13.5px; color: #ff7f0e; border: 3px solid #ffbb78; text-align: center; outline: none; width: auto; text-decoration: none; transition: border-color 0.3s ease-out, color 0.3s ease-out; } .ghost-button-border-color-orange:hover, .ghost-button-border-color-orange:active { color: #ff7f0e; border-color: #ff7f0e; transition: border-color 0.4s ease-in, color 0.4s ease-in; } </style> </head> <body> <a class="ghost-button-border-color-blue" onclick="resetAGroup()">Reset Blue Group </a> <a class="ghost-button-border-color-orange" onclick="resetBGroup()">Reset Orange Group</a> <div id='viz'></div> </body> <script> window.onload=function() { var vizDiv = document.getElementById('viz'); var vizURL = "https://public.tableau.com/views/ShippingCostConfigurator_0/ShippingCostConfigurator?:embed=y&:display_count=yes&:showVizHome=no"; var options = { hideToolbar: true }; viz = new tableauSoftware.Viz(vizDiv, vizURL, options); }; function resetAGroup() { workbook = viz.getWorkbook(); workbook.changeParameterValueAsync('AJumboBox', 'Off'); workbook.changeParameterValueAsync('AJumboDrum', 'Off'); workbook.changeParameterValueAsync('ALargeBox', 'Off'); workbook.changeParameterValueAsync('AMediumBox', 'Off'); workbook.changeParameterValueAsync('ASmallBox', 'Off'); workbook.changeParameterValueAsync('ASmallPack', 'Off'); workbook.changeParameterValueAsync('AWrapBag', 'Off'); viz.refreshDataAsync(); }; function resetBGroup() { workbook = viz.getWorkbook(); workbook.changeParameterValueAsync('BJumboBox', 'Off'); workbook.changeParameterValueAsync('BJumboDrum', 'Off'); workbook.changeParameterValueAsync('BLargeBox', 'Off'); workbook.changeParameterValueAsync('BMediumBox', 'Off'); workbook.changeParameterValueAsync('BSmallBox', 'Off'); workbook.changeParameterValueAsync('BSmallPack', 'Off'); workbook.changeParameterValueAsync('BWrapBag', 'Off'); viz.refreshDataAsync(); }; </script> </html> |
RSS Feed
