Bootstrap Modal with Chart.js linechart -

i have twitter bootstrap 3 modal window , want draw chart.js linechart in it. every time open modal canvas element has height , width of 0. if change these values chart empty. seems chart never drawn doesnt console output or errors.

modal:

<div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">close</span></button>                 <h4 class="modal-title" id="examplemodallabel">new message</h4>             </div>             <div class="modal-body">                 <p>text</p>                 <canvas id="canvas" width="400" height="400"></canvas>                 <p>text</p>             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">close</button>             </div>         </div>     </div> </div> 

javascript:

$('#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]             }         ]     }, {}); }); 

button:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#examplemodal" data-id="<?php echo $var["id"]; ?>">open</button> 

what missing? why chart never gets drawn?

thanks

it wrong event.

$('#examplemodal').on('shown.bs.modal', function (event) {}); 

works!