Pie chart - continental data + breadcrumb feature
Categorise data based on different fields + breadcrumb feature. Click to explore
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;
}
}
});