Back

Slice selection

Pie chart example that shows how interactions like 'drill down', 'select', 'add to selection' and 'reset' can be called with event listeners to customize navigation experience. By default, single click = drill down, hold click = select or add to selection.

Set the on-load state
Select multiple slices at once - Internet Explorer and Firefox selected
Expand the slice for subset values - Internet Explorer expanded
Expand the slice and select multiple slices from the subset - Internet Exprorer and select 8.0 and 9.0 versions expanded
Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

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

    <div id="demo" style="width: 100%"></div>
	<div>
		<button id="ol" type="button" style="width:90px">Start</button><span style="margin-left:10px">Set the on-load state</span></br>
		<button id="mi" type="button" style="width:90px">Select</button><span style="margin-left:10px">Select multiple slices at once - Internet Explorer and Firefox selected</span></br>
		<button id="dd" type="button" style="width:90px">Expand</button> <span style="margin-left:10px">Expand the slice for subset values - Internet Explorer expanded</span></br>
		<button id="dds" type="button" style="width:90px">Sub-select</button><span style="margin-left:10px">Expand the slice and select multiple slices from the subset - Internet Exprorer and select 8.0 and 9.0 versions expanded</span></br>
	</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/browsers-subsetIds.json" }
    });
    
    document.getElementById("ol").addEventListener("click", function(){
		var s = chart.setPie([""], 0);
		s.selection([]);
	});
	
    document.getElementById("mi").addEventListener("click", function(){
		var s = chart.setPie([""], 0);
		s.selection([]);
		s.selection(["Internet Explorer", "Firefox"]);
	});
	
    document.getElementById("dd").addEventListener("click", function(){
		var s = chart.setPie(["","Internet Explorer"], 0);
		s.selection([]);
	});
	
    document.getElementById("dds").addEventListener("click", function(){
		var s = chart.setPie(["","Internet Explorer"], 0);
		s.selection([]);
		s.selection(["Internet Explorer 8.0", "Internet Explorer 9.0"]);
	});

Data

Data 
//Data too large to output
Download Data