title: Bootstrap Modal with Chart.js linechart
body: <p>I have a Twitter <a href="http://getbootstrap.com/javascript/#modals" rel="nofollow">Bootstrap 3 Modal</a> window and i want to draw an <a href="https://github.com/nnnick/Chart.js" rel="nofollow">Chart.js</a> linechart in it. But every time i open the modal the canvas element has a height and a width of 0. If i change these values the chart is empty. it seems like the chart is never drawn but i doesnt get any console output or errors.</p>
  
  <p><strong>Modal:</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="exampleModalLabel"&gt;New message&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;Text&lt;/p&gt;
                  &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;
                  &lt;p&gt;Text&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$('#exampleModal').on('show.bs.modal', function (event) {
  
      var button = $(event.relatedTarget);
      var modal = $(this);
      var canvas = modal.find('.modal-body canvas');
  
      // Chart initialisieren
      var ctx = canvas[0].getContext("2d");
      var chart = new Chart(ctx).Line({
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
              {
                  fillColor: "rgba(190,144,212,0.2)",
                  strokeColor: "rgba(190,144,212,1)",
                  pointColor: "rgba(190,144,212,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(220,220,220,1)",
                  data: [65, 59, 80, 81, 56, 55, 40]
              },
              {
                  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: [65, 59, 80, 81, 56, 55, 40]
              }
          ]
      }, {});
  });
  </code></pre>
  
  <p><strong>Button:</strong></p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="&lt;?php echo $var["id"]; ?&gt;"&gt;Open&lt;/button&gt;
  </code></pre>
  
  <p>What is missing? Why the chart never gets drawn?</p>
  
  <p>Thanks</p>