title: Bootstrap modal not working with chartjs line graph
body: <p>My <code>chart.js</code> line graph will not show up in my bootstrap modal for some reason:</p>
  
  <p>HTML:</p>
  
  <p>This link calls my bootstrap modal</p>
  
  <pre><code>&lt;a class="button" id="popup1link" href="#modal" data-toggle="modal"&gt;
    &lt;div class="col-xs-6 col-sm-4 hvr-grow placeholder"&gt;
     &lt;div id="chart"&gt;
      &lt;div&gt;&lt;img class="img-responsive" src="/images/cumulativeline.png" alt=""/&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;h4 class="bold"&gt;Velocity&lt;/h4&gt;
     &lt;span class="text-muted"&gt;User Velocity&lt;/span&gt;
   &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>My modal HTML:</p>
  
  <pre><code>&lt;div class="modal fade" id="modal" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h&gt;Modal Header&lt;/h&gt;
            &lt;div class="modal-body"&gt;
              &lt;p&gt;
                &lt;h3&gt;Velocity&lt;/h3&gt;
                 &lt;br&gt;
                  &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;
                  &lt;p&gt;This text shows up but the chart doesn't...&lt;/p&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;p&gt;footer&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS file:</p>
  
  <pre><code>$("#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);
  
  });
  </code></pre>
  
  <p>Can someone help?</p>