Pie Chart category order for drill down
Drill down hierarchy in PieChart is determined by the category order. Try different category orders to see how the pie chart changes!
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div>
<div id="demo" style="float:right; width: 60%">
</div>
<div style="float:left; width: 30%">
<label for="cc" style="margin:5px"><input style="margin-right:5px" type="radio" id="cc" name="c" value="atoutside" checked="true">Categorise based on continents and countries</label><br />
<label for="cy" style="margin:5px"><input style="margin-right:5px" type="radio" id="cy" name="c" value="atinside">Categorise based on continents and years</label><br />
<label for="c" style="margin:5px"><input style="margin-right:5px" type="radio" id="c" name="c" value="awinside">Categorise based on countries</label><br />
</div>
</div>
<div style="clear:both;"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var chart = new PieChart({
container: document.getElementById("demo"),
area: { height: null },
data:
{
url: "/dvsl/data/pie-chart/continental-data.json",
autoCategories: ["continent", "country"],
sortField: "continent"
}
});
document.getElementById("cc").addEventListener("click", function () {
var s = chart.setPie([""], 0);
chart.updateSettings({
data: {
autoCategories: ["continent", "country"],
sortField: "continent"
}
});
});
document.getElementById("cy").addEventListener("click", function () {
var s = chart.setPie([""], 0);
chart.updateSettings({
data: {
autoCategories: ["continent", "year"],
sortField: "continent"
}
});
});
document.getElementById("c").addEventListener("click", function () {
var s = chart.setPie([""], 0);
chart.updateSettings({
data: {
autoCategories: ["country"],
sortField: "country"
}
});
});