AngularJs- Easy pie cart - Circle shape :
------------------------------------------
easychart.html
--------------
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8"/>
<title>Angular</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="angular" ng-controller="chartCtrl">
<span class="chart" easypiechart ng-init="options1" percent="percent1" options="options1">
<span class="percent" ng-bind="percent1"></span>
</span>
<input type="range" min="-100" max="100" step="1" ng-model="percent" />
<span class="chart" easypiechart ng-init="options2 = { animate:false, barColor:'#00FF00', scaleColor:false, lineWidth:3, lineCap:'butt' }" percent="percent2" options="options2">
<span class="percent" ng-bind="percent2"></span>
</span>
<input type="range" min="-100" max="100" step="1" ng-model="percent2" />
<span class="chart" easypiechart percent="anotherPercent" options="anotherOptions">
<span class="percent" ng-bind="percent"></span>
</span>
<input type="range" min="-100" max="100" step="1" ng-model="anotherPercent" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script src="angular.easypiechart.min.js"></script>
<script>
var app = angular.module('app', ['easypiechart']);
app.controller('chartCtrl', ['$scope', function ($scope) {
$scope.percent1 = 65;
$scope.options1 = {
lineCap:'butt',
barColor:'#00FF00',
scaleColor:'#dfe0e0',
lineWidth:3,
lineCap:'circle',
//trackColor:'red'
};
$scope.percent2 = 45;
$scope.anotherPercent = -45;
$scope.anotherOptions = {
animate:{
duration:0,
enabled:false
},
barColor:'#2C3E50',
scaleColor:false,
lineWidth:20,
lineCap:'circle'
};
}]);
</script>
</body>
</html>
style.css-
---------
ul {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 60px;
background: #cccccc;
font-size: 0;
line-height: 0;
letter-spacing: -0.3em;
}
li {
position: relative;
display: inline-block;
vertical-align: top;
width: 25%;
text-align: center;
font-size: 18px;
line-height: 60px;
letter-spacing: normal;
}
li a {
display: block;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
li a:hover,
li a.active {
background: #333333;
color: #ffffff;
}
li a.active:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid;
border-color: transparent;
border-top-color: #333333;
}
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 110px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
.angular {
margin-top: 100px;
}
.angular .chart {
margin-top: 0;
}
input {
display: block;
margin: auto;
margin-bottom: 3em;
}
.btn {
display: block;
width: 200px;
margin: 0 auto;
padding: 10px 20px;
background: #cccccc;
color: #ffffff;
text-transform: uppercase;
cursor: pointer;
font-size: 0.8em;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn:hover {
background: #333333;
color: #ffffff;
}
.span6 {
float: left;
width: 50%;
}
@media only screen and (max-width: 600px) {
li {
font-size: 14.4px;
}
}
@media only screen and (max-width: 430px) {
.span6 {
float: none;
width: 100%;
}
body {
padding-top: 0;
}
ul {
height: auto;
position: static;
}
li {
display: block;
width: 100%;
}
li a {
white-space: normal;
}
a.active:after {
display: none;
}
}
Courtosy:--->
anguarl.easypiechart.min.js-
---------------------------
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
!function(a,b){"function"==typeof define&&define.amd?define(["angular"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("angular")):b(angular)}(this,function(a){!function(a){"use strict";return a.module("easypiechart",[]).directive("easypiechart",[function(){return{restrict:"AE",require:"?ngModel",scope:{percent:"=",options:"="},link:function(b,d,e){b.percent=b.percent||0;var f={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0}};b.options=a.extend(f,b.options);var g=new c(d[0],f);b.$watch("percent",function(a,b){g.update(a)})}}}])}(a);var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()}});
------------------------------------------
easychart.html
--------------
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8"/>
<title>Angular</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="angular" ng-controller="chartCtrl">
<span class="chart" easypiechart ng-init="options1" percent="percent1" options="options1">
<span class="percent" ng-bind="percent1"></span>
</span>
<input type="range" min="-100" max="100" step="1" ng-model="percent" />
<span class="chart" easypiechart ng-init="options2 = { animate:false, barColor:'#00FF00', scaleColor:false, lineWidth:3, lineCap:'butt' }" percent="percent2" options="options2">
<span class="percent" ng-bind="percent2"></span>
</span>
<input type="range" min="-100" max="100" step="1" ng-model="percent2" />
<span class="chart" easypiechart percent="anotherPercent" options="anotherOptions">
<span class="percent" ng-bind="percent"></span>
</span>
<input type="range" min="-100" max="100" step="1" ng-model="anotherPercent" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script src="angular.easypiechart.min.js"></script>
<script>
var app = angular.module('app', ['easypiechart']);
app.controller('chartCtrl', ['$scope', function ($scope) {
$scope.percent1 = 65;
$scope.options1 = {
lineCap:'butt',
barColor:'#00FF00',
scaleColor:'#dfe0e0',
lineWidth:3,
lineCap:'circle',
//trackColor:'red'
};
$scope.percent2 = 45;
$scope.anotherPercent = -45;
$scope.anotherOptions = {
animate:{
duration:0,
enabled:false
},
barColor:'#2C3E50',
scaleColor:false,
lineWidth:20,
lineCap:'circle'
};
}]);
</script>
</body>
</html>
style.css-
---------
ul {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 60px;
background: #cccccc;
font-size: 0;
line-height: 0;
letter-spacing: -0.3em;
}
li {
position: relative;
display: inline-block;
vertical-align: top;
width: 25%;
text-align: center;
font-size: 18px;
line-height: 60px;
letter-spacing: normal;
}
li a {
display: block;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
li a:hover,
li a.active {
background: #333333;
color: #ffffff;
}
li a.active:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid;
border-color: transparent;
border-top-color: #333333;
}
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 110px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
.angular {
margin-top: 100px;
}
.angular .chart {
margin-top: 0;
}
input {
display: block;
margin: auto;
margin-bottom: 3em;
}
.btn {
display: block;
width: 200px;
margin: 0 auto;
padding: 10px 20px;
background: #cccccc;
color: #ffffff;
text-transform: uppercase;
cursor: pointer;
font-size: 0.8em;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn:hover {
background: #333333;
color: #ffffff;
}
.span6 {
float: left;
width: 50%;
}
@media only screen and (max-width: 600px) {
li {
font-size: 14.4px;
}
}
@media only screen and (max-width: 430px) {
.span6 {
float: none;
width: 100%;
}
body {
padding-top: 0;
}
ul {
height: auto;
position: static;
}
li {
display: block;
width: 100%;
}
li a {
white-space: normal;
}
a.active:after {
display: none;
}
}
Courtosy:--->
anguarl.easypiechart.min.js-
---------------------------
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
!function(a,b){"function"==typeof define&&define.amd?define(["angular"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("angular")):b(angular)}(this,function(a){!function(a){"use strict";return a.module("easypiechart",[]).directive("easypiechart",[function(){return{restrict:"AE",require:"?ngModel",scope:{percent:"=",options:"="},link:function(b,d,e){b.percent=b.percent||0;var f={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0}};b.options=a.extend(f,b.options);var g=new c(d[0],f);b.$watch("percent",function(a,b){g.update(a)})}}}])}(a);var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()}});
No comments:
Post a Comment