Funnel with modified labels (keen-dataviz.js)

Modify the labels of a funnel visualization with Keen.Dataviz

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/keen-dataviz.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/keen-dataviz.min.css">
<div id="chart"></div>

CSS

#chart{
  height: 300px;
}

JavaScript

// Sample response for the funnel resource
// ----------------------------------------
const data = {
    result: [ 9873, 6768, 2215, 909 ],
    results: [
        { event_collection: "create_account" },
        { event_collection: "complete_profile" },
        { event_collection: "create_project" },
        { event_collection: "invite_teammate" }
    ]
};
var ds = new Keen.dataSet();
ds.set(["Value", results])


// Custom label map for label replacement
// ----------------------------------------
const customLabelMap = {
    "create_account"   : "Created Account",
    "complete_profile" : "Completed Profile",
    "create_project"   : "Created Project",
    "invite_teammate"  : "Invited Teammate"
};

// Create a new Keen.Dataviz instance
// ----------------------------------------
const chart = new KeenDataviz({
  container: '#chart',
  title: 'Unique Users',
  type: 'bar'
});


// Parse data and modify funnel labels
// ----------------------------------------

chart
    .data(data)
    .call(function(){
        // Updates labels w/ percentage of total
        var total = this.dataset.selectRow(1)[1];
        this.dataset.updateColumn(0, function(value, index, series){
            var diff = 100 * Number(series[1]/total).toFixed(2);
            var label = customLabelMap[value];
            return label + " (" + diff + "%)";
        });
    })
    .chartOptions({
        // Custom configurations for C3.js
        axis: {
            rotated: true,
            x: {
                type: "category",
                categories: chart.dataset.selectColumn(0).slice(1)
            }
        },
        legend: {
            show: false
        }
    })
    .render();