Custom events demo

author(s): Black Label

by J. Albert Bowden

HTML

<link rel="stylesheet" href="https://blacklabel.github.io/custom_events/css/styles.css">
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
<div id="chart"></div>

JavaScript

$(function () {
    var lastUpdate = +new Date(),
        timeout = 3000;

    function reloadFlash() {
        $("#flash").fadeIn();
        lastUpdate = +new Date();
        setTimeout(hideFlash, timeout);
    }

    function hideFlash() {
        var now = +new Date();
        if (now >= lastUpdate + timeout) {
            $("#flash").fadeOut();
        }
    }

    $('#chart').highcharts({
        chart: {
            renderTo: 'chart',
            borderRadius: 0,
            marginTop: 70,
            events: {
                load: function () {
                    //add report div
                    var ch = this,
                        x = 20,
                        y = 57;
                    
                    ch.flashText = ch.renderer.text('<div id="flash"><div id="report"></div></div>', x , y +10, true).attr({
                        zIndex: 101
                    }).add();
                }
            }
        },
        title: {
            useHTML: true,
            align: 'left',
            x: -5,
            y: 8,
            text: '<span class="chart-title"> Custom events  <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>',
            events: {
                dblclick: function () {
                    reloadFlash();
                    $('#report').html('dbclick on title');
                },
                click: function () {
                    reloadFlash();
                    $('#report').html('click on title');
                },
                contextmenu: function () {
                    reloadFlash();
                    $('#report').html('context menu on title ');
                }
            }
        },
        yAxis: [{
            title: {
                text: 'Values',
                events: {
                    dblclick: function () {
                        reloadFlash();
                   ...