Back

Multilevel drill-down with breadcrumbs

Categorise data based on different fields + breadcrumb feature. Click to explore


Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="breadcrumb"></div><br>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var fc = new FacetChart({
        container: document.getElementById("demo"),
        data: {
            url: "/dvsl/data/pie-chart/continental-data.json",
            autoCategories: ["continent", "country"]
        },
        series: [{ data: { field: "value" } }],
        events: {
            onChartUpdate: function (event, args) {
                var activeItems = fc.getActiveItems();
                var html = "Breadcrumb = <b>All data<b/>";
                for (var i in activeItems) {
                    html += " &gt; <b>" + activeItems[i].label + "</b>";
                }
                document.getElementById("breadcrumb").innerHTML = html;
            }
        }
    });

Data

Data 
//Data too large to output
Download Data