A Sample of Sales by Month (Male vs Female) 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 (male vs femal). The chart is set to show the highest value for each of the items that is displayed as a bar shadow (light gray color).

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: "Sales By Month - Male vs Female (Contoso Sample Database)",
        width: "800",
        height: "600",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 3,
        measures: [{ title: "Sales", prefix: "$"}],
        groups: ["Male", "Female"],
        showHighest: true,
        csvType: "rowItems",
        dataCSVURL: "/charts/examples/contosoGender.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 contosoGender.csv file.