Content

Radial Indicator

Initialization & Interaction With Indicator

Initalizing in plain JS


radialIndicator(".indicatorContainer", {}); // second parameter "options" is optional
            

Initalizing with JQuery


$('#indicatorContainer').radialIndicator({}); // second parameter "options" is optional
            

Getting instance with JQuery


const radialObj = $('#indicatorContainer').data('radialIndicator');
radialObj.animate(60); // now you can use instance to call different method on the radial indicator
            

Getting instance with plain JS


const radialObj = radialIndicator('#indicatorContainer');
            

Get or change an option on existing indicator


//getter
const interpolate = radialObj.option('interpolate');

//setter
radialObj.option('interpolate',false);
radialObj.option('radius',60);
            

Set default option globally


radialIndicator.defaults.radius = 80;
radialIndicator.defaults.barColor = "#99CC33";
            

Set the value of an indicator


//getter
const curProgress = radialObj.value();

//setter
radialObj.value(80);
            

Set the value of an indicator with animation


radialObj.animate(80);
            

Options

Option Allowed Value Default Description
radius number 50 Define inner radius of indicator.
barWidth number 5 Define width of the radial bar.
barBgColor colour code in hex #eeeeee Define background color to radial bar.
barColor object of colour range like ({0 : '#FF0000', 50 : '#FFFF00', 100 : '#0066FF',}) or color code in hex #99CC33 Define the bar color. If object of color range is provided as value it interpolate color as per color range (if interpolate option is true or else just show the upper limit color) at a specific point.
roundCorner boolean false If true have rounded corners for circular bars.
displayNumber boolean true If true show the indicator number.
duration number with percentage 100 without 500 duration in ms from 0 to 100%
easing function (t) => {return t;} Function with progress param, returns updated progress. Default linear
format # format like (##,###,###) or a formatter function ## Define # format or formatter function to format indicator number.
frameNum number 100 for percentage and 500 for others Number of frames in which indcator circle is divided.
frameTime number 10 Time taken to go from one frame to another.
fontColor hex color code color code of progress By default it takes the color code of progress at specific point. If defined it will take the defined color code.
fontSize number Calculated By default font size is calculated to fit indicator inside circle. Defining this will override the calculated one.
fontFamily font family similiar to per css syntax default Define font family for indicator number.
fontWeight font weight similiar to css syntax bold Define font weight for indicator number.
interaction boolean false If true interaction via touch / mouse allowed.
interpolate boolean true If true interpolate color according to color range.
initValue number minValue or 0 Initial indicator value which you want to display on progress bar.
minValue number 0 Minimum value of indicator.
maxValue number 100 Maximum value of indicator.
onChange function () => {} Executed after each iteration.
percentage boolean true If true show the percentage number.
precision number 0 Decimal places in indicators displayed value
textBaseline string 'middle' text baseline of indicator number

Radial Indicator Examples

No Config

Some Config


radialIndicator(".indicatorContainer", {
  barColor: '#87CEEB',
  barWidth: 10,
  initValue: 40,
  roundCorner : true,
  percentage: true
});
            

No Number


radialIndicator(".indicatorContainer", {
  displayNumber: false,
  initValue: 40
});
            

Color Range


radialIndicator(".indicatorContainer", {
    barColor: {
        0: '#FF0000',
        33: '#FFFF00',
        66: '#0066FF',
        100: '#33CC33'
    },
    initValue: 70,
    percentage: true
});
            

Duration

You can either define the duration from 0 to 100% via properties. Every animate() call then calculates the duration


radialIndicator(".indicatorContainer", {
  duration: 5000 // ms
});
            

Or via animates second optional duration property in milliseconds. To set a duration from current to the target value


radialIndicator.animate(90, 400);
            

Easing

You can pass your own easing function that takes a progress parameter and returns the updated progress. Take a look at this gist


radialIndicator(".indicatorContainer", {
  easing: (t) => { return t*t }
});
            

Or via this npm package


radialIndicator(".indicatorContainer", {
  easing: new BezierEasing(x, x, x, x)
});
            

Min & Max Value


radialIndicator(".indicatorContainer", {
  minValue: 1000,
  maxValue: 100000
});
            

Formatting


radialIndicator(".indicatorContainer", {
    radius: 70,
    initValue: 750000,
    minValue: 10000,
    maxValue: 10000000,
    format: '##,###,###'
});
            

Image or other content inside indicator

Wrap your content and the indicator inside a wrapper


<pre><code><div id="indicatorContainerWrap">
    <div id="indicatorContainer"></div>
    <img src="assets/images/lab_exp.png"  id="prgLogo"/>
</div></code></pre>
            

