Search code examples
javascriptjquerymorris.js

Morris.js click event on tooltip need to be called

I am new to morris.js and have used it for graphs. Everything is working fine, the tooltip is also showing but I want to make it clickable as well with hover functionality: when user hovers on a bar, the tooltip should be shown and when he clicks on that tooltip I have to generate an alert. I already have function that made bars clickable but I want tooltip as well.

Here is the function that made bars clickable:

var InitiateBarChartCustom2 = function () {
    return {
        init: function () {
            var chart = Morris.Bar({
                element: 'bar-chart2',
                data: volumeData,
                xkey: 'y',
                ykeys: ['a', 'b'],
                labels: volumeLabels,
                hideHover: 'auto',
                barColors: ['#005a2b', '#B10933'],
                overlapped: '1',
                showBarLabels: false,
                xLabelMargin: 7
            });

            var thisDate, thisData;

            $("#bar-chart2 svg rect").on('click', function () {
                thisDate = $(".morris-hover-row-label").html();
                thisDataHtml = $(".morris-hover-point").html().split(":");
                thisData = thisDataHtml[0].trim();
                showdetails(thisDate);
            });

Here is the tooltip that I need to make clickable:

enter image description here`

Here is the code for label:

chart.options.labels.foreach(function (label, i) {
    var legendlabel = $('<span style="display: inline-block;">' + label + '</span>');
    var legenditem = $('<div class="mbox"></div>').css('background-color', chart.options.barcolors[i]).append(legendlabel);
    $('#legend').innerhtml = '';
    $('#legend').append(legenditem);
})

Here is my div that is being dynamically generated:

tooltip: true,
tooltipOpts: {
    defaultTheme: false,
    content: "<div class='morris-hover morris-default-style' ><div class='morris-hover-row-label'>xtick</div><div style='color: rgb(177, 9, 51)' class='morris-hover-point'>  Enquiries:  %1y </div><div style='color: rgb(177, 9, 51)' class='morris-hover-point'>  Sales / Enquiries Ratio:  %2y% </div></div>",
}

I already have visited the following links that didn't help:

and a few more like these.

Can someone show the path to the man who lost himself in these charts?

Solution

  • In morris.js file, you have to add the following lines of code under the Hover function.

    fuction Hover(options)

    here is code you have to edit

        this.el.on('click', function () {
    var thisDate, thisData;
    thisDate = $(".morris-hover-row-label").html();
    thisDataHtml = $(".morris-hover-point").html().split(":");
    thisData = thisDataHtml[0].trim();
    showdetails(thisDate);
    showdetails(thisDate);