This Power BI custom visualization 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 custom visualization 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
The chart presents a typical bar chart but offers the capability of
animating the bars through periods such as time. The bars resize and
relocate for each period.
A user can pause the animation at any point and can then restart the
animation or browse to the next or previous period.
Values are shown at the end of each bar.
A variety of properties are available to the designer which include
adjustment of point and period change durations, show/hide pause panel,
font/color editing and the number of bar items to be shown.
Click Image to View
Short YouTube Video Tutorial
Using the Visualization in Power BI
The visual is imported into Power BI like any other custom visual. The
designer needs to define data source and define 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. The visual accepts the following columns of data,
the image data is optional.
Chart Periods: This is typically although not necessarily a
time period. In the example below, years are used.
Chart Values: The values that will be plotted on each bar -
value in the example below.
Chart Items: The name of the item that will be plotted on each
bar - name in the example below.
Colors: The color to be used for each chart item - if
left blank, a random color will be used.
Source Data: Excel Sample
When the data have been loaded, use those values to create a new report.
Create Report with Dataset
2) Import the Custom Visualization
Once the data have been prepared and a new report is available in edit mode,
click the '...' icon in the Visualizations tab and either navigate to the
downloaded Bar Race Chart visual file after clicking 'Import a visual from a
file' or locate it in 'Get more visuals'.
Load the Bar Race Visual
Once loaded the screen should look like this. Note that the visual will show
the default image until at least one data item has been linked.
Loaded Bar Race Visual
3) Define the Custom Visualization Data
To setup the data links, drag the relevant data field in the 'Fields' tab to
the corresponding value for the visual.
Drag Fields to Visual Link
TIP: To stop the animation from running again each time a data
item or a property is updated,go to the format selection and open the
'Run Animation' option. Turn this off to prevent the animation and
then turn it back on when ready to view.
The chart is presenting non summary information, so each data field where
applicable should have the 'Don't summarize' option selected.
Select Down Arrow for Field
Then select 'Don't Summarize'
4) Define the Chart Properties
There are a large range of properties that can be defined in the 'Format'
section of the 'Visualizations' tab:
Run Animation: Prevents the animation from running each time an
edit is made. Turn this back on when editing has finished.
Tick Duration: The amount of time in milliseconds period of the
data will be shown. For example, 500 will be half a second and 2000 will
be 2 seconds.
TopN: Shows the 'N' biggest items sorted by value size.
Delay Duration: The amount of time in milliseconds the chart
will delay when changing the period. For example, 500 will be half a
second and 2000 will be 2 seconds.
X Axis Format: The numerical format of the values on the X
Axis. ',.0f' will show ###,###, '',.1f' - ###,###.# and so on. '.0f' -
#####, '.1f' - '#####.#' and so on.
Value Format: The numerical format of the values shown after
the bar. ',.0f' will show ###,###, '',.1f' - ###,###.# and so on. '.0f'
- #####, '.1f' - '#####.#' and so on.
X Axis Font Size: The size of the font for the X axis and
labels in pixels.
X Axis Font Family: The font family used for the X axis and
labels.
X Axis Color: The color of the X axis tick and label text.
Sort Period: Select 'a' for ascending sort, 'd' for descending
or 'none' to use the data as it arrives.
Show Panel: Select 'true' to show the pause, browse and play
panel at the bottom of the chart, 'false' to hide it.
Panel Scale: The scaled size of the pause/browse panel. For
example, 0.5 will scale to half size and 2 will double the size.
Panel Color: The color of the buttons in the pause/browse
panel.
X Label: Enter the text label for the X Axis.
Label Font Size: The size of the font for the labels and values
in the bars in pixels.
Label Font Family: The font family used f for the labels and
values in the bars.
Label Color: The color of the labels in the bars.
Value Label Color: The color of the value labels at the end of
the bars.
Period Text Font Size: The size of the text depicting the
period at the top right of the chart. All values are in pixels.
Period Text Color: The color of the text depicting the period
at the top right of the chart.
Margin Top: The margin in pixels at top of the chart.
Margin Right: The margin in pixels at right of the chart.
Margin Bottom: The margin in pixels at bottom of the chart.
Margin Left: The margin in pixels at left of the chart.
