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 |
Camera click | 1,963 Kb |
Background cover | 3,735 Kb |
AngularJS Modal Factory | 3,839 Kb |
Gif as page background | 3,521 Kb |
Menu with following underline | 2,648 Kb |
ToDo | 8,475 Kb |
Custom checkbox example | 3,495 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 |
Sort the Knowlege | Eprouver | 3,915 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Pure CSS Tooltip | APinix | 2,815 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!