A Sample of Sales Historical Values 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 (store vs online).

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 - Store vs Online",
        width: "800",
        height: "600",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 3,
        measures: [{ title: "Sales", prefix: "$" }],
        groups: ["Store", "Online"],
        csvType: "rowItems",
        dataCSVURL: "/charts/examples/contosoProducts.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 contosoProducts.csv file.