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.
