Donut Chart example - MorrisJS
How do I make an donut chart example - morrisjs?
What is a donut chart example - morrisjs? How do you make a donut chart example - morrisjs? This script and codes were developed by António Capelo on 15 December 2022, Thursday.
Donut Chart example - MorrisJS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Donut Chart example - MorrisJS</title>
</head>
<body> <div id="donut-example"></div>
<p style="text-align:center">Score: <span id="lines">0</span></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js'></script>
<script src='https://cdn.oesmith.co.uk/morris-0.4.3.min.js'></script>
<script src='https://raw.githubusercontent.com/aishek/jquery-animateNumber/master/jquery.animateNumber.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Donut Chart example - MorrisJS - Script Codes JS Codes
/* jQuery animateNumber plugin v0.0.10 (c) 2013, Alexandr Borisov. https://github.com/aishek/jquery-animateNumber
*/
(function(d){var p=function(b){return b.split("").reverse().join("")},l={numberStep:function(b,a){var e=Math.floor(b);d(a.elem).text(e)}},h=function(b){var a=b.elem;a.nodeType&&a.parentNode&&(a=a._animateNumberSetter,a||(a=l.numberStep),a(b.now,b))};d.Tween&&d.Tween.propHooks?d.Tween.propHooks.number={set:h}:d.fx.step.number=h;d.animateNumber={numberStepFactories:{append:function(b){return function(a,e){var k=Math.floor(a);d(e.elem).prop("number",a).text(k+b)}},separator:function(b,a){b=b||" ";a=
a||3;return function(e,k){var c=Math.floor(e).toString(),s=d(k.elem);if(c.length>a){for(var f=c,g=a,l=f.split("").reverse(),c=[],m,q,n,r=0,h=Math.ceil(f.length/g);r<h;r++){m="";for(n=0;n<g;n++){q=r*g+n;if(q===f.length)break;m+=l[q]}c.push(m)}f=c.length-1;g=p(c[f]);c[f]=p(parseInt(g,10).toString());c=c.join(b);c=p(c)}s.prop("number",e).text(c)}}}};d.fn.animateNumber=function(){for(var b=arguments[0],a=d.extend({},l,b),e=d(this),k=[a],c=1,h=arguments.length;c<h;c++)k.push(arguments[c]);if(b.numberStep){var f=
this.each(function(){this._animateNumberSetter=b.numberStep}),g=a.complete;a.complete=function(){f.each(function(){delete this._animateNumberSetter});g&&g.apply(this,arguments)}}return e.animate.apply(e,k)}})(jQuery);
new Morris.Donut({ element: 'donut-example', data: [ {label: "Portugal", value: 12}, {label: "England", value: 30}, {label: "China", value: 5}, {label: "France", value: 20} ]
});
$('#lines').animateNumber({ number: 165 , color: 'green', // require jquery.color 'font-size': '40px', easing: 'easeInQuad', // require jquery.easing
}, 2000);

Developer | António Capelo |
Username | capelo |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 2,385 Kb |
Views | 12,138 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Clock loading | 2,351 Kb |
8-Bit Avatar | 2,527 Kb |
Full-width slider. | 3,886 Kb |
Menu with following underline | 2,648 Kb |
Background cover | 3,735 Kb |
Brainerd scroller | 3,165 Kb |
Custom checkbox example | 3,495 Kb |
AngularJS Modal Factory | 3,839 Kb |
ToDo | 8,475 Kb |
Gif as page background | 3,521 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Ripples in water | Nobitagit | 2,704 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Addthis_button | Esambino | 1,691 Kb |
Tooltip in table | Roine | 3,713 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!