Back

Pie chart - continental data + breadcrumb feature

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 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