Inovista Animator Extension for Tableau

The Inovista Animator is a web based application that allows users to import SVG images and create intelligent animations that change their behavior based on external data.

This Tableau extension allows a user to take a data-driven animation created in the Inovista Animator and load it into Tableau. Variables in the animation can be linked directly to Tableau data values or defined as user editable properties.

In the Animator, a full range of animations are available including Movement, Rotation, Scaling, Path Animation, Text Animation, Clipping,  Masking,  Text Offsets,  Morphing and Wave Motions. Animation can also be driven by events such as mouse clicks.

Highlights


Support

For all support issues, you can contact us via email at: Inovista Animator Support

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




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

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

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

AnimTableauExport

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

tabSelectConfigure
 The Extension Popup Editor

tabExtFirstScreen


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. with the
 Paste Image Data

AnimTabPastedData
 Image Loaded

AnimTabImgLoaded.jpg


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 & 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

AnimTabPropsBack


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

AnimTabComplete


5) More Information

To create animations in the Inovista Animator, search for 'Inovista Animator' in YouTube and you will find a range of video tutorials detailing different aspects of the Animator.

See the Animator User Guide.


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