Back

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:

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%">
        <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);
    }

Data

Data 
//Data too large to output
Download Data