Chart.js 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457
  1. /*!
  2. * Chart.js
  3. * http://chartjs.org/
  4. *
  5. * Copyright 2013 Nick Downie
  6. * Released under the MIT license
  7. * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
  8. */
  9. //Define the global Chart Variable as a class.
  10. window.Chart = function(context) {
  11. var chart = this;
  12. //Easing functions adapted from Robert Penner's easing equations
  13. //http://www.robertpenner.com/easing/
  14. var animationOptions = {
  15. linear : function(t) {
  16. return t;
  17. },
  18. easeInQuad : function(t) {
  19. return t * t;
  20. },
  21. easeOutQuad : function(t) {
  22. return -1 * t * (t - 2);
  23. },
  24. easeInOutQuad : function(t) {
  25. if ((t /= 1 / 2) < 1)
  26. return 1 / 2 * t * t;
  27. return -1 / 2 * ((--t) * (t - 2) - 1);
  28. },
  29. easeInCubic : function(t) {
  30. return t * t * t;
  31. },
  32. easeOutCubic : function(t) {
  33. return 1 * (( t = t / 1 - 1) * t * t + 1);
  34. },
  35. easeInOutCubic : function(t) {
  36. if ((t /= 1 / 2) < 1)
  37. return 1 / 2 * t * t * t;
  38. return 1 / 2 * ((t -= 2) * t * t + 2);
  39. },
  40. easeInQuart : function(t) {
  41. return t * t * t * t;
  42. },
  43. easeOutQuart : function(t) {
  44. return -1 * (( t = t / 1 - 1) * t * t * t - 1);
  45. },
  46. easeInOutQuart : function(t) {
  47. if ((t /= 1 / 2) < 1)
  48. return 1 / 2 * t * t * t * t;
  49. return -1 / 2 * ((t -= 2) * t * t * t - 2);
  50. },
  51. easeInQuint : function(t) {
  52. return 1 * (t /= 1) * t * t * t * t;
  53. },
  54. easeOutQuint : function(t) {
  55. return 1 * (( t = t / 1 - 1) * t * t * t * t + 1);
  56. },
  57. easeInOutQuint : function(t) {
  58. if ((t /= 1 / 2) < 1)
  59. return 1 / 2 * t * t * t * t * t;
  60. return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
  61. },
  62. easeInSine : function(t) {
  63. return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1;
  64. },
  65. easeOutSine : function(t) {
  66. return 1 * Math.sin(t / 1 * (Math.PI / 2));
  67. },
  68. easeInOutSine : function(t) {
  69. return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1);
  70. },
  71. easeInExpo : function(t) {
  72. return (t == 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1));
  73. },
  74. easeOutExpo : function(t) {
  75. return (t == 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
  76. },
  77. easeInOutExpo : function(t) {
  78. if (t == 0)
  79. return 0;
  80. if (t == 1)
  81. return 1;
  82. if ((t /= 1 / 2) < 1)
  83. return 1 / 2 * Math.pow(2, 10 * (t - 1));
  84. return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
  85. },
  86. easeInCirc : function(t) {
  87. if (t >= 1)
  88. return t;
  89. return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
  90. },
  91. easeOutCirc : function(t) {
  92. return 1 * Math.sqrt(1 - ( t = t / 1 - 1) * t);
  93. },
  94. easeInOutCirc : function(t) {
  95. if ((t /= 1 / 2) < 1)
  96. return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
  97. return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
  98. },
  99. easeInElastic : function(t) {
  100. var s = 1.70158;
  101. var p = 0;
  102. var a = 1;
  103. if (t == 0)
  104. return 0;
  105. if ((t /= 1) == 1)
  106. return 1;
  107. if (!p)
  108. p = 1 * .3;
  109. if (a < Math.abs(1)) {
  110. a = 1;
  111. var s = p / 4;
  112. } else
  113. var s = p / (2 * Math.PI) * Math.asin(1 / a);
  114. return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
  115. },
  116. easeOutElastic : function(t) {
  117. var s = 1.70158;
  118. var p = 0;
  119. var a = 1;
  120. if (t == 0)
  121. return 0;
  122. if ((t /= 1) == 1)
  123. return 1;
  124. if (!p)
  125. p = 1 * .3;
  126. if (a < Math.abs(1)) {
  127. a = 1;
  128. var s = p / 4;
  129. } else
  130. var s = p / (2 * Math.PI) * Math.asin(1 / a);
  131. return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
  132. },
  133. easeInOutElastic : function(t) {
  134. var s = 1.70158;
  135. var p = 0;
  136. var a = 1;
  137. if (t == 0)
  138. return 0;
  139. if ((t /= 1 / 2) == 2)
  140. return 1;
  141. if (!p)
  142. p = 1 * (.3 * 1.5);
  143. if (a < Math.abs(1)) {
  144. a = 1;
  145. var s = p / 4;
  146. } else
  147. var s = p / (2 * Math.PI) * Math.asin(1 / a);
  148. if (t < 1)
  149. return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
  150. return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * .5 + 1;
  151. },
  152. easeInBack : function(t) {
  153. var s = 1.70158;
  154. return 1 * (t /= 1) * t * ((s + 1) * t - s);
  155. },
  156. easeOutBack : function(t) {
  157. var s = 1.70158;
  158. return 1 * (( t = t / 1 - 1) * t * ((s + 1) * t + s) + 1);
  159. },
  160. easeInOutBack : function(t) {
  161. var s = 1.70158;
  162. if ((t /= 1 / 2) < 1)
  163. return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
  164. return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
  165. },
  166. easeInBounce : function(t) {
  167. return 1 - animationOptions.easeOutBounce(1 - t);
  168. },
  169. easeOutBounce : function(t) {
  170. if ((t /= 1) < (1 / 2.75)) {
  171. return 1 * (7.5625 * t * t);
  172. } else if (t < (2 / 2.75)) {
  173. return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + .75);
  174. } else if (t < (2.5 / 2.75)) {
  175. return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375);
  176. } else {
  177. return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375);
  178. }
  179. },
  180. easeInOutBounce : function(t) {
  181. if (t < 1 / 2)
  182. return animationOptions.easeInBounce(t * 2) * .5;
  183. return animationOptions.easeOutBounce(t * 2 - 1) * .5 + 1 * .5;
  184. }
  185. };
  186. //Variables global to the chart
  187. var width = context.canvas.width;
  188. var height = context.canvas.height;
  189. //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
  190. if (window.devicePixelRatio) {
  191. context.canvas.style.width = width + "px";
  192. context.canvas.style.height = height + "px";
  193. context.canvas.height = height * window.devicePixelRatio;
  194. context.canvas.width = width * window.devicePixelRatio;
  195. context.scale(window.devicePixelRatio, window.devicePixelRatio);
  196. }
  197. this.PolarArea = function(data, options) {
  198. chart.PolarArea.defaults = {
  199. scaleOverlay : true,
  200. scaleOverride : false,
  201. scaleSteps : null,
  202. scaleStepWidth : null,
  203. scaleStartValue : null,
  204. scaleShowLine : true,
  205. scaleLineColor : "rgba(0,0,0,.1)",
  206. scaleLineWidth : 1,
  207. scaleShowLabels : true,
  208. scaleLabel : "<%=value%>",
  209. scaleFontFamily : "'Arial'",
  210. scaleFontSize : 12,
  211. scaleFontStyle : "normal",
  212. scaleFontColor : "#666",
  213. scaleShowLabelBackdrop : true,
  214. scaleBackdropColor : "rgba(255,255,255,0.75)",
  215. scaleBackdropPaddingY : 2,
  216. scaleBackdropPaddingX : 2,
  217. segmentShowStroke : true,
  218. segmentStrokeColor : "#fff",
  219. segmentStrokeWidth : 2,
  220. animation : true,
  221. animationSteps : 100,
  222. animationEasing : "easeOutBounce",
  223. animateRotate : true,
  224. animateScale : false,
  225. onAnimationComplete : null
  226. };
  227. var config = (options) ? mergeChartConfig(chart.PolarArea.defaults, options) : chart.PolarArea.defaults;
  228. return new PolarArea(data, config, context);
  229. };
  230. this.Radar = function(data, options) {
  231. chart.Radar.defaults = {
  232. scaleOverlay : false,
  233. scaleOverride : false,
  234. scaleSteps : null,
  235. scaleStepWidth : null,
  236. scaleStartValue : null,
  237. scaleShowLine : true,
  238. scaleLineColor : "rgba(0,0,0,.1)",
  239. scaleLineWidth : 1,
  240. scaleShowLabels : false,
  241. scaleLabel : "<%=value%>",
  242. scaleFontFamily : "'Arial'",
  243. scaleFontSize : 12,
  244. scaleFontStyle : "normal",
  245. scaleFontColor : "#666",
  246. scaleShowLabelBackdrop : true,
  247. scaleBackdropColor : "rgba(255,255,255,0.75)",
  248. scaleBackdropPaddingY : 2,
  249. scaleBackdropPaddingX : 2,
  250. angleShowLineOut : true,
  251. angleLineColor : "rgba(0,0,0,.1)",
  252. angleLineWidth : 1,
  253. pointLabelFontFamily : "'Arial'",
  254. pointLabelFontStyle : "normal",
  255. pointLabelFontSize : 12,
  256. pointLabelFontColor : "#666",
  257. pointDot : true,
  258. pointDotRadius : 3,
  259. pointDotStrokeWidth : 1,
  260. datasetStroke : true,
  261. datasetStrokeWidth : 2,
  262. datasetFill : true,
  263. animation : true,
  264. animationSteps : 60,
  265. animationEasing : "easeOutQuart",
  266. onAnimationComplete : null
  267. };
  268. var config = (options) ? mergeChartConfig(chart.Radar.defaults, options) : chart.Radar.defaults;
  269. return new Radar(data, config, context);
  270. };
  271. this.Pie = function(data, options) {
  272. chart.Pie.defaults = {
  273. segmentShowStroke : true,
  274. segmentStrokeColor : "#fff",
  275. segmentStrokeWidth : 2,
  276. animation : true,
  277. animationSteps : 100,
  278. animationEasing : "easeOutBounce",
  279. animateRotate : true,
  280. animateScale : false,
  281. onAnimationComplete : null
  282. };
  283. var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;
  284. return new Pie(data, config, context);
  285. };
  286. this.Doughnut = function(data, options) {
  287. chart.Doughnut.defaults = {
  288. segmentShowStroke : true,
  289. segmentStrokeColor : "#fff",
  290. segmentStrokeWidth : 2,
  291. percentageInnerCutout : 50,
  292. animation : true,
  293. animationSteps : 100,
  294. animationEasing : "easeOutBounce",
  295. animateRotate : true,
  296. animateScale : false,
  297. onAnimationComplete : null
  298. };
  299. var config = (options) ? mergeChartConfig(chart.Doughnut.defaults, options) : chart.Doughnut.defaults;
  300. return new Doughnut(data, config, context);
  301. };
  302. this.Line = function(data, options) {
  303. chart.Line.defaults = {
  304. scaleOverlay : false,
  305. scaleOverride : false,
  306. scaleSteps : null,
  307. scaleStepWidth : null,
  308. scaleStartValue : null,
  309. scaleLineColor : "rgba(0,0,0,.1)",
  310. scaleLineWidth : 1,
  311. scaleShowLabels : true,
  312. scaleLabel : "<%=value%>",
  313. scaleFontFamily : "'Arial'",
  314. scaleFontSize : 12,
  315. scaleFontStyle : "normal",
  316. scaleFontColor : "#666",
  317. scaleShowGridLines : true,
  318. scaleGridLineColor : "rgba(0,0,0,.05)",
  319. scaleGridLineWidth : 1,
  320. bezierCurve : true,
  321. pointDot : true,
  322. pointDotRadius : 4,
  323. pointDotStrokeWidth : 2,
  324. datasetStroke : true,
  325. datasetStrokeWidth : 2,
  326. datasetFill : true,
  327. animation : true,
  328. animationSteps : 60,
  329. animationEasing : "easeOutQuart",
  330. onAnimationComplete : null
  331. };
  332. var config = (options) ? mergeChartConfig(chart.Line.defaults, options) : chart.Line.defaults;
  333. return new Line(data, config, context);
  334. }
  335. this.Bar = function(data, options) {
  336. chart.Bar.defaults = {
  337. scaleOverlay : false,
  338. scaleOverride : false,
  339. scaleSteps : null,
  340. scaleStepWidth : null,
  341. scaleStartValue : null,
  342. scaleLineColor : "rgba(0,0,0,.1)",
  343. scaleLineWidth : 1,
  344. scaleShowLabels : true,
  345. scaleLabel : "<%=value%>",
  346. scaleFontFamily : "'Arial'",
  347. scaleFontSize : 12,
  348. scaleFontStyle : "normal",
  349. scaleFontColor : "#666",
  350. scaleShowGridLines : true,
  351. scaleGridLineColor : "rgba(0,0,0,.05)",
  352. scaleGridLineWidth : 1,
  353. barShowStroke : true,
  354. barStrokeWidth : 2,
  355. barValueSpacing : 5,
  356. barDatasetSpacing : 1,
  357. animation : true,
  358. animationSteps : 60,
  359. animationEasing : "easeOutQuart",
  360. onAnimationComplete : null
  361. };
  362. var config = (options) ? mergeChartConfig(chart.Bar.defaults, options) : chart.Bar.defaults;
  363. return new Bar(data, config, context);
  364. }
  365. var clear = function(c) {
  366. c.clearRect(0, 0, width, height);
  367. };
  368. var PolarArea = function(data, config, ctx) {
  369. var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
  370. calculateDrawingSizes();
  371. valueBounds = getValueBounds();
  372. labelTemplateString = (config.scaleShowLabels) ? config.scaleLabel : null;
  373. //Check and set the scale
  374. if (!config.scaleOverride) {
  375. calculatedScale = calculateScale(scaleHeight, valueBounds.maxSteps, valueBounds.minSteps, valueBounds.maxValue, valueBounds.minValue, labelTemplateString);
  376. } else {
  377. calculatedScale = {
  378. steps : config.scaleSteps,
  379. stepValue : config.scaleStepWidth,
  380. graphMin : config.scaleStartValue,
  381. labels : []
  382. }
  383. populateLabels(labelTemplateString, calculatedScale.labels, calculatedScale.steps, config.scaleStartValue, config.scaleStepWidth);
  384. }
  385. scaleHop = maxSize / (calculatedScale.steps);
  386. //Wrap in an animation loop wrapper
  387. animationLoop(config, drawScale, drawAllSegments, ctx);
  388. function calculateDrawingSizes() {
  389. maxSize = (Min([width, height]) / 2);
  390. //Remove whatever is larger - the font size or line width.
  391. maxSize -= Max([config.scaleFontSize * 0.5, config.scaleLineWidth * 0.5]);
  392. labelHeight = config.scaleFontSize * 2;
  393. //If we're drawing the backdrop - add the Y padding to the label height and remove from drawing region.
  394. if (config.scaleShowLabelBackdrop) {
  395. labelHeight += (2 * config.scaleBackdropPaddingY);
  396. maxSize -= config.scaleBackdropPaddingY * 1.5;
  397. }
  398. scaleHeight = maxSize;
  399. //If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
  400. labelHeight = Default(labelHeight, 5);
  401. }
  402. function drawScale() {
  403. for (var i = 0; i < calculatedScale.steps; i++) {
  404. //If the line object is there
  405. if (config.scaleShowLine) {
  406. ctx.beginPath();
  407. ctx.arc(width / 2, height / 2, scaleHop * (i + 1), 0, (Math.PI * 2), true);
  408. ctx.strokeStyle = config.scaleLineColor;
  409. ctx.lineWidth = config.scaleLineWidth;
  410. ctx.stroke();
  411. }
  412. if (config.scaleShowLabels) {
  413. ctx.textAlign = "center";
  414. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
  415. var label = calculatedScale.labels[i];
  416. //If the backdrop object is within the font object
  417. if (config.scaleShowLabelBackdrop) {
  418. var textWidth = ctx.measureText(label).width;
  419. ctx.fillStyle = config.scaleBackdropColor;
  420. ctx.beginPath();
  421. ctx.rect(Math.round(width / 2 - textWidth / 2 - config.scaleBackdropPaddingX), //X
  422. Math.round(height / 2 - (scaleHop * (i + 1)) - config.scaleFontSize * 0.5 - config.scaleBackdropPaddingY), //Y
  423. Math.round(textWidth + (config.scaleBackdropPaddingX * 2)), //Width
  424. Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY * 2)) //Height
  425. );
  426. ctx.fill();
  427. }
  428. ctx.textBaseline = "middle";
  429. ctx.fillStyle = config.scaleFontColor;
  430. ctx.fillText(label, width / 2, height / 2 - (scaleHop * (i + 1)));
  431. }
  432. }
  433. }
  434. function drawAllSegments(animationDecimal) {
  435. var startAngle = -Math.PI / 2, angleStep = (Math.PI * 2) / data.length, scaleAnimation = 1, rotateAnimation = 1;
  436. if (config.animation) {
  437. if (config.animateScale) {
  438. scaleAnimation = animationDecimal;
  439. }
  440. if (config.animateRotate) {
  441. rotateAnimation = animationDecimal;
  442. }
  443. }
  444. for (var i = 0; i < data.length; i++) {
  445. ctx.beginPath();
  446. ctx.arc(width / 2, height / 2, scaleAnimation * calculateOffset(data[i].value, calculatedScale, scaleHop), startAngle, startAngle + rotateAnimation * angleStep, false);
  447. ctx.lineTo(width / 2, height / 2);
  448. ctx.closePath();
  449. ctx.fillStyle = data[i].color;
  450. ctx.fill();
  451. if (config.segmentShowStroke) {
  452. ctx.strokeStyle = config.segmentStrokeColor;
  453. ctx.lineWidth = config.segmentStrokeWidth;
  454. ctx.stroke();
  455. }
  456. startAngle += rotateAnimation * angleStep;
  457. }
  458. }
  459. function getValueBounds() {
  460. var upperValue = Number.MIN_VALUE;
  461. var lowerValue = Number.MAX_VALUE;
  462. for (var i = 0; i < data.length; i++) {
  463. if (data[i].value > upperValue) {
  464. upperValue = data[i].value;
  465. }
  466. if (data[i].value < lowerValue) {
  467. lowerValue = data[i].value;
  468. }
  469. };
  470. var maxSteps = Math.floor((scaleHeight / (labelHeight * 0.66)));
  471. var minSteps = Math.floor((scaleHeight / labelHeight * 0.5));
  472. return {
  473. maxValue : upperValue,
  474. minValue : lowerValue,
  475. maxSteps : maxSteps,
  476. minSteps : minSteps
  477. };
  478. }
  479. }
  480. var Radar = function(data, config, ctx) {
  481. var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
  482. //If no labels are defined set to an empty array, so referencing length for looping doesn't blow up.
  483. if (!data.labels)
  484. data.labels = [];
  485. calculateDrawingSizes();
  486. var valueBounds = getValueBounds();
  487. labelTemplateString = (config.scaleShowLabels) ? config.scaleLabel : null;
  488. //Check and set the scale
  489. if (!config.scaleOverride) {
  490. calculatedScale = calculateScale(scaleHeight, valueBounds.maxSteps, valueBounds.minSteps, valueBounds.maxValue, valueBounds.minValue, labelTemplateString);
  491. } else {
  492. calculatedScale = {
  493. steps : config.scaleSteps,
  494. stepValue : config.scaleStepWidth,
  495. graphMin : config.scaleStartValue,
  496. labels : []
  497. }
  498. populateLabels(labelTemplateString, calculatedScale.labels, calculatedScale.steps, config.scaleStartValue, config.scaleStepWidth);
  499. }
  500. scaleHop = maxSize / (calculatedScale.steps);
  501. animationLoop(config, drawScale, drawAllDataPoints, ctx);
  502. //Radar specific functions.
  503. function drawAllDataPoints(animationDecimal) {
  504. var rotationDegree = (2 * Math.PI) / data.datasets[0].data.length;
  505. ctx.save();
  506. //translate to the centre of the canvas.
  507. ctx.translate(width / 2, height / 2);
  508. //We accept multiple data sets for radar charts, so show loop through each set
  509. for (var i = 0; i < data.datasets.length; i++) {
  510. ctx.beginPath();
  511. ctx.moveTo(0, animationDecimal * (-1 * calculateOffset(data.datasets[i].data[0], calculatedScale, scaleHop)));
  512. for (var j = 1; j < data.datasets[i].data.length; j++) {
  513. ctx.rotate(rotationDegree);
  514. ctx.lineTo(0, animationDecimal * (-1 * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop)));
  515. }
  516. ctx.closePath();
  517. ctx.fillStyle = data.datasets[i].fillColor;
  518. ctx.strokeStyle = data.datasets[i].strokeColor;
  519. ctx.lineWidth = config.datasetStrokeWidth;
  520. ctx.fill();
  521. ctx.stroke();
  522. if (config.pointDot) {
  523. ctx.fillStyle = data.datasets[i].pointColor;
  524. ctx.strokeStyle = data.datasets[i].pointStrokeColor;
  525. ctx.lineWidth = config.pointDotStrokeWidth;
  526. for (var k = 0; k < data.datasets[i].data.length; k++) {
  527. ctx.rotate(rotationDegree);
  528. ctx.beginPath();
  529. ctx.arc(0, animationDecimal * (-1 * calculateOffset(data.datasets[i].data[k], calculatedScale, scaleHop)), config.pointDotRadius, 2 * Math.PI, false);
  530. ctx.fill();
  531. ctx.stroke();
  532. }
  533. }
  534. ctx.rotate(rotationDegree);
  535. }
  536. ctx.restore();
  537. }
  538. function drawScale() {
  539. var rotationDegree = (2 * Math.PI) / data.datasets[0].data.length;
  540. ctx.save();
  541. ctx.translate(width / 2, height / 2);
  542. if (config.angleShowLineOut) {
  543. ctx.strokeStyle = config.angleLineColor;
  544. ctx.lineWidth = config.angleLineWidth;
  545. for (var h = 0; h < data.datasets[0].data.length; h++) {
  546. ctx.rotate(rotationDegree);
  547. ctx.beginPath();
  548. ctx.moveTo(0, 0);
  549. ctx.lineTo(0, -maxSize);
  550. ctx.stroke();
  551. }
  552. }
  553. for (var i = 0; i < calculatedScale.steps; i++) {
  554. ctx.beginPath();
  555. if (config.scaleShowLine) {
  556. ctx.strokeStyle = config.scaleLineColor;
  557. ctx.lineWidth = config.scaleLineWidth;
  558. ctx.moveTo(0, -scaleHop * (i + 1));
  559. for (var j = 0; j < data.datasets[0].data.length; j++) {
  560. ctx.rotate(rotationDegree);
  561. ctx.lineTo(0, -scaleHop * (i + 1));
  562. }
  563. ctx.closePath();
  564. ctx.stroke();
  565. }
  566. if (config.scaleShowLabels) {
  567. ctx.textAlign = 'center';
  568. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
  569. ctx.textBaseline = "middle";
  570. if (config.scaleShowLabelBackdrop) {
  571. var textWidth = ctx.measureText(calculatedScale.labels[i]).width;
  572. ctx.fillStyle = config.scaleBackdropColor;
  573. ctx.beginPath();
  574. ctx.rect(Math.round(-textWidth / 2 - config.scaleBackdropPaddingX), //X
  575. Math.round((-scaleHop * (i + 1)) - config.scaleFontSize * 0.5 - config.scaleBackdropPaddingY), //Y
  576. Math.round(textWidth + (config.scaleBackdropPaddingX * 2)), //Width
  577. Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY * 2)) //Height
  578. );
  579. ctx.fill();
  580. }
  581. ctx.fillStyle = config.scaleFontColor;
  582. ctx.fillText(calculatedScale.labels[i], 0, -scaleHop * (i + 1));
  583. }
  584. }
  585. for (var k = 0; k < data.labels.length; k++) {
  586. ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize + "px " + config.pointLabelFontFamily;
  587. ctx.fillStyle = config.pointLabelFontColor;
  588. var opposite = Math.sin(rotationDegree * k) * (maxSize + config.pointLabelFontSize);
  589. var adjacent = Math.cos(rotationDegree * k) * (maxSize + config.pointLabelFontSize);
  590. if (rotationDegree * k == Math.PI || rotationDegree * k == 0) {
  591. ctx.textAlign = "center";
  592. } else if (rotationDegree * k > Math.PI) {
  593. ctx.textAlign = "right";
  594. } else {
  595. ctx.textAlign = "left";
  596. }
  597. ctx.textBaseline = "middle";
  598. ctx.fillText(data.labels[k], opposite, -adjacent);
  599. }
  600. ctx.restore();
  601. };
  602. function calculateDrawingSizes() {
  603. maxSize = (Min([width, height]) / 2);
  604. labelHeight = config.scaleFontSize * 2;
  605. var labelLength = 0;
  606. for (var i = 0; i < data.labels.length; i++) {
  607. ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize + "px " + config.pointLabelFontFamily;
  608. var textMeasurement = ctx.measureText(data.labels[i]).width;
  609. if (textMeasurement > labelLength)
  610. labelLength = textMeasurement;
  611. }
  612. //Figure out whats the largest - the height of the text or the width of what's there, and minus it from the maximum usable size.
  613. maxSize -= Max([labelLength, ((config.pointLabelFontSize / 2) * 1.5)]);
  614. maxSize -= config.pointLabelFontSize;
  615. maxSize = CapValue(maxSize, null, 0);
  616. scaleHeight = maxSize;
  617. //If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
  618. labelHeight = Default(labelHeight, 5);
  619. };
  620. function getValueBounds() {
  621. var upperValue = Number.MIN_VALUE;
  622. var lowerValue = Number.MAX_VALUE;
  623. for (var i = 0; i < data.datasets.length; i++) {
  624. for (var j = 0; j < data.datasets[i].data.length; j++) {
  625. if (data.datasets[i].data[j] > upperValue) {
  626. upperValue = data.datasets[i].data[j]
  627. }
  628. if (data.datasets[i].data[j] < lowerValue) {
  629. lowerValue = data.datasets[i].data[j]
  630. }
  631. }
  632. }
  633. var maxSteps = Math.floor((scaleHeight / (labelHeight * 0.66)));
  634. var minSteps = Math.floor((scaleHeight / labelHeight * 0.5));
  635. return {
  636. maxValue : upperValue,
  637. minValue : lowerValue,
  638. maxSteps : maxSteps,
  639. minSteps : minSteps
  640. };
  641. }
  642. }
  643. var Pie = function(data, config, ctx) {
  644. var segmentTotal = 0;
  645. //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
  646. var pieRadius = Min([height / 2, width / 2]) - 5;
  647. for (var i = 0; i < data.length; i++) {
  648. segmentTotal += data[i].value;
  649. }
  650. animationLoop(config, null, drawPieSegments, ctx);
  651. function drawPieSegments(animationDecimal) {
  652. var cumulativeAngle = -Math.PI / 2, scaleAnimation = 1, rotateAnimation = 1;
  653. if (config.animation) {
  654. if (config.animateScale) {
  655. scaleAnimation = animationDecimal;
  656. }
  657. if (config.animateRotate) {
  658. rotateAnimation = animationDecimal;
  659. }
  660. }
  661. for (var i = 0; i < data.length; i++) {
  662. var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (Math.PI * 2));
  663. ctx.beginPath();
  664. ctx.arc(width / 2, height / 2, scaleAnimation * pieRadius, cumulativeAngle, cumulativeAngle + segmentAngle);
  665. ctx.lineTo(width / 2, height / 2);
  666. ctx.closePath();
  667. ctx.fillStyle = data[i].color;
  668. ctx.fill();
  669. if (config.segmentShowStroke) {
  670. ctx.lineWidth = config.segmentStrokeWidth;
  671. ctx.strokeStyle = config.segmentStrokeColor;
  672. ctx.stroke();
  673. }
  674. cumulativeAngle += segmentAngle;
  675. }
  676. // renfufei@qq.com; 计算 文字
  677. var startAngle = -Math.PI / 2;
  678. for (var i = 0; i < data.length; i++) {
  679. var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (Math.PI * 2));
  680. // 反色,还未处理
  681. var color = "#000000" || data[i].color;
  682. var text = data[i].text;
  683. var newAngle = startAngle + segmentAngle;
  684. var centerAngle = (startAngle + newAngle)/2;
  685. // 计算坐标点
  686. // (width/2, height/2 是中心点)
  687. var r = pieRadius;
  688. var x = width/2 + Math.cos(centerAngle) * r /2;
  689. var y = height/2 + Math.sin(centerAngle) * r /2;
  690. //
  691. ctx.fillStyle = color;
  692. ctx.fillText(text,x,y);
  693. startAngle = newAngle;
  694. if(data.length === i+1){
  695. //console.dir(ctx);
  696. }
  697. }
  698. }
  699. }
  700. var Doughnut = function(data, config, ctx) {
  701. var segmentTotal = 0;
  702. //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
  703. var doughnutRadius = Min([height / 2, width / 2]) - 5;
  704. var cutoutRadius = doughnutRadius * (config.percentageInnerCutout / 100);
  705. for (var i = 0; i < data.length; i++) {
  706. segmentTotal += data[i].value;
  707. }
  708. animationLoop(config, null, drawPieSegments, ctx);
  709. function drawPieSegments(animationDecimal) {
  710. var cumulativeAngle = -Math.PI / 2, scaleAnimation = 1, rotateAnimation = 1;
  711. if (config.animation) {
  712. if (config.animateScale) {
  713. scaleAnimation = animationDecimal;
  714. }
  715. if (config.animateRotate) {
  716. rotateAnimation = animationDecimal;
  717. }
  718. }
  719. for (var i = 0; i < data.length; i++) {
  720. var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (Math.PI * 2));
  721. ctx.beginPath();
  722. ctx.arc(width / 2, height / 2, scaleAnimation * doughnutRadius, cumulativeAngle, cumulativeAngle + segmentAngle, false);
  723. ctx.arc(width / 2, height / 2, scaleAnimation * cutoutRadius, cumulativeAngle + segmentAngle, cumulativeAngle, true);
  724. ctx.closePath();
  725. ctx.fillStyle = data[i].color;
  726. ctx.fill();
  727. if (config.segmentShowStroke) {
  728. ctx.lineWidth = config.segmentStrokeWidth;
  729. ctx.strokeStyle = config.segmentStrokeColor;
  730. ctx.stroke();
  731. }
  732. cumulativeAngle += segmentAngle;
  733. }
  734. }
  735. }
  736. var Line = function(data, config, ctx) {
  737. var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop, widestXLabel, xAxisLength, yAxisPosX, xAxisPosY, rotateLabels = 0;
  738. calculateDrawingSizes();
  739. valueBounds = getValueBounds();
  740. //Check and set the scale
  741. labelTemplateString = (config.scaleShowLabels) ? config.scaleLabel : "";
  742. if (!config.scaleOverride) {
  743. calculatedScale = calculateScale(scaleHeight, valueBounds.maxSteps, valueBounds.minSteps, valueBounds.maxValue, valueBounds.minValue, labelTemplateString);
  744. } else {
  745. calculatedScale = {
  746. steps : config.scaleSteps,
  747. stepValue : config.scaleStepWidth,
  748. graphMin : config.scaleStartValue,
  749. labels : []
  750. }
  751. populateLabels(labelTemplateString, calculatedScale.labels, calculatedScale.steps, config.scaleStartValue, config.scaleStepWidth);
  752. }
  753. scaleHop = Math.floor(scaleHeight / calculatedScale.steps);
  754. calculateXAxisSize();
  755. animationLoop(config, drawScale, drawLines, ctx);
  756. function drawLines(animPc) {
  757. for (var i = 0; i < data.datasets.length; i++) {
  758. ctx.strokeStyle = data.datasets[i].strokeColor;
  759. ctx.lineWidth = config.datasetStrokeWidth;
  760. ctx.beginPath();
  761. ctx.moveTo(yAxisPosX, xAxisPosY - animPc * (calculateOffset(data.datasets[i].data[0], calculatedScale, scaleHop)))
  762. for (var j = 1; j < data.datasets[i].data.length; j++) {
  763. if (config.bezierCurve) {
  764. ctx.bezierCurveTo(xPos(j - 0.5), yPos(i, j - 1), xPos(j - 0.5), yPos(i, j), xPos(j), yPos(i, j));
  765. } else {
  766. ctx.lineTo(xPos(j), yPos(i, j));
  767. }
  768. }
  769. ctx.stroke();
  770. if (config.datasetFill) {
  771. ctx.lineTo(yAxisPosX + (valueHop * (data.datasets[i].data.length - 1)), xAxisPosY);
  772. ctx.lineTo(yAxisPosX, xAxisPosY);
  773. ctx.closePath();
  774. ctx.fillStyle = data.datasets[i].fillColor;
  775. ctx.fill();
  776. } else {
  777. ctx.closePath();
  778. }
  779. if (config.pointDot) {
  780. ctx.fillStyle = data.datasets[i].pointColor;
  781. ctx.strokeStyle = data.datasets[i].pointStrokeColor;
  782. ctx.lineWidth = config.pointDotStrokeWidth;
  783. for (var k = 0; k < data.datasets[i].data.length; k++) {
  784. ctx.beginPath();
  785. ctx.arc(yAxisPosX + (valueHop * k), xAxisPosY - animPc * (calculateOffset(data.datasets[i].data[k], calculatedScale, scaleHop)), config.pointDotRadius, 0, Math.PI * 2, true);
  786. ctx.fill();
  787. ctx.stroke();
  788. }
  789. }
  790. }
  791. function yPos(dataSet, iteration) {
  792. return xAxisPosY - animPc * (calculateOffset(data.datasets[dataSet].data[iteration], calculatedScale, scaleHop));
  793. }
  794. function xPos(iteration) {
  795. return yAxisPosX + (valueHop * iteration);
  796. }
  797. }
  798. function drawScale() {
  799. //X axis line
  800. ctx.lineWidth = config.scaleLineWidth;
  801. ctx.strokeStyle = config.scaleLineColor;
  802. ctx.beginPath();
  803. ctx.moveTo(width - widestXLabel / 2 + 5, xAxisPosY);
  804. ctx.lineTo(width - (widestXLabel / 2) - xAxisLength - 5, xAxisPosY);
  805. ctx.stroke();
  806. if (rotateLabels > 0) {
  807. ctx.save();
  808. ctx.textAlign = "right";
  809. } else {
  810. ctx.textAlign = "center";
  811. }
  812. ctx.fillStyle = config.scaleFontColor;
  813. for (var i = 0; i < data.labels.length; i++) {
  814. ctx.save();
  815. if (rotateLabels > 0) {
  816. ctx.translate(yAxisPosX + i * valueHop, xAxisPosY + config.scaleFontSize);
  817. ctx.rotate(-(rotateLabels * (Math.PI / 180)));
  818. ctx.fillText(data.labels[i], 0, 0);
  819. ctx.restore();
  820. } else {
  821. ctx.fillText(data.labels[i], yAxisPosX + i * valueHop, xAxisPosY + config.scaleFontSize + 3);
  822. }
  823. ctx.beginPath();
  824. ctx.moveTo(yAxisPosX + i * valueHop, xAxisPosY + 3);
  825. //Check i isnt 0, so we dont go over the Y axis twice.
  826. if (config.scaleShowGridLines && i > 0) {
  827. ctx.lineWidth = config.scaleGridLineWidth;
  828. ctx.strokeStyle = config.scaleGridLineColor;
  829. ctx.lineTo(yAxisPosX + i * valueHop, 5);
  830. } else {
  831. ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY + 3);
  832. }
  833. ctx.stroke();
  834. }
  835. //Y axis
  836. ctx.lineWidth = config.scaleLineWidth;
  837. ctx.strokeStyle = config.scaleLineColor;
  838. ctx.beginPath();
  839. ctx.moveTo(yAxisPosX, xAxisPosY + 5);
  840. ctx.lineTo(yAxisPosX, 5);
  841. ctx.stroke();
  842. ctx.textAlign = "right";
  843. ctx.textBaseline = "middle";
  844. for (var j = 0; j < calculatedScale.steps; j++) {
  845. ctx.beginPath();
  846. ctx.moveTo(yAxisPosX - 3, xAxisPosY - ((j + 1) * scaleHop));
  847. if (config.scaleShowGridLines) {
  848. ctx.lineWidth = config.scaleGridLineWidth;
  849. ctx.strokeStyle = config.scaleGridLineColor;
  850. ctx.lineTo(yAxisPosX + xAxisLength + 5, xAxisPosY - ((j + 1) * scaleHop));
  851. } else {
  852. ctx.lineTo(yAxisPosX - 0.5, xAxisPosY - ((j + 1) * scaleHop));
  853. }
  854. ctx.stroke();
  855. if (config.scaleShowLabels) {
  856. ctx.fillText(calculatedScale.labels[j], yAxisPosX - 8, xAxisPosY - ((j + 1) * scaleHop));
  857. }
  858. }
  859. }
  860. function calculateXAxisSize() {
  861. var longestText = 1;
  862. //if we are showing the labels
  863. if (config.scaleShowLabels) {
  864. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
  865. for (var i = 0; i < calculatedScale.labels.length; i++) {
  866. var measuredText = ctx.measureText(calculatedScale.labels[i]).width;
  867. longestText = (measuredText > longestText) ? measuredText : longestText;
  868. }
  869. //Add a little extra padding from the y axis
  870. longestText += 10;
  871. }
  872. xAxisLength = width - longestText - widestXLabel;
  873. valueHop = Math.floor(xAxisLength / (data.labels.length - 1));
  874. yAxisPosX = width - widestXLabel / 2 - xAxisLength;
  875. xAxisPosY = scaleHeight + config.scaleFontSize / 2;
  876. }
  877. function calculateDrawingSizes() {
  878. maxSize = height;
  879. //Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees.
  880. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
  881. widestXLabel = 1;
  882. for (var i = 0; i < data.labels.length; i++) {
  883. var textLength = ctx.measureText(data.labels[i]).width;
  884. //If the text length is longer - make that equal to longest text!
  885. widestXLabel = (textLength > widestXLabel) ? textLength : widestXLabel;
  886. }
  887. if (width / data.labels.length < widestXLabel) {
  888. rotateLabels = 45;
  889. if (width / data.labels.length < Math.cos(rotateLabels) * widestXLabel) {
  890. rotateLabels = 90;
  891. maxSize -= widestXLabel;
  892. } else {
  893. maxSize -= Math.sin(rotateLabels) * widestXLabel;
  894. }
  895. } else {
  896. maxSize -= config.scaleFontSize;
  897. }
  898. //Add a little padding between the x line and the text
  899. maxSize -= 5;
  900. labelHeight = config.scaleFontSize;
  901. maxSize -= labelHeight;
  902. //Set 5 pixels greater than the font size to allow for a little padding from the X axis.
  903. scaleHeight = maxSize;
  904. //Then get the area above we can safely draw on.
  905. }
  906. function getValueBounds() {
  907. var upperValue = Number.MIN_VALUE;
  908. var lowerValue = Number.MAX_VALUE;
  909. for (var i = 0; i < data.datasets.length; i++) {
  910. for (var j = 0; j < data.datasets[i].data.length; j++) {
  911. if (data.datasets[i].data[j] > upperValue) {
  912. upperValue = data.datasets[i].data[j]
  913. };
  914. if (data.datasets[i].data[j] < lowerValue) {
  915. lowerValue = data.datasets[i].data[j]
  916. };
  917. }
  918. };
  919. var maxSteps = Math.floor((scaleHeight / (labelHeight * 0.66)));
  920. var minSteps = Math.floor((scaleHeight / labelHeight * 0.5));
  921. return {
  922. maxValue : upperValue,
  923. minValue : lowerValue,
  924. maxSteps : maxSteps,
  925. minSteps : minSteps
  926. };
  927. }
  928. }
  929. var Bar = function(data, config, ctx) {
  930. var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop, widestXLabel, xAxisLength, yAxisPosX, xAxisPosY, barWidth, rotateLabels = 0;
  931. calculateDrawingSizes();
  932. valueBounds = getValueBounds();
  933. //Check and set the scale
  934. labelTemplateString = (config.scaleShowLabels) ? config.scaleLabel : "";
  935. if (!config.scaleOverride) {
  936. calculatedScale = calculateScale(scaleHeight, valueBounds.maxSteps, valueBounds.minSteps, valueBounds.maxValue, valueBounds.minValue, labelTemplateString);
  937. } else {
  938. calculatedScale = {
  939. steps : config.scaleSteps,
  940. stepValue : config.scaleStepWidth,
  941. graphMin : config.scaleStartValue,
  942. labels : []
  943. }
  944. populateLabels(labelTemplateString, calculatedScale.labels, calculatedScale.steps, config.scaleStartValue, config.scaleStepWidth);
  945. }
  946. scaleHop = Math.floor(scaleHeight / calculatedScale.steps);
  947. calculateXAxisSize();
  948. animationLoop(config, drawScale, drawBars, ctx);
  949. function drawBars(animPc) {
  950. ctx.lineWidth = config.barStrokeWidth;
  951. for (var i = 0; i < data.datasets.length; i++) {
  952. ctx.fillStyle = data.datasets[i].fillColor;
  953. ctx.strokeStyle = data.datasets[i].strokeColor;
  954. for (var j = 0; j < data.datasets[i].data.length; j++) {
  955. var barOffset = yAxisPosX + config.barValueSpacing + valueHop * j + barWidth * i + config.barDatasetSpacing * i + config.barStrokeWidth * i;
  956. ctx.beginPath();
  957. ctx.moveTo(barOffset, xAxisPosY);
  958. ctx.lineTo(barOffset, xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2));
  959. ctx.lineTo(barOffset + barWidth, xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2));
  960. ctx.lineTo(barOffset + barWidth, xAxisPosY);
  961. if (config.barShowStroke) {
  962. ctx.stroke();
  963. }
  964. ctx.closePath();
  965. ctx.fill();
  966. }
  967. }
  968. }
  969. function drawScale() {
  970. //X axis line
  971. ctx.lineWidth = config.scaleLineWidth;
  972. ctx.strokeStyle = config.scaleLineColor;
  973. ctx.beginPath();
  974. ctx.moveTo(width - widestXLabel / 2 + 5, xAxisPosY);
  975. ctx.lineTo(width - (widestXLabel / 2) - xAxisLength - 5, xAxisPosY);
  976. ctx.stroke();
  977. if (rotateLabels > 0) {
  978. ctx.save();
  979. ctx.textAlign = "right";
  980. } else {
  981. ctx.textAlign = "center";
  982. }
  983. ctx.fillStyle = config.scaleFontColor;
  984. for (var i = 0; i < data.labels.length; i++) {
  985. ctx.save();
  986. if (rotateLabels > 0) {
  987. ctx.translate(yAxisPosX + i * valueHop, xAxisPosY + config.scaleFontSize);
  988. ctx.rotate(-(rotateLabels * (Math.PI / 180)));
  989. ctx.fillText(data.labels[i], 0, 0);
  990. ctx.restore();
  991. } else {
  992. ctx.fillText(data.labels[i], yAxisPosX + i * valueHop + valueHop / 2, xAxisPosY + config.scaleFontSize + 3);
  993. }
  994. ctx.beginPath();
  995. ctx.moveTo(yAxisPosX + (i + 1) * valueHop, xAxisPosY + 3);
  996. //Check i isnt 0, so we dont go over the Y axis twice.
  997. ctx.lineWidth = config.scaleGridLineWidth;
  998. ctx.strokeStyle = config.scaleGridLineColor;
  999. ctx.lineTo(yAxisPosX + (i + 1) * valueHop, 5);
  1000. ctx.stroke();
  1001. }
  1002. //Y axis
  1003. ctx.lineWidth = config.scaleLineWidth;
  1004. ctx.strokeStyle = config.scaleLineColor;
  1005. ctx.beginPath();
  1006. ctx.moveTo(yAxisPosX, xAxisPosY + 5);
  1007. ctx.lineTo(yAxisPosX, 5);
  1008. ctx.stroke();
  1009. ctx.textAlign = "right";
  1010. ctx.textBaseline = "middle";
  1011. for (var j = 0; j < calculatedScale.steps; j++) {
  1012. ctx.beginPath();
  1013. ctx.moveTo(yAxisPosX - 3, xAxisPosY - ((j + 1) * scaleHop));
  1014. if (config.scaleShowGridLines) {
  1015. ctx.lineWidth = config.scaleGridLineWidth;
  1016. ctx.strokeStyle = config.scaleGridLineColor;
  1017. ctx.lineTo(yAxisPosX + xAxisLength + 5, xAxisPosY - ((j + 1) * scaleHop));
  1018. } else {
  1019. ctx.lineTo(yAxisPosX - 0.5, xAxisPosY - ((j + 1) * scaleHop));
  1020. }
  1021. ctx.stroke();
  1022. if (config.scaleShowLabels) {
  1023. ctx.fillText(calculatedScale.labels[j], yAxisPosX - 8, xAxisPosY - ((j + 1) * scaleHop));
  1024. }
  1025. }
  1026. }
  1027. function calculateXAxisSize() {
  1028. var longestText = 1;
  1029. //if we are showing the labels
  1030. if (config.scaleShowLabels) {
  1031. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
  1032. for (var i = 0; i < calculatedScale.labels.length; i++) {
  1033. var measuredText = ctx.measureText(calculatedScale.labels[i]).width;
  1034. longestText = (measuredText > longestText) ? measuredText : longestText;
  1035. }
  1036. //Add a little extra padding from the y axis
  1037. longestText += 10;
  1038. }
  1039. xAxisLength = width - longestText - widestXLabel;
  1040. valueHop = Math.floor(xAxisLength / (data.labels.length));
  1041. barWidth = (valueHop - config.scaleGridLineWidth * 2 - (config.barValueSpacing * 2) - (config.barDatasetSpacing * data.datasets.length - 1) - ((config.barStrokeWidth / 2) * data.datasets.length - 1)) / data.datasets.length;
  1042. yAxisPosX = width - widestXLabel / 2 - xAxisLength;
  1043. xAxisPosY = scaleHeight + config.scaleFontSize / 2;
  1044. }
  1045. function calculateDrawingSizes() {
  1046. maxSize = height;
  1047. //Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees.
  1048. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
  1049. widestXLabel = 1;
  1050. for (var i = 0; i < data.labels.length; i++) {
  1051. var textLength = ctx.measureText(data.labels[i]).width;
  1052. //If the text length is longer - make that equal to longest text!
  1053. widestXLabel = (textLength > widestXLabel) ? textLength : widestXLabel;
  1054. }
  1055. if (width / data.labels.length < widestXLabel) {
  1056. rotateLabels = 45;
  1057. if (width / data.labels.length < Math.cos(rotateLabels) * widestXLabel) {
  1058. rotateLabels = 90;
  1059. maxSize -= widestXLabel;
  1060. } else {
  1061. maxSize -= Math.sin(rotateLabels) * widestXLabel;
  1062. }
  1063. } else {
  1064. maxSize -= config.scaleFontSize;
  1065. }
  1066. //Add a little padding between the x line and the text
  1067. maxSize -= 5;
  1068. labelHeight = config.scaleFontSize;
  1069. maxSize -= labelHeight;
  1070. //Set 5 pixels greater than the font size to allow for a little padding from the X axis.
  1071. scaleHeight = maxSize;
  1072. //Then get the area above we can safely draw on.
  1073. }
  1074. function getValueBounds() {
  1075. var upperValue = Number.MIN_VALUE;
  1076. var lowerValue = Number.MAX_VALUE;
  1077. for (var i = 0; i < data.datasets.length; i++) {
  1078. for (var j = 0; j < data.datasets[i].data.length; j++) {
  1079. if (data.datasets[i].data[j] > upperValue) {
  1080. upperValue = data.datasets[i].data[j]
  1081. };
  1082. if (data.datasets[i].data[j] < lowerValue) {
  1083. lowerValue = data.datasets[i].data[j]
  1084. };
  1085. }
  1086. };
  1087. var maxSteps = Math.floor((scaleHeight / (labelHeight * 0.66)));
  1088. var minSteps = Math.floor((scaleHeight / labelHeight * 0.5));
  1089. return {
  1090. maxValue : upperValue,
  1091. minValue : lowerValue,
  1092. maxSteps : maxSteps,
  1093. minSteps : minSteps
  1094. };
  1095. }
  1096. }
  1097. function calculateOffset(val, calculatedScale, scaleHop) {
  1098. var outerValue = calculatedScale.steps * calculatedScale.stepValue;
  1099. var adjustedValue = val - calculatedScale.graphMin;
  1100. var scalingFactor = CapValue(adjustedValue / outerValue, 1, 0);
  1101. return (scaleHop * calculatedScale.steps) * scalingFactor;
  1102. }
  1103. function animationLoop(config, drawScale, drawData, ctx) {
  1104. var animFrameAmount = (config.animation) ? 1 / CapValue(config.animationSteps, Number.MAX_VALUE, 1) : 1, easingFunction = animationOptions[config.animationEasing], percentAnimComplete = (config.animation) ? 0 : 1;
  1105. if ( typeof drawScale !== "function")
  1106. drawScale = function() {
  1107. };
  1108. requestAnimFrame(animLoop);
  1109. function animateFrame() {
  1110. var easeAdjustedAnimationPercent = (config.animation) ? CapValue(easingFunction(percentAnimComplete), null, 0) : 1;
  1111. clear(ctx);
  1112. if (config.scaleOverlay) {
  1113. drawData(easeAdjustedAnimationPercent);
  1114. drawScale();
  1115. } else {
  1116. drawScale();
  1117. drawData(easeAdjustedAnimationPercent);
  1118. }
  1119. }
  1120. function animLoop() {
  1121. //We need to check if the animation is incomplete (less than 1), or complete (1).
  1122. percentAnimComplete += animFrameAmount;
  1123. animateFrame();
  1124. //Stop the loop continuing forever
  1125. if (percentAnimComplete <= 1) {
  1126. requestAnimFrame(animLoop);
  1127. } else {
  1128. if ( typeof config.onAnimationComplete == "function")
  1129. config.onAnimationComplete();
  1130. }
  1131. }
  1132. }
  1133. //Declare global functions to be called within this namespace here.
  1134. // shim layer with setTimeout fallback
  1135. var requestAnimFrame = (function() {
  1136. return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  1137. function(callback) {
  1138. window.setTimeout(callback, 1000 / 60);
  1139. };
  1140. })();
  1141. function calculateScale(drawingHeight, maxSteps, minSteps, maxValue, minValue, labelTemplateString) {
  1142. var graphMin, graphMax, graphRange, stepValue, numberOfSteps, valueRange, rangeOrderOfMagnitude, decimalNum;
  1143. valueRange = maxValue - minValue;
  1144. rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange);
  1145. graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
  1146. graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
  1147. graphRange = graphMax - graphMin;
  1148. stepValue = Math.pow(10, rangeOrderOfMagnitude);
  1149. numberOfSteps = Math.round(graphRange / stepValue);
  1150. //Compare number of steps to the max and min for that size graph, and add in half steps if need be.
  1151. while (numberOfSteps < minSteps || numberOfSteps > maxSteps) {
  1152. if (numberOfSteps < minSteps) {
  1153. stepValue /= 2;
  1154. numberOfSteps = Math.round(graphRange / stepValue);
  1155. } else {
  1156. stepValue *= 2;
  1157. numberOfSteps = Math.round(graphRange / stepValue);
  1158. }
  1159. };
  1160. var labels = [];
  1161. populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue);
  1162. return {
  1163. steps : numberOfSteps,
  1164. stepValue : stepValue,
  1165. graphMin : graphMin,
  1166. labels : labels
  1167. }
  1168. function calculateOrderOfMagnitude(val) {
  1169. return Math.floor(Math.log(val) / Math.LN10);
  1170. }
  1171. }
  1172. //Populate an array of all the labels by interpolating the string.
  1173. function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) {
  1174. if (labelTemplateString) {
  1175. //Fix floating point errors by setting to fixed the on the same decimal as the stepValue.
  1176. for (var i = 1; i < numberOfSteps + 1; i++) {
  1177. labels.push(tmpl(labelTemplateString, {
  1178. value : (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))
  1179. }));
  1180. }
  1181. }
  1182. }
  1183. //Max value from array
  1184. function Max(array) {
  1185. return Math.max.apply(Math, array);
  1186. };
  1187. //Min value from array
  1188. function Min(array) {
  1189. return Math.min.apply(Math, array);
  1190. };
  1191. //Default if undefined
  1192. function Default(userDeclared, valueIfFalse) {
  1193. if (!userDeclared) {
  1194. return valueIfFalse;
  1195. } else {
  1196. return userDeclared;
  1197. }
  1198. };
  1199. //Is a number function
  1200. function isNumber(n) {
  1201. return !isNaN(parseFloat(n)) && isFinite(n);
  1202. }
  1203. //Apply cap a value at a high or low number
  1204. function CapValue(valueToCap, maxValue, minValue) {
  1205. if (isNumber(maxValue)) {
  1206. if (valueToCap > maxValue) {
  1207. return maxValue;
  1208. }
  1209. }
  1210. if (isNumber(minValue)) {
  1211. if (valueToCap < minValue) {
  1212. return minValue;
  1213. }
  1214. }
  1215. return valueToCap;
  1216. }
  1217. function getDecimalPlaces(num) {
  1218. var numberOfDecimalPlaces;
  1219. if (num % 1 != 0) {
  1220. return num.toString().split(".")[1].length
  1221. } else {
  1222. return 0;
  1223. }
  1224. }
  1225. function mergeChartConfig(defaults, userDefined) {
  1226. var returnObj = {};
  1227. for (var attrname in defaults) {
  1228. returnObj[attrname] = defaults[attrname];
  1229. }
  1230. for (var attrname in userDefined) {
  1231. returnObj[attrname] = userDefined[attrname];
  1232. }
  1233. return returnObj;
  1234. }
  1235. //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
  1236. var cache = {};
  1237. function tmpl(str, data) {
  1238. // Figure out if we're getting a template, or if we need to
  1239. // load the template - and be sure to cache the result.
  1240. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
  1241. // Generate a reusable function that will serve as a template
  1242. // generator (and which will be cached).
  1243. new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +
  1244. // Introduce the data as local variables using with(){}
  1245. "with(obj){p.push('" +
  1246. // Convert the template into pure JavaScript
  1247. str.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'") + "');}return p.join('');");
  1248. // Provide some basic currying to the user
  1249. return data ? fn(data) : fn;
  1250. };
  1251. }