https://fxboss.firstcitizens.com/app/assets/widgets/charts/piegage/piegage-demo.js

1/* Pie gauges */
2
3var initPieChart = function() {
4
5    $('.chart').easyPieChart({
6        barColor: function(percent) {
7            percent /= 100;
8            return "rgb(" + Math.round(254 * (1 - percent)) + ", " + Math.round(255 * percent) + ", 0)";
9        },
10        animate: 1000,
11        scaleColor: '#ccc',
12        lineWidth: 3,
13        size: 100,
14        lineCap: 'cap',
15        onStep: function(value) {
16            this.$el.find('span').text(~~value);
17        }
18    });
19
20
21    $('.chart-home').easyPieChart({
22        barColor: 'rgba(255,255,255,0.5)',
23        trackColor: 'rgba(255,255,255,0.1)',
24        animate: 1000,
25        scaleColor: 'rgba(255,255,255,0.3)',
26        lineWidth: 3,
27        size: 100,
28        lineCap: 'cap',
29        onStep: function(value) {
30            this.$el.find('span').text(~~value);
31        }
32    });
33
34    $('.chart-alt').easyPieChart({
35        barColor: function(percent) {
36            percent /= 100;
37            return "rgb(" + Math.round(255 * (1 - percent)) + ", " + Math.round(255 * percent) + ", 0)";
38        },
39        trackColor: '#333',
40        scaleColor: false,
41        lineCap: 'butt',
42        rotate: -90,
43        lineWidth: 20,
44        animate: 1500,
45        onStep: function(value) {
46            this.$el.find('span').text(~~value);
47        }
48    });
49
50    $('.chart-alt-1').easyPieChart({
51        barColor: function(percent) {
52            percent /= 100;
53            return "rgb(" + Math.round(255 * (1 - percent)) + ", " + Math.round(255 * percent) + ", 0)";
54        },
55        trackColor: '#e1ecf1',
56        scaleColor: '#c4d7e0',
57        lineCap: 'cap',
58        rotate: -90,
59        lineWidth: 10,
60        size: 80,
61        animate: 2500,
62        onStep: function(value) {
63            this.$el.find('span').text(~~value);
64        }
65    });
66
67    $('.chart-alt-2').easyPieChart({
68        barColor: function(percent) {
69            percent /= 100;
70            return "rgb(" + Math.round(255 * (1 - percent)) + ", " + Math.round(255 * percent) + ", 0)";
71        },
72        trackColor: '#fff',
73        scaleColor: false,
74        lineCap: 'butt',
75        rotate: -90,
76        lineWidth: 4,
77        size: 50,
78        animate: 1500,
79        onStep: function(value) {
80            this.$el.find('span').text(~~value);
81        }
82    });
83
84    $('.chart-alt-3').easyPieChart({
85        barColor: function(percent) {
86            percent /= 100;
87            return "rgb(" + Math.round(255 * (1 - percent)) + ", " + Math.round(255 * percent) + ", 0)";
88        },
89        trackColor: '#333',
90        scaleColor: true,
91        lineCap: 'butt',
92        rotate: -90,
93        lineWidth: 4,
94        size: 50,
95        animate: 1500,
96        onStep: function(value) {
97            this.$el.find('span').text(~~value);
98        }
99    });
100
101    $('.chart-alt-10').easyPieChart({
102        barColor: 'rgba(255,255,255,255.4)',
103        trackColor: 'rgba(255,255,255,0.1)',
104        scaleColor: 'transparent',
105        lineCap: 'round',
106        rotate: -90,
107        lineWidth: 4,
108        size: 100,
109        animate: 2500,
110        onStep: function(value) {
111            this.$el.find('span').text(~~value);
112        }
113    });
114
115    $('.updateEasyPieChart').on('click', function(e) {
116        e.preventDefault();
117        $('.chart-home, .chart, .chart-alt, .chart-alt-1, .chart-alt-2, .chart-alt-3, .chart-alt-10').each(function() {
118            $(this).data('easyPieChart').update(Math.round(100 * Math.random()));
119        });
120    });
121};
122
123$(document).ready(function() {
124
125    initPieChart();
126
127});