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. Create a Tableau source by importing the data to create a new data source. From the data source, create a new datasheet. 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.

 Drag Fields to Details


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

 Drag Extension to Dashboard


The extension can be found in the Tableau Extension Gallery. Once an extension has been dragged to a Dashboard an 'Add Extension' popup will open. Search for 'Animator' or 'Inovista Animator' and click on the Animator extension. Another popup will open. Here select 'Add to Dashboard'.


2a) Export the Animation

In the Inovista Animator, there are two options to export the animation. Open the Tableau Extension dialog and when the data and property fields have been completed, either export the image as a JSON file or copy it to the clipboard.

 Export from Animator


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, where the animation can be imported. To import from a JSON file that has been created in the Inovista Animator, select the 'Import Animation' button and navigate to where the JSON file is stored.  

 Select Extension Configure

 The Extension Popup Editor


To paste the animation, select the 'Paste Animation' button and a text box will open. Paste the copied animation into the box and click 'OK'. If the JSON file or the pasted data is of a correct type, the image will be loaded and the popup will reopen with image data loaded.
 Paste Image Data

 Image Loaded


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

 Drag the Source Data to 'Data Field'


4) Define the Chart Properties & Background

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, choosing a color from a popup or setting a font. 

Below the properties are options to set a background and border for the extension.

 Set the Chart Properties


When ready, click the 'Save' button at the bottom. This should present a working copy of the animation.
 Set the Chart Properties


Download Samples

A number of examples are available for download. The samples include Excel data files, Inovista project SVG files, Tableau Packaged Workbooks, JSON files containing animated images and in some cases the original SVG files.

Download Samples

Short YouTube Video Tutorial