Then add the following css


#indicatorContainerWrap, #indicatorContainer {
    display: inline-block;
    position: relative;
}

#prgLogo {
    position: absolute;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: 30px;
    top: 50%;
}
            

A clock example


const clock = radialIndicator(".indicatorContainer", {
    radius: 60,
    barWidth: 5,
    barColor: '#FF0000',
    minValue: 0,
    maxValue: 60,
    fontWeight: 'normal',
    roundCorner: true,
    format: function (value) {
        const date = new Date();
        return date.getHours() + ':' + date.getMinutes();
    }
});

setInterval(() => {
  clock.value(new Date().getSeconds() + 1);
}, 1000);
            

File Upload

Click / Drop file to select.

HTML


<div id="indicatorContainerWrap">
    <div class="rad-prg" id="indicatorContainer"></div>
    <div class="rad-cntnt">Click / Drop file to select.</div>
    <input type="file" id="prgFileSelector" />
</div>
            

CSS


#indicatorContainerWrap {
    position: relative;
    display: inline-block;
}

.rad-cntnt {
    position: absolute;
    display: table;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 24px;
}


#prgFileSelector {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 10;
}
            

JS


//file upload example
const container = $('#indicatorContainerWrap'),
    msgHolder = container.find('.rad-cntnt'),
    containerProg = container.radialIndicator({
        radius: 100,
        percentage: true,
        displayNumber: false
    }).data('radialIndicator');


container.on({
    'dragenter': function (e) {
        msgHolder.html("Drop here");
    },
    'dragleave': function (e) {
        msgHolder.html("Click / Drop file to select.");
    },
    'drop': function (e) {
        e.preventDefault();
        handleFileUpload(e.originalEvent.dataTransfer.files);
    }
});

$('#prgFileSelector').on('change', function () {
    handleFileUpload(this.files);
});

function handleFileUpload(files) {
    msgHolder.hide();
    containerProg.option('displayNumber', true);

    const file = files[0],
        fd = new FormData();

    fd.append('file', file);


    $.ajax({
        url: 'service/upload.php',
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        success: function () {
            containerProg.option('displayNumber', false);
            msgHolder.show().html('File upload done.');
        },
        xhr: function () {
            const xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function (e) {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded || e.position) * 100 / e.total;
                    //Do something with upload progress
                    console.log(percentComplete);
                    containerProg.animate(percentComplete);
                }
            }, false);

            return xhr;
        }
    });

}
            

Angular JS Support

Include angular.radialIndicator.js along with radialIndicator.js


<script src="radialIndicator.js"></script>
<script src="angular.radialIndicator.js"></script>
    

Usage


<div ng-app="myApp" ng-controller="demo">
    <div data-radial-indicator=""></div>
    <div data-radial-indicator="{radius : 80, percentage :true,barColor : '#87CEEB', initValue: 70}"></div>
    <div data-radial-indicator="indicatorOption"></div>
</div>
    

angular.module('myApp', ['ng-sortable','radialIndicator'])
    .controller('demo', ['$scope', function ($scope) {
        $scope.indicatorOption = {
                radius : 80,
                percentage :true,
                barColor : "#87CEEB",
                initValue : 70
        };
    }]);
    

Binding indicator with a modal

You can give the name of modal which you want to bind with indicator in radial-indicator-model attribute, and idicator will watch the model change and update value accordingly.


<div ng-app="myApp" ng-controller="demo">
    <div data-radial-indicator="indicatorOption" data-radial-indicator-model="indicatorValue"></div>
</div>
    

angular.module('myApp', ['ng-sortable','radialIndicator'])
.controller('demo', ['$scope', function ($scope) {
    $scope.indicatorOption = {
            radius : 80,
            percentage :true,
            barColor : "#87CEEB"
    };

    $scope.indicatorValue = 70;
}]);
    

Getting instance of indicator through DI

You can inject radialIndicatorInstance to any controller, directive or service to get instance of radialIndicator and modify it on runtime. In order to get instance of radial indicator you have to define id as shown below.


<div ng-app="myApp" ng-controller="demo">
    <div data-radial-indicator="indicatorOption" data-radial-indicator-id="indicator1"></div>
    <button data-ng-click="changeValue(30)"></button>
</div>
    

angular.module('myApp', ['ng-sortable', 'radialIndicator'])
    .controller('demo', ['$scope', 'radialIndicatorInstance', function($scope, radialIndicatorInstance) {
        $scope.indicatorOption = {
            percentage: true,
            barColor: "#87CEEB",
            initValue : 70
    };

$scope.changeValue =
    function(val) {
        radialIndicatorInstance['indicator1'].animate(30);
    }
}]);