Bootstrap Modal avec Chart.js graphique en courbes

J'ai un Twitter Bootstrap 3 Modal fenêtre et je veux dessiner un Chart.js graphique en courbes. Mais chaque fois que j'ouvre la modale de l'élément canvas a une hauteur et une largeur de 0. Si je change ces valeurs le tableau est vide. il semble que le tableau n'est jamais attirée mais je ne reçoit pas toute sortie de la console ou des erreurs.

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]
            }
        ]
    }, {});
});

Bouton:

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

Ce qui est absent? Pourquoi le tableau ne se met jamais en tirer?

Grâce

OriginalL'auteur Stillmatic1985 | 2014-12-02