Back

Slice selection

Demonstration of various slice selections. It is possible to expand a slice or select one or more slices.

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