Animated Bar Chart

This component generates an animated bar chart where the bars race over time, increasing in range. This animated visualization is popular to visualize different entities competing or simply changing over time on a selected metric. Examples are stock prices of different companies, disease confirmed cases by country, social media activity by users, ... all of those over time.

The visualization is defined via the Generic JavaScript node using d3.js, but settings are available in the component dialogue to customize:
- the title above the chart;
- the label displaying the time and its size and position;
- bins with too small values;
- the cumulative sum over time;
- which are the 3 columns storing the metric values, the categories and the timestamps.

Additional settings can be customized by editing the workflow or even the JavaScript code: simply remove the link of the shared component and edit the nodes inside.

Options

Sum Values
Check this box to sum over time the numbers provided for each category. If this box is not checked it is assumed that the input table already aggregates over time the metric column, for example via a cumulative sum.
Hide Time Label
Check this box to hide the label displaying time units during the animation. If active, the setting above "Time Label Granularity" is ignored.
Select Bars Column
Select with this setting the categorical column listing the categories for which values are tracked over time in the animated bar chart.
Select Metric for Bars Size
Select with this setting the numerical column holding the values to be displayed over time.
Select Timestamp
Select with this setting the Date&Time column holding the timestamps to create the time series.
Minimum Amount Threshold
If a category has an aggregation sum lower than this value, then it is discarded and not represented as an additional visual bar. Raising this number increases the smoothness of the visualization and reduces the number of animations.
Time Label Right Padding
The higher this value, the bigger the distance between the time label and the right margin of the chart. If "Hide Time Label" is active, this setting is ignored. This value increases the padding proportionally to the length of the label. Default value is 20.%%00010%%00010
Time Label Font Size
The higher this value, the bigger the time label is. If "Hide Time Label" is active, this setting is ignored. Default value is 30.
Time Label Granularity
Select the time label to be displayed and updated during the animation. Please select a granularity which is also stored in the time column you provided (Date/Time/Date&Time types).
View Title
A string to be rendered above the chart as the title of the visualization. Place an empty string to not display any title.

Input Ports

Icon
The input table should provide for each row the category (to be represented as a colored bar), an integer or double value (to be represented via the size of the bar) and a timestamp (to define the time axis for the animation). If a category is missing for a given time unit the component will consider the category value to be zero at that point in time. The timestamps should be provided in the dedicated KNIME column type via the String to Date&Time node. Timestamps should be uniformly distributed in time and of identical format: if a timestamp is missing for all categories, the visualization won’t pause but it will proceed to the next available timestamp.

Output Ports

This node has no output ports

Nodes

Extensions

Links

Download

To use this component in KNIME, download it from the below URL and open it in KNIME:

Download Component
On NodePit since: 2021-09-14
Last update: 2025-01-20
Created with KNIME version: v4.6.3

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!