Fork me on GitHub
Ignitersworld Lab

radialIndicator.js

A simple and light weight circular indicator / progressbar plugin.

radialIndicator

radialIndicator is a simple and light weight circular indicator plugin. It supports color range, interpolation, formatting, percentage value and much more, and is easy to configure and update after initialization. And it do work well with jQuery and angular js .

How to use?

Include jquery [optional] and radialIndicator.js.
    <script src="radialIndicator.js"></script>
A simple initialization.
        $('#indicatorContainer').radialIndicator();
    

In this first argument is configuration parameters [Optional], Lets see a example with configuration.

        $('#indicatorContainer').radialIndicator({
                barColor: '#87CEEB',
                barWidth: 10,
                initValue: 40,
                roundCorner : true,
                percentage: true
            });
    
Getting instance of radial Progress
        var radialObj = $('#indicatorContainer').data('radialIndicator');
        //now you can use instance to call different method on the radial progress.
        //like
        radialObj.animate(60);
    

What if you don't use jQuery

Radial Progress work standalone too.
        //Intialiazation 
        var radialObj = radialIndicator('#indicatorContainer', {
            barColor : '#87CEEB',
            barWidth : 10,
            initValue : 40
        }); 

        //Using Instance
        radialObj.animate(60); 
    

In this way first argument is a selector string or dom node or node list (Even you pass a node list it takes the first node only). Function returns a instance so you can use it call different methods same as shown in jquery example.
You can use any one of the following way as per your convinient.

A radialIndicator without number idicator

        $('#indicatorContainer').radialIndicator({
            displayNumber: false
        });

    

Providing a color range

You can provide a color range for different points, and if interpolate option is true radialIndicator will interpolate color between two points else it will take the upper limit color of the points.

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

    

Providing minimum value and maximum value

You can provide a minimum and maximum value to display the indicator as per required .

        $('#indicatorContainer').radialIndicator({
            minValue: 1000,
            maxValue: 100000
        });
    

Formating a indicator

You can provide a # formatter or a formatter function to format indicator.

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

    

Having logo / different element inside the radial inside radialIndicator

This we can easily achieve with normal html css. Here is an example

HTML

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

CSS

        #indicatorContainerWrap,#indicatorContainer{
            display:inline-block;
            position:relative;
        }
        #prgLogo{
            position:absolute;
            width:60px;
            height:60px;
            margin-top:-30px;
            margin-left:-30px;
        }
    

JS

        $('#indicatorContainer').radialIndicator({value : 90});
    

A clock example

A simple clock using radial indicator.

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

                setInterval(function () {
                    radialObj.value(new Date().getSeconds() + 1);
                }, 1000);


    

A file upload example

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
                var 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);

                    var 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 () {
                            var xhr = new window.XMLHttpRequest();
                            //Upload progress
                            xhr.upload.addEventListener("progress", function (e) {
                                if (e.lengthComputable) {
                                    var percentComplete = (e.loaded || e.position) * 100 / e.total;
                                    //Do something with upload progress
                                    console.log(percentComplete);
                                    containerProg.animate(percentComplete);
                                }
                            }, false);

                            return xhr;
                        }
                    });

                }
                
              

Options

Syntax :
        $('#indicatorContainer5').radialIndicator({
            showPercentage : false // option
        });

        //or using native javascript
        var progObj = radialIndicator('#indicatorContainer5' , {
            showPercentage : false // option
        });

       
        

Setting option globally

       radialIndicator.defaults.radius = 80;
       radialIndicator.defaults.barColor = "#99CC33";
        
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.
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.
interpolate boolean true If true interpolate color according to color range.
percentage boolean true If true show the percentage number.
displayNumber boolean true If true show the indicator number.
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.

Methods

Getting instance

    //jquery
    $('#indicatorContainer').radialIndicator();
    var radialObj = $('#indicatorContainer').data('radialIndicator');

    //Vanilla JS
    var radialObj = radialIndicator('#indicatorContainer');
    

option:

To get a option value or change any option value after initialization.

Syntax
    //getter
        var interpolate = radialObj.option('interpolate');

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

value:

To get or set value of radial progress. It sets the value without animation. Syntax

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

    //setter
        radialObj.value(80);  
    

animate:

To set value of radial progress with animation. Syntax

        radialObj.animate(80);  
    

Angular JS Support

Include angular.radialIndicator.js along with radialIndicator.js

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

Usage

       
        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.

       
    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.

       
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);
                }
    }]);
    

Want to support and contribute to radialIndicator.js?

radialIndicator.js needs your contribution to become best of its kind. There are lot of things you can do to contribute and support plugin.

Author

This plugin is developed and maintained by me ( Sudhanshu Yadav ignitersworld.com/me ) . If you have any query you can contact me at sudhanshuyadav2@gmail.com.

You can also follow me on twitter and github Follow @s-yadav .

Check out my other open source work