Back

Pie chart - continental data + breadcrumb feature

Pie chart where data is categorized per continent, and drill down reveals values per each country, and then years. 'Breadcrumbs' display the current filter state - each 'onChartUpdate' event activates 'getActiveSlices', which is then displayed as HTML text above the chart.


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 chart = new PieChart({
        container: document.getElementById("demo"),
        data: {
            url: "/dvsl/data/pie-chart/continental-data.json",
			autoCategories: ["continent", "country"]
        },
        events: {
            onChartUpdate: function(event, args) {
                var activeItems = chart.getActiveSlices();
                var html = "Breadcrumb = <b>All data<b/>";
                for (var i in activeItems) {
                    html += "> <b>" + activeItems[i].data.name + "</b>";
                }
                document.getElementById("breadcrumb").innerHTML = html;
            }
        }
    });

Data

Data 
//Data too large to output
Download Data