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

by

1👍

✅

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/

Leave a comment