CODEWITHSUNDEEP
jqueryangularjschartsmorris.js
Pooja
Pooja

Reputation: 105

add click handler on morris bar chart using angularjs

I am using Morris bar chart. It works very good but I want to show table on click on respective bar. Here is my chart - enter image description here

When I click on green bar I want to show Fullfield table. Same for other bars. I tried this -

$( "#morrisBars svg text rect" ).click(function() {
  alert( "Handler for .click() called." );
});

Here is my HTML code - 

<div class="panel-body">
    <div id="bar-example" morris-bar="" morris-data="chartdata_last7Day" morris-options="barOptions_last7Day"></div>
</div>

Here is my JS code - 

$scope.chartdata_last7Day = [
  { y: "Week 1", ful: "41%", can: "4%",  mis: "0%", res: "0%", wal: "54%"},
  { y: "Week 2", ful: "43%", can: "4%",  mis: "0%", res: "2%", wal: "50%"},
  { y: "Week 3", ful: "52%", can: "9%",  mis: "3%", res: "5%", wal: "31%"},
  { y: "Week 4", ful: "60%", can: "5%",  mis: "1%", res: "1%", wal: "32%"},
  { y: "Week 5", ful: "68%", can: "14%",  mis: "2%", res: "3%", wal: "14%"}
];
$scope.barOptions_last7Day = {
    element: 'bar-example',
    xkey: 'y',
    ykeys: ["ful", "can", "mis", "res", "wal"],
    labels: ["Fulfilled", "Cancelled", "Missed", "Rescheduled", "Walk-in"],
    xLabelMargin: 2,
    barColors: ["#4acab4", "#b2d767", "#ffea88", "#878bb6", "#ff8153"],
    resize: true
};

$( "#bar-example svg rect" ).on('click', function() {
  alert( "Handler for .on() called." );
});

But it's not working. Any one knows how to add click event on Morris bars? Please share your ans. Thanks in Advance..

Upvotes: 0

Views: 2846

Answers (1)

Esko
Esko

Reputation: 681

The text element is in the way.
$( "#morrisBars svg rect" ).on('click', function() { alert( "Handler for .click() called." ); });

http://jsbin.com/telupe/edit?html,js,output

Upvotes: 1

Related Questions