A simple, super lightweight circle data visualisation plugin (jQuery Plugin)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
jquery.circle.js
test.html

README.md

circle

A simple circle data visualisation (jQuery Plugin)

Usage

Insert jQuery

load plugin after jQuery

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="jquery.circle.js"></script>
<script> 
	// dom ready
	$(function(){ 
		var elements = $('.circle').circle( { /* global options */ } ); 
	});
</script>

Options

{
	color: 'red',                       /* fill color */
	graduation: 4,                      /* amount of circles */
	graduationHighlight: 2,             /* highlight circle, get the css class "circle__highlight" */
	fill: 0,                            /* initial fill */
	animateDuration: 1000,              /* duration of the animation */
	animateDelay: 0,                    /* delay of the animation */
	
	// callbacks
	// The animationComplete function not works with duration 0
	animationComplete: function(){},    /* fired after animation */
	create: function(){}                /* fired after create */
}

Set Options

// set function: (fill, duration, delay, color)
elements
	.eq(0)
	.data('circle')
	.set(5)
	;

HTML

get a look in test.html

<!-- set option as data-attribute -->
<div class="circle" data-circleconfig='{"color": "red", "graduation": 4, "fill": 3}'></div>
<div class="circle" data-circleconfig='{"color": "red", "graduation": 4, "fill":3, "animateDelay": 2000}'></div>
<div class="circle" data-circleconfig='{"color": "maroon", "graduation": 10, "graduationHighlight": 8, "fill": 5, "animateDelay": 400}'></div>
<div class="circle" data-circleconfig='{"fill": 3, "animateDelay": 600}'></div>