Funnel with modified labels (C3.js)

Modify the labels of a funnel visualization with Keen.Dataviz and the C3.js adapter

HTML

<script src="https://d26b395fwzu5fz.cloudfront.net/3.4.0/keen.min.js?date=2016-02-17"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>

JavaScript

// Sample response for the funnel resource
// ----------------------------------------
var data = {
    result: [ 9873, 6768, 2215, 909 ],
    steps: [
        { event_collection: "create_account" },
        { event_collection: "complete_profile" },
        { event_collection: "create_project" },
        { event_collection: "invite_teammate" }
    ]
};

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

// Create a new Keen.Dataviz instance
// ----------------------------------------
var chart = new Keen.Dataviz()
    .library("c3")
    .chartType("bar")
    .el(document.getElementById("chart"))
    .height(300)
    .title("Unique Users")
    .colors([ Keen.Dataviz.defaults.colors[4] ]);


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

chart
    .parseRawData(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();