javascript - Morris.js click event on tooltip need to be called -


i new morris.js , have used graphs. working fine, tooltip showing want make clickable hover functionality: when user hovers on bar, tooltip should shown , when clicks on tooltip have generate alert. have function made bars clickable want tooltip well.

here function 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 tooltip need make clickable:

enter image description here`

here code 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 div 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 have visited following links didn't help:

and few more these.

can show path man lost himself in these charts?

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

fuction hover(options) 

here code have 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); 

Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -