Back

PieChart events tester

PieChart and other ZoomCharts visualizations operate based on event listeners. In the 'events' object, you can override default behavior and execute your own functions on events like onClick, onHoverChange or others. To demonstrate how event listeners work, we have added a log that tracks events as they happen.

Event log:

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<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>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    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

Data 
//Data too large to output
Download Data