Facebook
Linkedin
Twitter
Download
Contact Us
Partners
Blog
BI Platform
Kyubit BI Platform Overview
Product Videos
Product Updates
Product Documentation
Product Tutorials
Multitenant BI
Embedded BI
Planning & Budgeting
Download
FAQ
Self-Service Analytics
Self-Service Analytics with Stunning Easiness
Drill-Down Analysis & Reports Creation
Superior OLAP/Tabular Analysis Tools
Analytics Based on SQL/Excel/CSV Data
Scheduled Reports Delivery
SSAS Reporting & Analysis Solution
Animated Time-Data Analysis
Embedded Analytics
Dashboards
BI Dashboards Solution
Self-Hosted Dashboards Software
KPI Dashboards
Dashboard Analytics
SQL-Based Dashboards
GeoAnalytics
Mobile BI Dashboard Analytics
Real-time Data Monitoring Slideshow
Dashboard Tools Gallery
License
Free Personal Edition
Product Subscription License
Product Permanent License
Charts
Kyubit JavaScript Charts Library
Animated Bubble Chart
Animated Bar Chart
Animated Butterfly Chart
Free Download
License
Kyubit Charts Library
Animated Butterfly Chart with Examples
Online
creation of
Animated Butterfly Chart
Create historical data animated charts with interactive features showing the evolution of values over time.
Test with your Data
Use this form to create an Animated Butterfly Chart with a
single historical data set
you provide. Test the chart with your values with no limits. The chart will be displayed with the 'Trial' visuals and behavior during the testing.
Produce & Embed
Possibilities with online created chart:
JavasScript file to integrate to a web page.
Link to embed the chart hosted on www.kyubit.com to your web page.
Standalone HTML file for presentations.
Buy when you Like it
Once the created Animated Butterfly Chart meets your expectations, you can purchase it for production usage for
$29
and remove 'Trial' visuals and behavior. Chart properties can be altered anytime later.
Chart
Buy
Upload Chart Values
Upload the Execl/CSV file that contains data with values for the chart.
Learn more about expected data structures on the
data structure samples
page.
Upload
your Excel/CSV file with values for the chart or
Load
sample chart values.
Valid
Title
*
Chart title visible in the upper left corner.
Description
Defines the description text that is visible when moving the mouse over the title text.
Font family
*
Defines the font used by the chart.
Font Size Increase
*
Font size is auto-calculated based on the chart width and height (for best results). Still, it is possible to influence the final font size by setting the "fontSizeIncrease" property to values between -3 and 3. For example, to slightly increase the font, set the value to 1. To decrease the font size, set the value to -1.
Transition Time
*
This property controls the duration of transition between time periods during the chart animations (in seconds).
Max Items Per Transition
*
Defines the maximum number of items (bars) that will appear in each transition during the animation progress.
Dark Mode
Displays the chart in the dark mode (with dark background colors).
Thousands separator
*
Defines the thousands separator in the Excel/CSV file numeric values. The chart will use the same format to display values.
Decimal separator
*
Defines the decimal separator in the Excel/CSV file numeric values. The chart will use the same format to display values.
Measures
*
Title
Description
Prefix
Suffix
Decimal Places
Title
Description
Prefix
Suffix
Decimal Places
Title
Description
Prefix
Suffix
Decimal Places
An array of measures that define the measure features. Actual values are defined in the Data property, while here in the "measures" property we define the measure attributes. Each measure object includes a
title
, and optional
decimalPlaces
,
prefix
,
suffix
, and
description
attributes. The Animated Bubble Chart must contain 2 or 3 measures. The Prefix controls if any sign or text is to be displayed in front of each value related to the measure. The Suffix controls if any sign or text is to be displayed after each value related to the measure. The description of the measure is displayed while moving the mouse over the measure label. Measure labels are displayed on each of the chart axes.
Group 1
*
The name of the first group that is compared with the Animated Butterfly Chart.
Group 2
*
The name of the second group that is compared with the Animated Butterfly Chart.
Show Highest
Sets if the chart will display the record (highest) value for an item during the chart animation. In this way, a user can observe not only the value for the current period but also can see what was the highest value for the item during the chart animation progress.
Show Play Controls
Defines if play/pause and time axis will be displayed to control animation and transition changes.
Auto Play
Sets if the chart should immediately start with animation upon data load.
Start From Last Period
If enabled this property will set the initial display of the chart to the last time period (otherwise, it will start from the first period).
Labels Display
Show All (No overlap)
Show All
Show Leaders
Show Leaders (Top 3)
None
The property controls the display of bubble labels. The Animated Bubble Chart can display many items (bubbles). In these situations, it would not be convenient to show labels for all items as many would overlap and create a visual mess on the chart.
The default option "0" -
Show All (No overlap)
displays all items that do not overlap.
The option "1" -
Show All
forces the chart to display all labels for all items.
The option "2" -
Show Leaders
will display only the leaders (items with the highest values) for all 2 or 3 measures on the chart.
The option "3" -
Show Leaders (Top 3)
will display only the top 3 leaders (items with the highest values) for all 2 or 3 measures on the chart.
Logarithmic X axis
If enabled, the chart axis will be displayed with the
logarithmic scale
. In this case, dynamic axis scale property is automatically disabled.
Logarithmic Y axis
If enabled, the chart axis will be displayed with the
logarithmic scale
. In this case, dynamic axis scale property is automatically disabled.
Dynamic X axis scale
Controls if the chart axes scales will be
dynamic (animated)
, changing the axis scale min/max values to the currently displayed values. If the axis scale is not dynamically animated, it will display the maximum value related to all data points all the time of the animation. If the chart employs logarithmic scale or autoMinMax scale options, the animScale is automatically disabled.
Dynamic Y axis scale
Controls if the chart axes scales will be
dynamic (animated)
, changing the axis scale min/max values to the currently displayed values. If the axis scale is not dynamically animated, it will display the maximum value related to all data points all the time of the animation. If the chart employs logarithmic scale or autoMinMax scale options, the animScale is automatically disabled.
Auto Min-Max X
Controls if the axis scale will be
automatically trimmed
to focus on the data values provided. When disabled the chart axis displays a scale from 0 to max value. When enabled the axis scale will start from the value related to the minimum value of all items. When enabled the dynamic axis scale property is automatically disabled.
Auto Min-Max Y
Controls if the axis scale will be
automatically trimmed
to focus on the data values provided. When disabled the chart axis displays a scale from 0 to max value. When enabled the axis scale will start from the value related to the minimum value of all items. When enabled the dynamic axis scale property is automatically disabled.
Color Palette
Standard
Warm
Cold
Strong
Defines the preferred color palette used by the Animated Bubble Chart. To implement other color schemes use the custom palette colors property.
Custom Palette Colors
Defines the custom palette colors to be used by the Animated Bubble Chart. Hexadecimal color codes (or simple color names) separated with an empty space. If defined, it will override the colorPalette definition.
Example...
customPaletteColors: "#5B9BD5 #4472C4"
Legend (groups)
Top Right
Top Left
Bottom Right
Bottom Left
None
If the chart is using groups (grouping of items), then those groups could be displayed on the chart legend.
Country Flags
If the items on the chart are countries, use this setting to quickly set country flag images to be displayed instead of the bubbles. The item name that needs to match the country name (in English) or two-letter country code (ISO 3166). Items are represented by the images which are resized during the animation to match the third measure value proportions (using the same principles for a bubble resize). The items that do not match any country will be displayed as a bubble.
Items images
Defines the
item image
to be rendered instead of the bubble (circle) by setting the image URL. Items are represented by the images which are resized during the animation to match the third measure value proportions (using the same principles for a bubble resize). The items without images will be displayed as a bubble. Example,
item1=http://www.kyubit.com/images/image1.png;item2=http://www.kyubit.com/images/image2.png;...
Show Negative X
If the data include negative values, the chart will display a negative and a positive axis scale. In cases you wish to show only positive values and disregard the display of the negative axis scale set the showNegativeX or showNegativeY to false.
Show Negative Y
If the data include negative values, the chart will display a negative and a positive axis scale. In cases you wish to show only positive values and disregard the display of the negative axis scale set the showNegativeX or showNegativeY to false.
Click the
play
button to start the animation. Pause the animation and use the mouse wheel (or pinch gesture) to
zoom
into the values.
Select the
Fullscreen
option from the menu (upper-right) to observe the chart on the full screen.
Once the chart meets your expectations, click on the
Buy
button to use the licensed version of this chart for use in the production environment, without 'Trial' visual elements and behavior. The purchased chart will be available for quick embedding to a web page, downloadable in HTML and JavaScript files, or used as a standalone file with the web browser.
When purchasing the created chart with your data you will receive the following items:
1) HTML File
The chart and data are embedded in the
HTML file
. Anyone can open the HTML file in their web browser and use the chart and all of its features. For example, you can send the HTML file to someone by email who can open the file on his device. There are no limits whatsoever while using the created chart with the HTML file. Convenient for presentation purposes.
2) JavaScript File
The chart and data are embedded in the
JavaScript file
. To quickly embed the chart to any website or web application, you will receive the chart with your data embedded in the JavaScript file. You will also receive simple
instructions
on how to embed the chart on any web page. There are no limits whatsoever while using a created chart JavaScript file within any website or for any purpose.
3) URL and Embed HTML for a hosted chart (Optional)
You will receive a URL that opens the chart hosted on the Kyubit website (www.kyubit.com). You can decide anytime after the purchase if the chart should be hosted or not. Also, you will receive a simple HTML code to quickly embed the chart to a web page without any files.
For example...
URL >
http://www.kyubit.com/chart?240624-7TYE
Embed HTML >
<iframe width="100%" height="100%" src="http://www.kyubit.com/chart?240624-7TYE" frameborder="0"/>
4) License
The license to use the created chart (in HTML and JavaScript files) in the production environment by any user and for any purpose. Licensee information is visible when opening Menu > About form. Licensee information is provided during the payment process.
Please note: Chart properties
provided in the online chart creation process can be changed anytime later directly in the downloaded JavaScript file or HTML file. For example, you can change chart size, title, colors, or any other property value.
Chart data
(chart values) provided in the online chart creation process
CANNOT
be changed later in the downloaded JavaScript file and HTML file. Online chart creation supports only a single dataset. If you need to provide various datasets, please download and use the
Kyubit Charts Library
.
Provide this
order number
in the payment form.
Please copy and save your order number for future reference.
Order Number
Proceed to Payment
*
Chart Properties
can be changed anytime during the testing or after the purchase.
*
Chart Values
cannot be changed after the purchase. To work with multiple data sets, download and use the
Kyubit Charts Library
.
We use cookies to ensure that we give you the best experience on our website. By using our site, you acknowledge that you have read and understand our
Privacy Policy
.
Ok