Animated Bubble Chart Features
Learn more about all the features of Animated Bubble Chart and how to utilize chart options for the best data
visualizations and data analysis with a few clicks. This chart brings some advanced features for data analysis that can be very handy while exploring many items on 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 bubble 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.
Zoom In/Out
The chart could have many items and for the best insights sometimes it takes to
zoom in on chart bubbles and values that are usually not visible enough.
At any time click on the chart's empty area and use the mouse wheel to zoom in
and zoom out chart values. On mobile devices use pinch-zoom gestures for zoom actions. The chart will be zoomed in at the exact position where the mouse was located at the moment of zooming. Zoom action allows multiple steps of zoom-in, so no values could remain hidden while observing items on the animated bubble chart.
History Line
Anytime in the chart data analysis, click on the item (bubble) and select the History Line option.
All historic values for this item will be displayed as transparent bubbles connected with a
line presenting all historic values for this item, up to the current time period.
The history line is a great visual analysis of previous values for the item displayed at once on
the same chart. An animated Bubble Chart could display multiple history lines for multiple items
on the chart at the same time.
Dynamic (animated) Axis Scale
By default, the Animated Bubble 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 Bubble 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 Values and Item Focus
To see the item values, it is enough to move the mouse over the bubble. While the mouse is over the bubble,
the label with values will be displayed. To have value labels visible all the time, click on the item of interest and
select Display Values from the context menu. Value labels could be visible for multiple items at the same time.
When the item (bubble) is clicked, all other items will be grayed. It is possible to continue with animation in this mode
and have items of interest in the color, while others are grayed to focus on the items of interest. Hold the ctrl key for multiple items selection.
Display Items as Images
Set the images for the Animated Bubble Chart items. Each item could be defined with the image URL
it will display instead of the bubble (circle) element. For the items where the image is not defined,
the value will be displayed as a bubble (circle). 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).
Compare Analysis
Visually compare two different time periods on the same Animated Bubble Chart.
In the menu, select Compare analysis and select a different time period (on the time axis)
that will be compared with the currently observed period. Compared period items will be
displayed as transparent bubbles with borders in the same color as the compared item
for the current time period. Visually, it is easy to match the same items displayed for
different time periods and make a visual comparison.
Progress Analysis
The Progress Analysis compares two time periods to see which items are leaders for the
selected period. In other words, gained the most value in the period and are marked
with the red color. The items that were poorly performed in the selected period are
marked with a blue color. The progress analysis could be done for each of the measures
on the animated bubble chart or all measures at the same time. After the progress analysis is
visualized, click on the play button that will animate the progress analysis for the selected
period.
Grouping
Items on the Animated Bubble chart could be organized in groups, where each group has its own color.
For example, countries are grouped by the continent.
Groups are visualized on the chart legend that could be positioned in any of the chart corners.
The position of the chat legend is defined with the chart API or by the user in the Menu > Options > Legend section.
Find Item
Use the Find option to find the items of interest on the Chart.
The Animated Bubble Chart could display many items and sometimes the items
we are looking for are not immediately visible. Not all labels are displayed always
if items overlap each other. In such cases, use Menu > Options > Find action to find the
first item that matches the provided text.
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 bubble 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 Bubble 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.