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