Kendo Chart inside bootstrap carousel

Question

I have a question about kendo chart inside carousel. In this example: http://dojo.telerik.com/ExoqI you can see that Kendo chart doesn't redriwe itself when carousel changes slide.

Does anyone has idea how to solve it?

I also try this logic where I check current carousel index and if it is index before chart element then do the logic:

 let currentCarouselIndex = $('#myCarousel div.active').index();
            console.log(currentCarouselIndex)
            if (currentCarouselIndex == 1){ //next slide will be chartanalysis chart
              setTimeout(function(){
                    let chart = $("#chart").data("kendoChart");
                    chart.redraw();
                },50);
                $("#myCarousel").off();
            }
          }
        ); 

but then the problem is when you go first left with left carousel-control, the chart is not redrawn properly.

Any idea how to fix this problem is appriciated :)Thanks!

Answer 1

The Bootstrap carousel slide.bs event returns a relatedTarget telling you which item is loading next. You could use that to check for a particular chart DIV and then redraw that DIV's chart:

   $("#myCarousel").on('slide.bs.carousel', function (e) {
     var IsChart = $(e.relatedTarget).find("#chart").length > 0;
     var IsChart2 = $(e.relatedTarget).find("#chart1").length > 0;
     if (IsChart){
      setTimeout(function () {
        let chart = $("#chart").data("kendoChart");
        chart.redraw();
      }, 50);       
     }
     if (IsChart2){
      setTimeout(function () {
        let chart1 = $("#chart1").data("kendoChart");
        chart1.redraw();
      }, 50);       
     }
  }); 

DEMO