CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modalchart.js
Raj
Raj

Reputation: 879

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>

Upvotes: 3

Views: 8400

Answers (2)

Raj
Raj

Reputation: 879

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


  };

Upvotes: 7

Gatsbill
Gatsbill

Reputation: 1790

see this,

Click events on Pie Charts in Chart.js

don't know much about chart.js but I'm sure this library has some method to do this easily, no need to use jquery.

Upvotes: 0

Related Questions