TimeChart 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%">
        <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>

//No CSS for this example 

    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 too large to output