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 Power BI visual allows a user to take a data-driven animation
created in the Inovista Animator and load it into Power BI. Variables in
the animation can be linked directly to Power BI 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
This extension will take any animation created in the Inovista
Animator and convert it into a Power BI component. Animations may be
charts or infographics driven by Power BI data or simply decorative
items such as moving logos.
The animations can be exported from the Animator as JSON files or they
can be copied to the clipboard. In Power BI, the JSON file can be loaded
or can be pasted directly from the clipboard.
In the Animator, all aspects of the animation can be modified by
creating variables, for example how much of an image to display to
simulate a bar chart. Each variable can be defined as either a data item
or property. In Power BI, data items are linked to Power BI data and
properties can be set by the user. Examples of properties may be fonts
or colors.
Once defined, data values can be updated by filters or any data
update.
A number of examples are available for download. The samples include
Excel data files, Inovista project SVG files, Power BI projects, JSON
files containing animated images and in some cases the original SVG files.
The visual is loaded into Power BI like any other visual. The designer needs
to define data source values and the visual's properties as required.
1) Data Sources
The data source can, of course, be a database, a text file or any option
that Power BI supports. Once the data have been selected, create a new
report based on that data.
Report with Dataset
2) Import the Animator Visual
Once the data have been prepared and a new report is available in edit mode,
click the '...' icon in the Visualizations tab and select 'Get more visuals'. Then search for 'Animator'.
Select the 'Animator for Power BI' visual that should be in the list of visuals.
Once the visual is loaded, the Animator Visual icon should be visible at the
bottom of the Visualizations.
Load the Visual
Loaded Visual
3) Setup the Animator Visual
Click on the icon to load the visual. It will initially show an entry screen
with an edit and a help button. Select at least one data item in the Fields
section before clicking on the 'Edit' button even if there are no data links
required. Power BI needs this to function correctly.
Initial Visual View
4) Export Image from the Animator
In the Inovista Animator with the relevant project opened, there are two
ways to export the image. Both are done in the Power BI popup which is
opened in the 'Image Project -> Export Files' section by clicking
'Power BI Visual'.
In the popup, select the 'Export JSON File' button to export the image as
JSON or click the 'Copy' button to copy the image data to the clipboard.
Initial Visual View
5) Import the Animated Image
There are 2 options available to import the animated image. If the image was
exported as a JSON file in the Animator, select the 'Import Animation'
button and navigate to the JSON file then select it. To paste the image data
that was copied in the Animator, select the 'Paste Animation' button and
paste the data on the clipboard directly into the text box. When ready,
select the 'OK' button at the bottom to load the image.
Load JSON
Paste Image Data
6) Link Data and Set Properties
When the image has been loaded, the variables in that image will listed
under the 'Data Field' header. Drag a Power BI data value to each of the
fields or drag '<Default>' to the field to use the value defined in
the Animator.
Below the data section, the editable properties are found. Their initial
values will be the default. Edit any of these as needed.
If tooltips are to be shown, select the checkbox under the 'TTip' column
to include that field's data in the tooltip.
Drag Data and Set Props
7) Run the Visual
When the data values, properties and tooltips(if required) have been set,
select the 'OK' button at the bottom of the popup dialog. The functional
animation should be visible. If a filter has been created, the animation
should run and update every time the filter value is changed.
Completed Visual
8) 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.
