Animated Bar Chart Features
Learn more about all the features of the Animated Bar Chart and how to utilize chart options for the best data
visualizations and data analysis with a few clicks. This chart brings some nice-to-have features for data analysis that can be very handy while using the chart.
Play/pause & jump to the period
The play/pause button is available on the left side of the time axis to control the running bar chart animation.
At any time, move the mouse over the time axis to find the time period of interest and click on it to jump straight to that period.
While defining the chart options (API), autoPlay could be enabled to immediately start with animation upon chart loading
Click on the chart menu in the upper-right corner will stop the chart animation.
The animation speed is initially defined with chart API, but can also be changed by the user with Menu > Options > Speed selection.
Dynamic (animated) Axis Scale
By default, the Animated Bar Chart uses a dynamic axis scale,
which means the axis scale changes through the animation to match the current values
being displayed optimally on the chart area. With every time period,
the chart adjusts the axis scale for the best visual fit of displayed values.
The dynamic scale could be disabled using the JavaScript API. Also, if the chart is
using a Logarithmic scale or Trim scale options, the dynamic scale is automatically disabled.
Linear and Logarithmic Scale
The Animated Bar Chart could display values on the Linear or Logarithmic axis scale.
Should the chart exhibit items with substantial value disparities,
employing a Logarithmic scale could offer a more convenient visualization.
Each axis could have a separate scale option selected. So, for example,
the X-axis could use a Linear scale, while the Y-axis could use a Logarithm scale.
Initially, the scale option for each axis is defined using the chart JavasScript API,
while a user observing the chart can change the scale option for each axis in the Menu >
Options > Scale while using the chart.
Display Items as Images
Set the images for the Animated Bar Chart items. Each item could be defined with the image URL.
The image will be displayed on the Y-axis or after the bar element. If the items are countries, then you can simply set
countryFlags: true which will automatically assign flag images based on the item name that needs to match
the country name (in English) or two-letter country code (ISO 3166).
Performance Rankings
In a given moment a user can get a list of items ranked by a performance on a certain measure for the current time period being watched.
Just by looking at the bar chart, it is hard to say what is the list of 10 best performers ordered by certain measures.
Click on the menu > options > rankings and choose the measure to show an ordered list of best performers for the current time period.
Multilingual User Interface
Kyubit Charts Library includes a menu and some other user interface elements containing phrases in the English language by default.
Use multilingual properties of the chart to provide your own phrases in the preferred language.
Please check the chart API section for more details on setting up the custom phrases (language) for the user interface.
Fullscreen
Open the observed Animated Bar Chart in the fullscreen mode for better visual insights with the Menu >
Fullscreen option. The fullscreen chart is opened at the same time period animation was in the original chart on the page.
Anytime switch back to normal chart mode.
Download the chart as a standalone HTML file
Download the chart as a standalone HTML file that could be used outside the web page.
The downloaded chart could be anytime opened in the web browser, sent to someone within an email message, and used in various presentations.
Select Menu > Download > Download Chart to download the chart as a standalone HTML file.
All data is embedded in the HTML file, so it can be easily opened from the file system without any other dependency files.
Download the chart image
Quickly download the image of the current chart animation progress with Menu > Download > Download Image action.