├── .gitattributes ├── .gitignore ├── README.md ├── demo ├── index.html └── style.css └── jquery.drawDoughnutChart.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | 46 | [Dd]ebug/ 47 | [Rr]elease/ 48 | x64/ 49 | build/ 50 | [Bb]in/ 51 | [Oo]bj/ 52 | 53 | # MSTest test Results 54 | [Tt]est[Rr]esult*/ 55 | [Bb]uild[Ll]og.* 56 | 57 | *_i.c 58 | *_p.c 59 | *.ilk 60 | *.meta 61 | *.obj 62 | *.pch 63 | *.pdb 64 | *.pgc 65 | *.pgd 66 | *.rsp 67 | *.sbr 68 | *.tlb 69 | *.tli 70 | *.tlh 71 | *.tmp 72 | *.tmp_proj 73 | *.log 74 | *.vspscc 75 | *.vssscc 76 | .builds 77 | *.pidb 78 | *.log 79 | *.scc 80 | 81 | # Visual C++ cache files 82 | ipch/ 83 | *.aps 84 | *.ncb 85 | *.opensdf 86 | *.sdf 87 | *.cachefile 88 | 89 | # Visual Studio profiler 90 | *.psess 91 | *.vsp 92 | *.vspx 93 | 94 | # Guidance Automation Toolkit 95 | *.gpState 96 | 97 | # ReSharper is a .NET coding add-in 98 | _ReSharper*/ 99 | *.[Rr]e[Ss]harper 100 | 101 | # TeamCity is a build add-in 102 | _TeamCity* 103 | 104 | # DotCover is a Code Coverage Tool 105 | *.dotCover 106 | 107 | # NCrunch 108 | *.ncrunch* 109 | .*crunch*.local.xml 110 | 111 | # Installshield output folder 112 | [Ee]xpress/ 113 | 114 | # DocProject is a documentation generator add-in 115 | DocProject/buildhelp/ 116 | DocProject/Help/*.HxT 117 | DocProject/Help/*.HxC 118 | DocProject/Help/*.hhc 119 | DocProject/Help/*.hhk 120 | DocProject/Help/*.hhp 121 | DocProject/Help/Html2 122 | DocProject/Help/html 123 | 124 | # Click-Once directory 125 | publish/ 126 | 127 | # Publish Web Output 128 | *.Publish.xml 129 | *.pubxml 130 | 131 | # NuGet Packages Directory 132 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line 133 | #packages/ 134 | 135 | # Windows Azure Build Output 136 | csx 137 | *.build.csdef 138 | 139 | # Windows Store app package directory 140 | AppPackages/ 141 | 142 | # Others 143 | sql/ 144 | *.Cache 145 | ClientBin/ 146 | [Ss]tyle[Cc]op.* 147 | ~$* 148 | *~ 149 | *.dbmdl 150 | *.[Pp]ublish.xml 151 | *.pfx 152 | *.publishsettings 153 | 154 | # RIA/Silverlight projects 155 | Generated_Code/ 156 | 157 | # Backup & report files from converting an old project file to a newer 158 | # Visual Studio version. Backup files are not needed, because we have git ;-) 159 | _UpgradeReport_Files/ 160 | Backup*/ 161 | UpgradeLog*.XML 162 | UpgradeLog*.htm 163 | 164 | # SQL Server files 165 | App_Data/*.mdf 166 | App_Data/*.ldf 167 | 168 | ############# 169 | ## Windows detritus 170 | ############# 171 | 172 | # Windows image file caches 173 | Thumbs.db 174 | ehthumbs.db 175 | 176 | # Folder config file 177 | Desktop.ini 178 | 179 | # Recycle Bin used on file shares 180 | $RECYCLE.BIN/ 181 | 182 | # Mac crap 183 | .DS_Store 184 | 185 | 186 | ############# 187 | ## Python 188 | ############# 189 | 190 | *.py[co] 191 | 192 | # Packages 193 | *.egg 194 | *.egg-info 195 | dist/ 196 | build/ 197 | eggs/ 198 | parts/ 199 | var/ 200 | sdist/ 201 | develop-eggs/ 202 | .installed.cfg 203 | 204 | # Installer logs 205 | pip-log.txt 206 | 207 | # Unit test / coverage reports 208 | .coverage 209 | .tox 210 | 211 | #Translations 212 | *.mo 213 | 214 | #Mr Developer 215 | .mr.developer.cfg 216 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jquery.drawDoughnutChart.js 2 | ================= 3 | 4 | A SVG doughnut chart with animation and tooltip. 5 | Inspired by Chart.js(http://www.chartjs.org/). 6 | 7 | [Demo on my codepen](http://codepen.io/githiro/details/ICfFE) 8 | 9 | Licensed under the MIT License. 10 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jquery.drawDoughnutChart.js 6 | 7 | 8 | 9 |
10 | 11 | 12 | 24 | 25 | -------------------------------------------------------------------------------- /demo/style.css: -------------------------------------------------------------------------------- 1 | @import url(//fonts.googleapis.com/css?family=Oswald:400); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | body { 7 | background: #222428; 8 | font-family: "Oswald", "Helvetica Newe", Helvetica, sans-serif; 9 | } 10 | .chart { 11 | position: absolute; 12 | width: 450px; 13 | height: 450px; 14 | top: 50%; 15 | left: 50%; 16 | margin: -225px 0 0 -225px; 17 | } 18 | .doughnutTip { 19 | position: absolute; 20 | min-width: 30px; 21 | max-width: 300px; 22 | padding: 5px 15px; 23 | border-radius: 1px; 24 | background: rgba(0,0,0,.8); 25 | color: #ddd; 26 | font-size: 17px; 27 | text-shadow: 0 1px 0 #000; 28 | text-transform: uppercase; 29 | text-align: center; 30 | line-height: 1.3; 31 | letter-spacing: .06em; 32 | box-shadow: 0 1px 3px rgba(0,0,0,0.5); 33 | -webkit-transform: all .3s; 34 | -moz-transform: all .3s; 35 | -ms-transform: all .3s; 36 | -o-transform: all .3s; 37 | transform: all .3s; 38 | pointer-events: none; 39 | } 40 | .doughnutTip:after { 41 | position: absolute; 42 | left: 50%; 43 | bottom: -6px; 44 | content: ""; 45 | height: 0; 46 | margin: 0 0 0 -6px; 47 | border-right: 5px solid transparent; 48 | border-left: 5px solid transparent; 49 | border-top: 6px solid rgba(0,0,0,.8); 50 | line-height: 0; 51 | } 52 | .doughnutSummary { 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | color: #d5d5d5; 57 | text-align: center; 58 | text-shadow: 0 -1px 0 #111; 59 | cursor: default; 60 | } 61 | .doughnutSummaryTitle { 62 | position: absolute; 63 | top: 50%; 64 | width: 100%; 65 | margin-top: -27%; 66 | font-size: 22px; 67 | letter-spacing: .06em; 68 | } 69 | .doughnutSummaryNumber { 70 | position: absolute; 71 | top: 50%; 72 | width: 100%; 73 | margin-top: -15%; 74 | font-size: 55px; 75 | } 76 | g path:hover { opacity: .65; } -------------------------------------------------------------------------------- /jquery.drawDoughnutChart.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.drawDoughnutChart.js 3 | * Version: 0.4(Beta) 4 | * Inspired by Chart.js(http://www.chartjs.org/) 5 | * 6 | * Copyright 2014 hiro 7 | * https://github.com/githiro/drawDoughnutChart 8 | * Released under the MIT license. 9 | * 10 | */ 11 | ;(function($, undefined) { 12 | $.fn.drawDoughnutChart = function(data, options) { 13 | var $this = this, 14 | W = $this.width(), 15 | H = $this.height(), 16 | centerX = W/2, 17 | centerY = H/2, 18 | cos = Math.cos, 19 | sin = Math.sin, 20 | PI = Math.PI, 21 | settings = $.extend({ 22 | segmentShowStroke : true, 23 | segmentStrokeColor : "#0C1013", 24 | segmentStrokeWidth : 1, 25 | baseColor: "rgba(0,0,0,0.5)", 26 | baseOffset: 4, 27 | edgeOffset : 10,//offset from edge of $this 28 | percentageInnerCutout : 75, 29 | animation : true, 30 | animationSteps : 90, 31 | animationEasing : "easeInOutExpo", 32 | animateRotate : true, 33 | tipOffsetX: -8, 34 | tipOffsetY: -45, 35 | showTip: true, 36 | showLabel: false, 37 | ratioFont: 1.5, 38 | shortInt: false, 39 | tipClass: "doughnutTip", 40 | summaryClass: "doughnutSummary", 41 | summaryTitle: "TOTAL:", 42 | summaryTitleClass: "doughnutSummaryTitle", 43 | summaryNumberClass: "doughnutSummaryNumber", 44 | beforeDraw: function() { }, 45 | afterDrawed : function() { }, 46 | onPathEnter : function(e,data) { }, 47 | onPathLeave : function(e,data) { } 48 | }, options), 49 | animationOptions = { 50 | linear : function (t) { 51 | return t; 52 | }, 53 | easeInOutExpo: function (t) { 54 | var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; 55 | return (v>1) ? 1 : v; 56 | } 57 | }, 58 | requestAnimFrame = function() { 59 | return window.requestAnimationFrame || 60 | window.webkitRequestAnimationFrame || 61 | window.mozRequestAnimationFrame || 62 | window.oRequestAnimationFrame || 63 | window.msRequestAnimationFrame || 64 | function(callback) { 65 | window.setTimeout(callback, 1000 / 60); 66 | }; 67 | }(); 68 | 69 | settings.beforeDraw.call($this); 70 | 71 | var $svg = $('').appendTo($this), 72 | $paths = [], 73 | easingFunction = animationOptions[settings.animationEasing], 74 | doughnutRadius = Min([H / 2,W / 2]) - settings.edgeOffset, 75 | cutoutRadius = doughnutRadius * (settings.percentageInnerCutout / 100), 76 | segmentTotal = 0; 77 | 78 | //Draw base doughnut 79 | var baseDoughnutRadius = doughnutRadius + settings.baseOffset, 80 | baseCutoutRadius = cutoutRadius - settings.baseOffset; 81 | $(document.createElementNS('http://www.w3.org/2000/svg', 'path')) 82 | .attr({ 83 | "d": getHollowCirclePath(baseDoughnutRadius, baseCutoutRadius), 84 | "fill": settings.baseColor 85 | }) 86 | .appendTo($svg); 87 | 88 | //Set up pie segments wrapper 89 | var $pathGroup = $(document.createElementNS('http://www.w3.org/2000/svg', 'g')); 90 | $pathGroup.attr({opacity: 0}).appendTo($svg); 91 | 92 | //Set up tooltip 93 | if (settings.showTip) { 94 | var $tip = $('
').appendTo('body').hide(), 95 | tipW = $tip.width(), 96 | tipH = $tip.height(); 97 | } 98 | 99 | //Set up center text area 100 | var summarySize = (cutoutRadius - (doughnutRadius - cutoutRadius)) * 2, 101 | $summary = $('
') 102 | .appendTo($this) 103 | .css({ 104 | width: summarySize + "px", 105 | height: summarySize + "px", 106 | "margin-left": -(summarySize / 2) + "px", 107 | "margin-top": -(summarySize / 2) + "px" 108 | }); 109 | var $summaryTitle = $('

' + settings.summaryTitle + '

').appendTo($summary); 110 | $summaryTitle.css('font-size', getScaleFontSize( $summaryTitle, settings.summaryTitle )); // In most of case useless 111 | var $summaryNumber = $('

').appendTo($summary).css({opacity: 0}); 112 | 113 | for (var i = 0, len = data.length; i < len; i++) { 114 | segmentTotal += data[i].value; 115 | $paths[i] = $(document.createElementNS('http://www.w3.org/2000/svg', 'path')) 116 | .attr({ 117 | "stroke-width": settings.segmentStrokeWidth, 118 | "stroke": settings.segmentStrokeColor, 119 | "fill": data[i].color, 120 | "data-order": i 121 | }) 122 | .appendTo($pathGroup) 123 | .on("mouseenter", pathMouseEnter) 124 | .on("mouseleave", pathMouseLeave) 125 | .on("mousemove", pathMouseMove) 126 | .on("click", pathClick); 127 | } 128 | 129 | //Animation start 130 | animationLoop(drawPieSegments); 131 | 132 | //Functions 133 | function getHollowCirclePath(doughnutRadius, cutoutRadius) { 134 | //Calculate values for the path. 135 | //We needn't calculate startRadius, segmentAngle and endRadius, because base doughnut doesn't animate. 136 | var startRadius = -1.570,// -Math.PI/2 137 | segmentAngle = 6.2831,// 1 * ((99.9999/100) * (PI*2)), 138 | endRadius = 4.7131,// startRadius + segmentAngle 139 | startX = centerX + cos(startRadius) * doughnutRadius, 140 | startY = centerY + sin(startRadius) * doughnutRadius, 141 | endX2 = centerX + cos(startRadius) * cutoutRadius, 142 | endY2 = centerY + sin(startRadius) * cutoutRadius, 143 | endX = centerX + cos(endRadius) * doughnutRadius, 144 | endY = centerY + sin(endRadius) * doughnutRadius, 145 | startX2 = centerX + cos(endRadius) * cutoutRadius, 146 | startY2 = centerY + sin(endRadius) * cutoutRadius; 147 | var cmd = [ 148 | 'M', startX, startY, 149 | 'A', doughnutRadius, doughnutRadius, 0, 1, 1, endX, endY,//Draw outer circle 150 | 'Z',//Close path 151 | 'M', startX2, startY2,//Move pointer 152 | 'A', cutoutRadius, cutoutRadius, 0, 1, 0, endX2, endY2,//Draw inner circle 153 | 'Z' 154 | ]; 155 | cmd = cmd.join(' '); 156 | return cmd; 157 | }; 158 | function pathMouseEnter(e) { 159 | var order = $(this).data().order; 160 | if (settings.showTip) { 161 | $tip.text(data[order].title + ": " + data[order].value) 162 | .fadeIn(200); 163 | } 164 | if(settings.showLabel) { 165 | $summaryTitle.text(data[order].title).css('font-size', getScaleFontSize( $summaryTitle, data[order].title)); 166 | var tmpNumber = settings.shortInt ? shortKInt(data[order].value) : data[order].value; 167 | $summaryNumber.html(tmpNumber).css('font-size', getScaleFontSize( $summaryNumber, tmpNumber)); 168 | } 169 | settings.onPathEnter.apply($(this),[e,data]); 170 | } 171 | function pathMouseLeave(e) { 172 | if (settings.showTip) $tip.hide(); 173 | if(settings.showLabel) { 174 | $summaryTitle.text(settings.summaryTitle).css('font-size', getScaleFontSize( $summaryTitle, settings.summaryTitle)); 175 | var tmpNumber = settings.shortInt ? shortKInt(segmentTotal) : segmentTotal; 176 | $summaryNumber.html(tmpNumber).css('font-size', getScaleFontSize( $summaryNumber, tmpNumber)); 177 | } 178 | settings.onPathLeave.apply($(this),[e,data]); 179 | } 180 | function pathMouseMove(e) { 181 | if (settings.showTip) { 182 | $tip.css({ 183 | top: e.pageY + settings.tipOffsetY, 184 | left: e.pageX - $tip.width() / 2 + settings.tipOffsetX 185 | }); 186 | } 187 | } 188 | function pathClick(e){ 189 | var order = $(this).data().order; 190 | if (typeof data[order].action != "undefined") 191 | data[order].action(); 192 | } 193 | function drawPieSegments (animationDecimal) { 194 | var startRadius = -PI / 2,//-90 degree 195 | rotateAnimation = 1; 196 | if (settings.animation && settings.animateRotate) rotateAnimation = animationDecimal;//count up between0~1 197 | 198 | drawDoughnutText(animationDecimal, segmentTotal); 199 | 200 | $pathGroup.attr("opacity", animationDecimal); 201 | 202 | //If data have only one value, we draw hollow circle(#1). 203 | if (data.length === 1 && (4.7122 < (rotateAnimation * ((data[0].value / segmentTotal) * (PI * 2)) + startRadius))) { 204 | $paths[0].attr("d", getHollowCirclePath(doughnutRadius, cutoutRadius)); 205 | return; 206 | } 207 | for (var i = 0, len = data.length; i < len; i++) { 208 | var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)), 209 | endRadius = startRadius + segmentAngle, 210 | largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0, 211 | startX = centerX + cos(startRadius) * doughnutRadius, 212 | startY = centerY + sin(startRadius) * doughnutRadius, 213 | endX2 = centerX + cos(startRadius) * cutoutRadius, 214 | endY2 = centerY + sin(startRadius) * cutoutRadius, 215 | endX = centerX + cos(endRadius) * doughnutRadius, 216 | endY = centerY + sin(endRadius) * doughnutRadius, 217 | startX2 = centerX + cos(endRadius) * cutoutRadius, 218 | startY2 = centerY + sin(endRadius) * cutoutRadius; 219 | var cmd = [ 220 | 'M', startX, startY,//Move pointer 221 | 'A', doughnutRadius, doughnutRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path 222 | 'L', startX2, startY2,//Draw line path(this line connects outer and innner arc paths) 223 | 'A', cutoutRadius, cutoutRadius, 0, largeArc, 0, endX2, endY2,//Draw inner arc path 224 | 'Z'//Cloth path 225 | ]; 226 | $paths[i].attr("d", cmd.join(' ')); 227 | startRadius += segmentAngle; 228 | } 229 | } 230 | function drawDoughnutText(animationDecimal, segmentTotal) { 231 | $summaryNumber 232 | .css({opacity: animationDecimal}) 233 | .text((segmentTotal * animationDecimal).toFixed(1)); 234 | var tmpNumber = settings.shortInt ? shortKInt(segmentTotal) : segmentTotal; 235 | $summaryNumber.html(tmpNumber).css('font-size', getScaleFontSize( $summaryNumber, tmpNumber)); 236 | } 237 | function animateFrame(cnt, drawData) { 238 | var easeAdjustedAnimationPercent =(settings.animation)? CapValue(easingFunction(cnt), null, 0) : 1; 239 | drawData(easeAdjustedAnimationPercent); 240 | } 241 | function animationLoop(drawData) { 242 | var animFrameAmount = (settings.animation)? 1 / CapValue(settings.animationSteps, Number.MAX_VALUE, 1) : 1, 243 | cnt =(settings.animation)? 0 : 1; 244 | requestAnimFrame(function() { 245 | cnt += animFrameAmount; 246 | animateFrame(cnt, drawData); 247 | if (cnt <= 1) { 248 | requestAnimFrame(arguments.callee); 249 | } else { 250 | settings.afterDrawed.call($this); 251 | } 252 | }); 253 | } 254 | function Max(arr) { 255 | return Math.max.apply(null, arr); 256 | } 257 | function Min(arr) { 258 | return Math.min.apply(null, arr); 259 | } 260 | function isNumber(n) { 261 | return !isNaN(parseFloat(n)) && isFinite(n); 262 | } 263 | function CapValue(valueToCap, maxValue, minValue) { 264 | if (isNumber(maxValue) && valueToCap > maxValue) return maxValue; 265 | if (isNumber(minValue) && valueToCap < minValue) return minValue; 266 | return valueToCap; 267 | } 268 | function shortKInt (int) { 269 | int = int.toString(); 270 | var strlen = int.length; 271 | if(strlen<5) 272 | return int; 273 | if(strlen<8) 274 | return '' + int.substring(0, strlen-3) + 'K'; 275 | return '' + int.substring( 0, strlen-6) + 'M'; 276 | } 277 | function getScaleFontSize(block, newText) { 278 | block.css('font-size', ''); 279 | newText = newText.toString().replace(/(<([^>]+)>)/ig,""); 280 | var newFontSize = block.width() / newText.length * settings.ratioFont; 281 | // Not very good : http://stephensite.net/WordPressSS/2008/02/19/how-to-calculate-the-character-width-accross-fonts-and-points/ 282 | // But best quick way the 1.5 number is to affinate in function of the police 283 | var maxCharForDefaultFont = block.width() - newText.length * block.css('font-size').replace(/px/, '') / settings.ratioFont; 284 | if(maxCharForDefaultFont<0) 285 | return newFontSize+'px'; 286 | else 287 | return ''; 288 | } 289 | /** 290 | function getScaleFontSize(block, newText) { 291 | block.css('font-size', ''); 292 | newText = newText.toString().replace(/(<([^>]+)>)/ig,""); 293 | var newFontSize = block.width() / newText.length; 294 | if(newFontSize