Europe, GDP Per Capita, Fertility Rage and Population Historical Values with Animated Bubble Chart

The GDP Per Capita, Fertility Rate, and Population historical values are visualized with the Animated Bubble Chart. The chart employs linear scale on both X and Y axis. Each item on the chart could be set with its own image. In case with countries, it is sufficient to set countryFlags: true. Based on the country name (in English) or 2-letter abbrevation, the flag image will be automatically set.

Note: Use Play/Pause to control the animation or click on the time axis to jump to a specific period. At any time click the pause button and Zoom In/Out (mouse wheel or pinch-to-zoom) the chart. Mouse over a specific item to see its values. Click on an item and choose History Line to see all previous (historical) values of the same item on the same chart. Learn more about all Animated Bubble Chart Features.

HTML/JavaScript Code

The HTML elements and JavaScript code used in this example.

...
<div id="chartDiv"></div>
...

function showChart() {
    let config = {
        title: "Europe GDP Per Capita, Fertility Rage and Population Historical Values (1990-2021) with Flags",
        description: "Example of the chart with images instead of bubbles. European countries by  GDP Per Capita, Fertility Rage and Population Historical values with flags",
        width: "800",
        height: "600",
        numberOfDecimals: 2,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 1,
        autoPlay: false,
        countryFlags: true,
        measures: [{ title: "GDP Per Capita", prefix: "$" }, { title: "Fertility Rate" }, { title: "Population" }],
        dataCSVURL: "/charts/examples/Europe-gdp-fert-pop.csv"
    }

    kyubitTimeCharts.showBubbleChart("chartDiv", config);
}

Learn more about Animated Bubble Chart API.

Chart Data

All values for this animated bubble chart example are stored in the Europe-gdp-fert-pop.csv file.

Get started with Kyubit Charts Library

Begin your journey with the Kyubit Charts Library. Download it now and evaluate the charts using your own data. Seamlessly integrate the Kyubit JavaScript library into your website or web application—it's as simple as adding a single JavaScript file to your page. Get started with stunning chart visualizations! 🚀