Why chart is not working with Bootstrap Modal?

Question

This is Modal I am using to make Pie charts in pop up Modals.

HTML Code:

<div class="modal fade" id="viewPollingModal" tabindex="-1" role="dialog" aria-labelledby="viewPollingModal" aria-hidden="true" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title" id="myModalLabel">Survey</h4>
      </div>
      <div class="modal-body">
        <h3 id="appendQuestion"></h3>
        <canvas id="pieChart" style="height:250px"></canvas>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT Code:

$("#rpt-table").on('click', ".viewSurvey", function() {
  event.preventDefault();
  var id = parseInt($(this).attr('attr'));
  url = '{{ route("surveyResult", ":id") }}';
  url = url.replace(':id', id);
  $.get(url, function(data, status){
    $('#appendQuestion').html(data.poll_questions.Question);
    $('#viewPollingModal').modal('toggle');
    $("#modal").on('shown.bs.modal', function() {
      var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
      var pieChart = new Chart(pieChartCanvas);
      var PieData = [
            {
              value: 700,
              color: "#f56954",
              highlight: "#f56954",
              label: "Chrome"
            },
            {
              value: 500,
              color: "#00a65a",
              highlight: "#00a65a",
              label: "IE"
            }
      ];
      var pieOptions = {
            segmentShowStroke: true,
            segmentStrokeColor: "#fff",
            segmentStrokeWidth: 2,
            percentageInnerCutout: 50,
            animationSteps: 100,
            animationEasing: "easeOutBounce",
            animateRotate: true,
            animateScale: false,
            responsive: true,
            maintainAspectRatio: true,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
      };
      pieChart.Doughnut(PieData, pieOptions);
    });
  });
});

Pie Chart is not working with Bootstrap modal (Pop Up) even though I am using 'shown.bs.modal'. Without modal it is working fine.

Thanks in advance

Answer 1

On line $("#modal").on('shown.bs.modal', function() { ... }); , there is no matching element in the HTML with id="modal" try changing $("#modal").on('shown.bs.modal', ... to $("#viewPollingModal").on('shown.bs.modal'...