Chart.js & BPopUp - Make a Chart in a PopUP

I'm working in a Little application for School, that need to give some Chart inside a Popup.

The problem is in the middle of testing, when I put

<canvas id="myChart" width="500" height="400"></canvas> inside the element_to_pop_up ID does not work.

I made a Fiddle to make this easier to understand.

https://jsfiddle.net/enanotg/od90stph/

Please Help!

There seems to be some issue with your bpopup refrence. I've worked around this in the fiddle by including the bpopup code at the top of the JavaScript section. So scroll down to the bottom of the section for the actual application code.

You can draw the chart only once the canvas element is visible. So move your charting code from you window.onload to after your bpopup is triggered like so

(function ($) {
    // DOM Ready
    $(function () {
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button').bind('click', function (e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#element_to_pop_up').bPopup();

            var ctx = document.getElementById("myChart").getContext("2d");
            var step = 1;
            var max = 24;
            var start = 8;
            window.myLine = new Chart(ctx).LineAlt(lineChartData, {
                responsive: false,
                scaleOverride: true,
                scaleSteps: Math.ceil((max - start) / step),
                scaleStepWidth: step,
                scaleStartValue: start,
                pointDot: false,
                datasetFill: false,
                showTooltips: false,
            });
        });
    });
})(jQuery);

Fiddle - https://jsfiddle.net/o8twjcrL/