Aneeq Azam Khan Aneeq Azam Khan - 1 month ago 18
jQuery Question

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?

Answer Source

in morris.js file you have tadd following lines of code under

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);