Manual funnel with C3.js bar chart

Manually create 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" }
    ]
};

var chart = new Keen.Dataviz()
    .library("c3")
    .chartType("bar")
    .el(document.getElementById("chart"))
    .height(300)
    .title("Unique Users")
    .colors([ Keen.Dataviz.defaults.colors[4] ])
    .labels([
      "Created Account---------------",
      "Completed Profile",
      "Created Project",
      "Invited Teammate"
    ])
    .chartOptions({
        legend: {
            show: false
        }
    });


chart
    .parseRawData(data)
    .render();
chart.axis.x.tick.width=500;