Am creating some pie charts and donut charts using MorrisJS
like This All is well but I would like to have a modal pop up when I click a segment in the charts.
Am used to doing modals this way
<!-- Link to shw Modal -->
<a href="#modal-id" class="btn btn-success" data-toggle="modal" > Click to show modal</a>
<!-- Modal -->
<div class="modal fade" id="modal-id" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
</div>
Now in this morris pie charts, I dont have the ID
elements hence I am unable to achieve the modal. Is there a way I can do it?
var donut = new Morris.Donut({
element: 'sales-chart',
resize: true,
colors: ["#3c8dbc", "#f56954", "#00a65a", "#0CDE47", "#076ABE", "#998373", "#378238"],
data: [
{label: "Android", value: 12},
{label: "iPhone", value: 30},
{label: "Other", value: 20}
],
labelColor: '#303641',
hideHover: 'auto',
formatter: function (x) {
return x + ' % ';
}
}).on('click', function(i, row){
alert(row.label);
console.log(i, row);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With