PieChart events tester

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

<div>
    <div id="demo" style="float:right; width: 70%"></div>
    <div style="float:left; width: 30%">
        <label for="hover" style="display:block"><input type="checkbox" id="hover" checked>Hover events</label>
        <label for="click" style="display:block"><input type="checkbox" id="click" checked>Click events</label>
        <label for="selection" style="display:block"><input type="checkbox" id="selection" checked>Selection events</label>
        <label for="chartupdate" style="display:block"><input type="checkbox" id="chartupdate" checked>Chart update</label>
        <p><strong>Event log:</strong></p>
        <div id="example-log" style="width:100%; height: 300px; overflow-y: scroll;border: 1px solid grey"></div>
    </div>
</div>
<div style="clear:both;"></div>

//No CSS for this example 

    var t = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { url: "/dvsl/data/pie-chart/browsers.json" },
        events:{
            onClick: clickEvent,
            onRightClick: rclickEvent,
            onDoubleClick: dclickEvent,
            onHoverChange: hoverEvent,
            onSelectionChange: selectionEvent,
            onChartUpdate: updateEvent
        }
    });

	var nthEvent = 1; 
    function clickEvent(event){
        if (!document.getElementById("click").checked) return;
        logClickEvent("Click", event);
    }

    function rclickEvent(event){
        if (!document.getElementById("click").checked) return;
        logClickEvent("Right click", event);
    }

    function dclickEvent(event){
        if (!document.getElementById("click").checked) return;
        logClickEvent("Double click", event);
    }

    function hoverEvent(event){
        if (!document.getElementById("hover").checked) return;
        var hoverItem = null;
        if (event.slice){
            hoverItem = event.slice.id;
            if (event.label){
                hoverItem += " label " + event.label.text;
            }
        }
        addToLog(nthEvent + ". Hover on " + hoverItem);
		nthEvent +=1; 
    }

    function selectionEvent(event){
        if (!document.getElementById("selection").checked) return;

        var selection = event.selection;
        var contents = [];
        for (var i = 0; i < selection.length; i ++){
            var item = selection[i];
            contents.push(item.id)
        }

        addToLog(nthEvent + ". Selection change to [" + contents.join(", ")+"]" , event);
		nthEvent +=1; 
    }

    function updateEvent(event){
        if (!document.getElementById("chartupdate").checked) return;
        var stack = t.getPie();
        addToLog(nthEvent + ". View changed to pie:[" + stack.join(",")+"] offset:"+event.offset+ ", count: "+event.count+", origin:"+event.origin);
		nthEvent +=1; 
    }

    function logClickEvent(name, event){
        var item = null;
        if (event.slice){
            item  = event.slice.id;
            if (event.label){
                item  += " label " + event.label.text;
            }
        }
        addToLog(nthEvent + ". " + name + " on " + item);
		nthEvent +=1; 
    }


    function addToLog(text, items){
        var theParent = document.getElementById("example-log");
        var theKid = document.createElement("div");
        theKid.innerHTML = text;
        theParent.insertBefore(theKid, theParent.firstChild);
    }

//Data too large to output