bxSlider last slide empty

Question

I have bxSlider integrated in an existing application showing three different slides. Each slide contains a HTML canvas which is periodically updated with a new JCharts graph. It works perfect! Only... the last slide does appear, but does not show the content of the canvas.

The following bxSlider element is used. In this case the canvas with id loadedClassesLineChart is showm, but does not show the graph. When i change the order of the

tags the content of the last canvas is not shown (although the canvas is shown an a pager is shown with 3 dots)

<ul class="bxslider" id="rdstats">
    <li><p style="background-color:rgb(231, 239, 252);margin-top: -4px;font-weight: bold;padding:6px 6px 6px 6px;">Average CPU Load/CPUs</p><br/>
        <canvas id="cpuLoadRadarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>
    </li>
    <li><p style="background-color:rgb(231, 239, 252);margin-top: -4px;font-weight: bold;padding:6px 6px 6px 6px;">Heapsize allocation</p><br/>
        <canvas id="heapSizeStackedBarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>
    </li>
    <li><p style="background-color:rgb(231, 239, 252);margin-top: -4px;font-weight: bold;padding:6px 6px 6px 6px;">Loaded classes</p><br/> 
        <canvas id="loadedClassesLineChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>
    </li>
</ul>

When adding an extra empty <li> </li> after the last </li> all three graphs are shown and the fourth empty slide is shown.

