Test selection modes

<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="d" style="display: block;margin:5px"><input style="margin-right:5px" type="radio" id="d" name="m" value="drilldown" checked="checked">click to expand slice</label>
        <label for="s" style="display: block;margin:5px"><input style="margin-right:5px" type="radio" id="s" name="m" value="select">select</label>
        <label for="t" style="display: block;margin:5px"><input style="margin-right:5px" type="radio" id="t" name="m" value="toggle">toggle</label>
    </div>
</div>
<div style="clear:both;"></div>

//No CSS for this example 

	var doc = document.getElementById("demo");
    var chart = new PieChart({
        container : doc,
        area: { height: null },
        data: { url: "/dvsl/data/pie-chart/browsers.json" }
    });
	
	//selection mode
    document.getElementById("s").addEventListener("click", function(){
		chart.setPie("", 0).selection([]);
		chart.updateSettings({interaction:{mode:"select"}});
	});
	
	//toggle mode
    document.getElementById("t").addEventListener("click", function(){
		chart.setPie("", 0).selection([]);
		chart.updateSettings({interaction:{mode:"toggle"}});
	});
	
	//click to expand slice mode
    document.getElementById("d").addEventListener("click", function(){
		chart.setPie("", 0).selection([]);
		chart.updateSettings({interaction:{mode:"drilldown"}});
	});
	

//Data too large to output