Raj Raj - 4 months ago 34
jQuery Question

How can I show Bootstrap modal when on click in individual bars in chart.js

I am working on a project using chart.js. I am trying to show a bootstrap modal when clicking individual bars instead of tooltip in chart js. Right now I am using chart id's onclick function for showing a bootstrap modal. Is there any way to make it possible.?

Here is my code:

HTML:

<div class="chart1">
<canvas id="barchart5"></canvas>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>


JAVASCRIPT :

<script type="text/javascript">
var data5 ={
labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
datasets : [
{
fillColor : "#F64747",
strokeColor : "#F64747",
highlightFill: "#F64747",
highlightStroke: "#F64747",
data: [4, 6, 3, 2, 10, 5, 5, 7]
},
{
fillColor : "#19B5FE",
strokeColor : "#19B5FE",
highlightFill : "#19B5FE",
highlightStroke : "#19B5FE",
data: [3, 6, 4, 3, 10, 10, 5, 8]
},
{
fillColor : "#F7CA18",
strokeColor : "#F7CA18",
highlightFill : "#F7CA18",
highlightStroke : "#F7CA18",
data: [4, 6, 10, 4, 7, 6, 2, 4]
}
]
};

var ctx = document.getElementById("barchart5").getContext("2d");
var barchart5 = new Chart(ctx).Bar(data5, {

responsive : true,
showTooltips: false,

onAnimationComplete: function () {
var ctx = this.chart.ctx;
alert(ctx);
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";

this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
})
}
});


$( "#barchart5" ).click(function() {
$('#myModal').modal('show');
});
</script>

Raj Raj
Answer
canvas.onclick = function(evt) {
    var points = chart.getBarsAtEvent(evt);
    var value = chart.datasets[0].points.indexOf(points[0]);
    if(value == 5){
      $('#myModal').modal('show');
    } else if(value == 4){
      $('#myModal1').modal('show');
    }


  };