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:
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);
}