JQuery - make element animate whenever it comes to view port

I've used a plugin to make circular charts to view my skills. My basic page layout is a bootstrap carousel, the whole pages are in slides in the slider, my plug in doesn't work properly since it prints the html needed to make up the chart except the canvas that draw the chart and animate it.

this screenshot may make the problem clear:

but only after I resize the window it appears, like this:

and here is the code:

(function($) {
  var selectors = [];

  var check_binded = false;
  var check_lock = false;
  var defaults = {
    interval: 250,
    force_process: false
  }
  var $window = $(window);

  var $prior_appeared;

  function process() {
    check_lock = false;
    for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
      var $appeared = $(selectors[index]).filter(function() {
        return $(this).is(':appeared');
      });

      $appeared.trigger('appear', [$appeared]);

      if ($prior_appeared) {
        var $disappeared = $prior_appeared.not($appeared);
        $disappeared.trigger('disappear', [$disappeared]);
      }
      $prior_appeared = $appeared;
    }
  }

  // "appeared" custom filter
  $.expr[':']['appeared'] = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }

    var window_left = $window.scrollLeft();
    var window_top = $window.scrollTop();
    var offset = $element.offset();
    var left = offset.left;
    var top = offset.top;


    if (top + $element.height() >= window_top &&
        top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
        left + $element.width() >= window_left &&
        left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
      return true;
    } else {
      return false;
    }
  }

  $.fn.extend({
    // watching for element's appearance in browser viewport
    appear: function(options) {
        var opts = $.extend({}, defaults, options || {});
        var selector = this.selector || this;
        if (!check_binded) {
            var on_check = function() {
              if (check_lock) {
                return;
              }
              check_lock = true;

              setTimeout(process, opts.interval);
            };

            $(window).scroll(on_check);
            $(window).resize(on_check);

            check_binded = true;
        }

        if (opts.force_process) {
            setTimeout(process, opts.interval);
        }
        selectors.push(selector);
        return $(selector);
    }
  });

  $.extend({
    // force elements's appearance check
    force_appear: function() {
      if (check_binded) {
        process();
        return true;
      };
      return false;
    }
  });
})(jQuery);

jQuery(document).ready(function($){
        $(document.body).on('appear', '#<?php echo esc_attr( 'wsc-'.$skill_settings['random_id'] ); ?>', function(e, affected) {
            $( '.skill-circle-wrap', '#<?php echo esc_attr( 'wsc-'.$skill_settings['random_id'] ); ?>' ).each(
                //if($('#<?php echo esc_attr( 'wsc-'.$skill_settings['random_id'] ); ?>').isOnScreen(true)){
                    function(i, elem ){
                        $(this).easyPieChart({
                          easing: 'easeOutBounce',
                          lineWidth: 12,
                          animate: 1500,
                          scaleColor: false,
                          lineCap: 'butt',
                          trackColor: '#525252',
                          barColor: $(this).data('barcolor'),
                          onStep: function(from, to, percent) {
                            $(this.el).find('.skill-percentage').text(Math.round(percent));
                          },
                          onStart: function(from, to) {
                            $(this.el).find('.skill-percentage').fadeIn();
                          }
                        });
                    }
                //}//end if
            );//end each
        }); //end appear
        $('#<?php echo esc_attr( 'wsc-'.$skill_settings['random_id'] ); ?>').appear();
    });

I've tried to change many parts but it doesn't work for me, how to fix this problem ?

via Chebli Mohamed