CODEWITHSUNDEEP
twitter-bootstrapmodal-dialogbootstrap-modalchart.js
Trung Tran
Trung Tran

Reputation: 13731

Bootstrap modal not working with chartjs line graph

My chart.js line graph will not show up in my bootstrap modal for some reason:

HTML:

This link calls my bootstrap modal

<a class="button" id="popup1link" href="#modal" data-toggle="modal">
  <div class="col-xs-6 col-sm-4 hvr-grow placeholder">
   <div id="chart">
    <div><img class="img-responsive" src="/images/cumulativeline.png" alt=""/></div>
   </div>
   <h4 class="bold">Velocity</h4>
   <span class="text-muted">User Velocity</span>
 </div>
</a>

My modal HTML:

<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog">
  <div class="modal-content">
        <div class="modal-header">
          <h>Modal Header</h>
          <div class="modal-body">
            <p>
              <h3>Velocity</h3>
               <br>
                <canvas id="canvas" width="400" height="400"></canvas>
                <p>This text shows up but the chart doesn't...</p>
            </p>
          </div>
          <div class="modal-footer">
            <p>footer</p>
          </div>
        </div>
    </div>
  </div>
</div>

My JS file:

$("#modal").on('show.bs.modal', function() {
    console.log('create modal line in progress'); //this console logs out properly 

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var ctx = $("#canvas").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data);

});

Can someone help?

Upvotes: 1

Views: 3352

Answers (1)

Shehary
Shehary

Reputation: 9992

Change

$("#modal").on('show.bs.modal', function() { }

show.bs.modal Occurs when the modal is about to be shown

to

$("#modal").on('shown.bs.modal', function() {}

shown.bs.modal Occurs when the modal is fully shown.

will give the enough room to render / draw the chart and display output in modal.

Upvotes: 3

Related Questions