bxSlider is started using the document ready function.

 $(document).ready(function() {

    $('#rdstats').each(function() {
        var _this = $(this).bxSlider({
            controls: false,
            auto: true,
            autoHover: true,
            minSlides: 1,
            maxSlides: 1,
            adaptiveHeight: true,
            slidewidth: 200,
            slideMargin: 2});

        _this.mouseenter(function() {
            _this.stopAuto();
        }).mouseleave(function() {
            _this.startAuto();

        });

    });

What i have tried;

• UseCSS : false
• slideWidth : 200
• minSlides : different values
• maxSlides : different values
• adaptiveHeight: false

reproducable on FireFox, Safari and Opera

Anyone able to help me out on this one ?

Upvotes: 0

Views: 1565

Answer 1

or simply set onSlideAfter reload where 3000 mean time how long to wait till reload from start (infinitiLoop must be false):

infiniteLoop: false,
onSlideAfter: function(){
   setTimeout(function(){_this.reloadSlider()},3000);
    }

Answer 2

The problem was, the plugin bxslider clones some of the elements(<li></li>) which has canvas as child. So the canvas inside newly cloned element is NOT initialized using ChartJS

I have modified the code a little bit to support this.

// Refreshes bxslider with id "rdstats" with new data.
function refreshcpuLoadRadarChart() {

    // Replace the chart canvas element

    $('.cpuLoadRadarChart').replaceWith('<canvas class="cpuLoadRadarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>');

    // Get the context of the canvas element we want to select
    var ctx = $('.cpuLoadRadarChart').get(0).getContext("2d");
    new Chart(ctx).Radar({"labels":["10:54","10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09"],"datasets":[{"label":"myserver","fillColor":"rgba(165,222,11,0.2)","strokeColor":"rgba(165,222,11,1)","pointColor":"rgba(165,222,11,1)","pointStrokeColor":"#fff","pointHighlightFill":"#fff","pointHighlightStroke":"rgba(165,222,11,1)","data":[0.03,0.01,0.2,0.53,0.34,0.2,0.43,0.28,0.17,0.28,0.24,0.32,0.2,0.45,0.42,0.15]}]}, {
        responsive: true,
        animation: false,
        tooltipFontSize: 10,
        tooltipTitleFontSize: 10,
        tooltipXOffset: 5,
        scaleOverride: true,
        scaleShowLabels: true,
        scaleSteps: 6,
        scaleStepWidth: 0.5,
        scaleStartValue: 0,
        scaleFontSize: 10
    });


    setTimeout(function () {
        refreshcpuLoadRadarChart();
    }, 30000);

}


// Refreshes bxslider with id "rdstats" with new data.
function refreshHeapUsageBarChart() {


    $('.heapSizeStackedBarChart').replaceWith('<canvas class="heapSizeStackedBarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>');
    $('.heapSizeStackedBarChart').each(function(pos,value){
    var ctx = $(value).get(0).getContext("2d");
    new Chart(ctx).StackedBar({"labels":["myserver","myserver2","myserver3"],"datasets":[{"label":"Free %","fillColor":"rgba(255,255,255,0.7)","strokeColor":"rgba(255,255,255,1)","pointColor":"rgba(255,255,255,1)","pointStrokeColor":"rgba(255,255,255,1)","pointHighlightFill":"rgba(255,255,255,1)","pointHighlightStroke":"rgba(255,255,255,1)","data":[50,50,50]},{"label":"Tenured Comm not Used%","fillColor":"rgba(165,222,11,0.7)","strokeColor":"rgba(165,222,11,1)","pointColor":"rgba(165,222,11,1)","pointStrokeColor":"rgba(165,222,11,1)","pointHighlightFill":"rgba(165,222,11,1)","pointHighlightStroke":"rgba(165,222,11,1)","data":[14,14,14]},{"label":"Tenured Used%","fillColor":"rgba(199,193,1,0.7)","strokeColor":"rgba(199,193,1,1)","pointColor":"rgba(199,193,1,1)","pointStrokeColor":"rgba(199,193,1,1)","pointHighlightFill":"rgba(199,193,1,1)","pointHighlightStroke":"rgba(199,193,1,1)","data":[21,21,21]},{"label":"Survivor Comm not Used%","fillColor":"rgba(227,158,3,0.7)","strokeColor":"rgba(227,158,3,1)","pointColor":"rgba(227,158,3,1)","pointStrokeColor":"rgba(227,158,3,1)","pointHighlightFill":"rgba(227,158,3,1)","pointHighlightStroke":"rgba(227,158,3,1)","data":[1,1,1]},{"label":"Survivor Used%","fillColor":"rgba(246,120,15,0.7)","strokeColor":"rgba(246,120,15,1)","pointColor":"rgba(246,120,15,1)","pointStrokeColor":"rgba(246,120,15,1)","pointHighlightFill":"rgba(246,120,15,1)","pointHighlightStroke":"rgba(246,120,15,1)","data":[0,0,0]},{"label":"Eden Comm not Used%","fillColor":"rgba(254,83,38,0.7)","strokeColor":"rgba(254,83,38,1)","pointColor":"rgba(254,83,38,1)","pointStrokeColor":"rgba(254,83,38,1)","pointHighlightFill":"rgba(254,83,38,1)","pointHighlightStroke":"rgba(254,83,38,1)","data":[11,11,11]},{"label":"Eden Used%","fillColor":"rgba(251,50,68,0.7)","strokeColor":"rgba(251,50,68,1)","pointColor":"rgba(251,50,68,1)","pointStrokeColor":"rgba(251,50,68,1)","pointHighlightFill":"rgba(251,50,68,1)","pointHighlightStroke":"rgba(251,50,68,1)","data":[3,3,3]}]}, {
        responsive: true,
        animation: false,
        scaleSteps: 10,
        scaleStepWidth: 10,
        scaleStartValue: 0,
        scaleOverride: true,
        tooltipXOffset: -25,
        tooltipFontSize: 10,
        tooltipTitleFontSize: 10
    });
})
    setTimeout(function () {
        refreshHeapUsageBarChart();
    }, 30000);
}

// Refreshes bxslider with id "rdstats" with new data.
function refreshLoadedClassesLineChart() {
    // Replace the chart canvas element

    $('.loadedClassesLineChart').replaceWith('<canvas class="loadedClassesLineChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>');

    var ctx = $('.loadedClassesLineChart').get(0).getContext("2d");
    new Chart(ctx).Line({"labels":["10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09","11:10"],"datasets":[{"label":"myserver","fillColor":"rgba(165,222,11,0.2)","strokeColor":"rgba(165,222,11,1)","pointColor":"rgba(165,222,11,1)","pointStrokeColor":"#fff","pointHighlightFill":"#fff","pointHighlightStroke":"rgba(165,222,11,1)","data":[15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617]}]}, {
        responsive: true,
        animation: false,
        tooltipFontSize: 10,
        tooltipTitleFontSize: 10,
        tooltipXOffset: 5,
        scaleShowLabels: true,
        scaleFontSize: 10
    });
    setTimeout(function () {
        refreshLoadedClassesLineChart();
    }, 30000);
}

$(document).ready(function () {
    console.log('document ready');
    $('.bxslider').bxSlider({
        controls: false,
        auto: true,
        autoHover: true,
        minSlides: 1,
        maxSlides: 1,
        adaptiveHeight: true,
        slidewidth: 200,
        slideMargin: 2,
        onSliderLoad: function(){

            refreshcpuLoadRadarChart();
            refreshHeapUsageBarChart();
            refreshLoadedClassesLineChart();
        }
    });
});

Checkout this fiddle