CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsprogress-barjquery-ui-progressbar
Eray Balkanli
Eray Balkanli

Reputation: 7960

Increase size of pie charts (width and height) created by progressbar.js

I am using https://github.com/yxfanxiao/jQuery-plugin-progressbar to draw animated pie charts, using the exact codes below:

JS:

;
(function ($) {
    $.fn.loading = function () { 



        var DEFAULTS = {
            backgroundColor: '#4b86db',
            progressColor: '#b3cef6',
            percent: 75,
            duration: 2000
        };  

        $(this).each(function () {
            var $target  = $(this);

            var opts = {
            backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
            progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
            percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
            duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
            };
            // console.log(opts);

            $target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');

            $target.find('.background').css('background-color', opts.backgroundColor);
            $target.find('.left').css('background-color', opts.backgroundColor);
            $target.find('.rotate').css('background-color', opts.progressColor);
            $target.find('.right').css('background-color', opts.progressColor);

            var $rotate = $target.find('.rotate');
            //$rotate.set(0);
            setTimeout(function () {    
                $rotate.css({
                    'transition': 'transform ' + opts.duration + 'ms linear',
                    'transform': 'rotate(' + opts.percent * -3.6 + 'deg)'
                });
            },1);       

            if (opts.percent > 50) {
                var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
                var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';  
                $target.find('.left').css({
                    animation: animationRight,
                    opacity: 1
                });
                $target.find('.right').css({
                    animation: animationLeft,
                    opacity: 0
                });
            } 
            else
            {
                var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
                var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';  
                $target.find('.left').css({
                    animation: animationRight,
                    opacity: 0
                });
                $target.find('.right').css({
                    animation: animationLeft,
                    opacity: 1
                });
            }
        });
    }
})(jQuery);

CSS:

.position {
  float: left;
  margin: 100px 50px;
}

.progress-bar {
  position: relative;
  height: 100px;
  width: 100px;
}
.progress-bar div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.progress-bar div span {
  position: absolute;
  font-family: Arial;
  font-size: 25px;
  line-height: 75px;
  height: 75px;
  width: 75px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progress-bar .background {
  background-color: #b3cef6;
}
.progress-bar .rotate {
  clip: rect(0 50px 100px 0);
  background-color: #4b86db;
}
.progress-bar .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: #b3cef6;
}
.progress-bar .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress Bar</title>
    <link rel="stylesheet" href="jQuery-plugin-progressbar.css">
    <script src="jquery-1.11.3.js"></script>
    <script src="jQuery-plugin-progressbar.js"></script>
</head>
<body>
    <div class="progress-bar position" data-percent="30" data-duration="1000" data-color="#4b86db,#b3cef6"></div>
    <div class="progress-bar position" data-percent="60" data-duration="1000" data-color="yellow,#ccc"></div>
    <div class="progress-bar position" data-percent="84" data-color="#12b321,#a456b1"></div>
    <input type="submit" value="Draw">
    <script>
        $(".progress-bar").loading();
        $('input').on('click', function () {
             $(".progress-bar").loading();
        });
    </script>
</body>
</html>

The output is like below: enter image description here

What I need to do is to increase the size (width and height) of the pie charts. Changing width and height values only did not work, the other values needs to be changed accordingly as well it seems like, but couldn't manage to show the graph correctly still.

They are 100X100 now, how to make them 200X200? Any help would be appreciated!

Thanks!

Upvotes: 0

Views: 717

Answers (1)

Mohammed Messaoudi
Mohammed Messaoudi

Reputation: 106

try this ? 

.position {
  float: left;
  margin: 100px 50px;
}

.progress-bar {
  position: relative;
  height: 200px;
  width: 200px;
}
.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.progress-bar div span {
  position: absolute;
  font-family: Arial;
  font-size: 50px;
  line-height: 150px;
  height: 150px;
  width: 150px;
  left: 25px;
  top: 25px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progress-bar .background {
  background-color: #b3cef6;
}
.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}
.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}
.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Upvotes: 1

Related Questions