Inovista Bar Race Chart for Tableau

This Tableau extension is based on the D3 implementation of the 'Bar Race Chart' animation. This visualization allows a designer to create a bar chart type animation that progresses through a range of periods, typically dates, in the chart in addition to allowing a user to pause the animation and browse through the various data periods.

This extension was generated by the Inovista Animator. A custom image is loaded into the Animator where additional animations can be added, the resultant image is then exported as a Power BI visual.


Highlights


Click Image to View Demo

pbieq

Short YouTube Video Tutorial




Using the Extension in Tableau

The visual is imported into Tableau like any other extension. The designer needs to define data source and define the extension's properties as required.

1) Data Sources

The data source can, of course, be a database, a text file or any option that Tableau supports. The extension accepts the following columns of data, the image data is optional.
 Source Data: Excel Sample

PBIBarChartData


Create a Tableau source by importing the data to create a new data source. From the data source, create a new datasheet. In this case, we do not want summary information, we want to make use of each row of data, so convert the measure columns into dimensions. Then drag each of the required data items onto the 'Details' box. This will create a strange looking data sheet, however, this sheet will not be visible.

 Don't Summarize Data

tabMeasureToDim
 Drag Fields to Details

tabCreateDataField

2) Load the Extension

Once the data have been prepared, create a dashboard and then drag the datasheet that has just been created onto the canvas. Select the 'Layout' tab at the top left and then select the 'Floating' checkbox and set the width and height to 1 pixel. This will effectively make the datasheet invisible. Re-select the 'Dashboard' tab, locate the 'Extension' option and drag it onto the canvas.

 Size the Datasheet

tabWksheetSize
 Drag Extension to Dashboard

tabDragWksheet


After the extension has been dropped onto the canvas, Tableau will load a popup asking you to 'Choose an Extension'. You should already have downloaded a 'trex' file representing the Bar Race extension. Navigate to this file and select it. This will load the extension and present the introduction screen.
 Select Trex File

tabExtPopup
 Extension Introduction Screen

tabExtFirstScreen


3) Define the Extension

To edit the extension, locate the arrow at the top of the extension, either on the right or left hand side. Click on it and select 'Configure'. This will open the extension popup editor, which will allow the mapping of data values as well as setting the chart properties.

 Select Extension Configure

tabSelectConfigure
 The Extension Popup Editor

tabOpenPopup


In the popup and under 'Worksheets', select the sheet that will be used as a data source. This will populate the data fields in the mapping section below. Drag the relevant fields from the data on the left to the corresponding 'Data Field' column on the right. To keep a column as its default value, drag the '<Default Value>' option on the left to the 'Data Field' or just leave it in its original state.

 Select Extension Data Sheet

tabSelectDataSheet
 Drag the Source Data to 'Data Field'

tabDragDataField


4) Define the Chart Properties

In the popup, scrolling down below the data mapping section is the section where property values can be set. In this section, edit the properties by entering text, selecting a dropdown value or choosing a color from a popup. Properties can be used to change labels, fonts, the sort order, animation time, number formats, panel visibility and chart margins. A full list of properties is shown below.
 Set the Chart Properties

tabSetProperties

5) More Information

A YouTube video is available that presents the above process with examples, see Bar Race Chart for Tableau.

You can find out about the Animator at Inovista.com.