Desktops vs Laptops Sales by Country with Animated Butterfly Chart

An Animated Butterfly Chart is used to visualize the historical sales values (fictional data for demo purposes) with focus to compare two groups (Desktops vs Laptops). Animated Butterfly Charts displays maximum of 20 items in this example. Item images URL could be also defined separatelly for each item or if items are countries (like in this case), all images could be set with a simple property (countryFlags: true).

Note: Use Play/Pause to control the animation or click on the time axis to jump to a specific period. Learn more about all Animated Butterfly Chart Features.

HTML/JavaScript Code

The HTML elements and JavaScript code used in this example.

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

function showChart()
{
    let config = {
        title: "Contoso Sales Historical - Desktop vs Laptops",
        width: "800",
        height: "600",
        darkMode: true,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 3,
        countryFlags: true,
        showAxisImages: true,
        measures: [{ title: "Sales", prefix: "$"}],
        groups: ["Store", "Online"],
        csvType: "rowItems",
        dataCSVURL: "/charts/examples/contosoByCountry.csv",
    }

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

Learn more about Animated Butterfly Chart API.

Chart Data

All values for this animated bar chart example are stored in the contosoByCountries.csv file.