Vendor Plugin

Vendor : Easy Pie Chart

Lightweight plugin to render simple, animated and retina optimized pie charts 


/* 
	:: Vendor Path
	node_modules/easy-pie-chart/

	:: Installed
	npm install easy-pie-chart

	:: SOW Controller Init
*/	$.SOW.vendor.easypie.init('.easypie');

Basic

73% Memory
88% CPU Usage


50
60
70
80
90


50
60
70
80
90 



<div class="easypie d-inline-block position-relative ml-2 mr-2" 
	data-bar-color="#6dbb30" 
	data-track-color="#eaeaea" 
	data-scale-color="#cccccc" 
	data-scale-length="5" 
	data-line-width="6" 
	data-line-cap="round" 
	
	data-size="110" 
	data-percent="73">

	<div class="absolute-full d-middle pt-0 pb-2">
		<div class="flex-none text-center">
			<span class="d-block">73%</span>
			<small class="d-block text-muted">Memory</small>
		</div>
	</div>

</div>
90/55 
<!-- Nested -->
<div class="easypie d-inline-block position-relative ml-2 mr-2" 
	data-bar-color="#6dbb30" 
	data-track-color="#eaeaea" 
	data-scale-color="#cccccc" 
	data-scale-length="0" 
	data-line-width="6" 
	data-line-cap="round" 
	
	data-size="90" 
	data-percent="88" 
>
	<div class="absolute-full d-middle pt-0 pb-2">
		<div class="flex-none text-center">
			<small class="d-block">90/55</small>
		</div>
	</div>

	<!-- Second -->
	<div class="easypie d-inline-block position-absolute mt--15 ml--15 mr--15" 
		data-bar-color="#fad776" 
		data-track-color="#eaeaea" 
		data-scale-color="#cccccc" 
		data-scale-length="0" 
		data-line-width="6" 
		data-line-cap="round" 
		
		data-size="60" 
		data-percent="55"></div>

</div>
Jump To