TimeChart events tester
TimeChart 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.
Hover events
Click events
Selection events
Chart update
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%">
<p><input type="checkbox" id="hover" checked>Hover events</p>
<p><input type="checkbox" id="click" checked>Click events</p>
<p><input type="checkbox" id="selection" checked>Selection events</p>
<p><input type="checkbox" id="chartupdate" checked>Chart update</p>
<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>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var t = new TimeChart({
container: document.getElementById("demo"),
data:
{
units:["h"],
url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
},
area: { height:350 },
series:[
{
name:"Average temperature",
id:"series1",
type:"columns",
data:{
index:1,
aggregation:"avg"
},
style:{
fillColor:"lightgreen",
lineColor:"olive",
lineWidth: 1,
padding:[2,2] // space around the columns
}
}
],
events:{
onClick: clickEvent,
onRightClick: rclickEvent,
onDoubleClick: dclickEvent,
onHoverChange: hoverEvent,
onSelectionChange: selectionEvent,
onChartUpdate: updateEvent
}
});
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 hoverRange = "[" + event.hoverStart + " .. " + event.hoverEnd+" ]";
var series = "nothing";
if (event.hoverSeries){
series = event.hoverSeries.name;
}
addToLog("Hover on " + series + ", time:"+hoverRange);
}
function selectionEvent(event){
if (!document.getElementById("selection").checked) return;
var contents = "Nothing";
if (event.selectionStart != null){
contents = event.selectionStart + " .. " + event.selectionEnd;
}
addToLog("Selection change to " + contents, event);
}
function updateEvent(event){
if (!document.getElementById("chartupdate").checked) return;
var from = event.timeStart;
var to = event.timeEnd;
var unit = event.displayUnit;
addToLog("View changed to [" + from + " .. " + to+" ] unit:"+unit + ", origin: "+event.origin);
}
function logClickEvent(name, event){
var from = event.clickStart;
var to = event.clickEnd;
var series = event.clickSeries;
if (series) series = series.name;
addToLog(name + " on time interval ["+from + " .. " + to + "] series "+series);
}
function addToLog(text, items){
var theParent = document.getElementById("example-log");
var theKid = document.createElement("div");
theKid.innerHTML = text;
theParent.insertBefore(theKid, theParent.firstChild);
}