· 9 years ago · Jan 11, 2017, 12:14 PM
1<!doctype html>
2<html>
3<head>
4<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>
5<title>sample.bqsr.baserecal.markdup.sortsam.bwa.bam</title>
6<script>/*!
7 * Chart.js
8 * http://chartjs.org/
9 * Version: 1.0.1-beta.3
10 *
11 * Copyright 2014 Nick Downie
12 * Released under the MIT license
13 * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
14 */
15
16
17(function(){
18
19 "use strict";
20
21 //Declare root variable - window in the browser, global on the server
22 var root = this,
23 previous = root.Chart;
24
25 //Occupy the global variable of Chart, and create a simple base class
26 var Chart = function(context){
27 var chart = this;
28 this.canvas = context.canvas;
29
30 this.ctx = context;
31
32 //Variables global to the chart
33 var width = this.width = context.canvas.width;
34 var height = this.height = context.canvas.height;
35 this.aspectRatio = this.width / this.height;
36 //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
37 helpers.retinaScale(this);
38
39 return this;
40 };
41 //Globally expose the defaults to allow for user updating/changing
42 Chart.defaults = {
43 global: {
44 // Boolean - Whether to animate the chart
45 animation: true,
46
47 // Number - Number of animation steps
48 animationSteps: 60,
49
50 // String - Animation easing effect
51 animationEasing: "easeOutQuart",
52
53 // Boolean - If we should show the scale at all
54 showScale: true,
55
56 // Boolean - If we want to override with a hard coded scale
57 scaleOverride: false,
58
59 // ** Required if scaleOverride is true **
60 // Number - The number of steps in a hard coded scale
61 scaleSteps: null,
62 // Number - The value jump in the hard coded scale
63 scaleStepWidth: null,
64 // Number - The scale starting value
65 scaleStartValue: null,
66
67 // String - Colour of the scale line
68 scaleLineColor: "rgba(0,0,0,.1)",
69
70 // Number - Pixel width of the scale line
71 scaleLineWidth: 1,
72
73 // Boolean - Whether to show labels on the scale
74 scaleShowLabels: true,
75
76 // Interpolated JS string - can access value
77 scaleLabel: "<%=value%>",
78
79 // Boolean - Whether the scale should stick to integers, and not show any floats even if drawing space is there
80 scaleIntegersOnly: true,
81
82 // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
83 scaleBeginAtZero: false,
84
85 // String - Scale label font declaration for the scale label
86 scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
87
88 // Number - Scale label font size in pixels
89 scaleFontSize: 12,
90
91 // String - Scale label font weight style
92 scaleFontStyle: "normal",
93
94 // String - Scale label font colour
95 scaleFontColor: "#666",
96
97 // Boolean - whether or not the chart should be responsive and resize when the browser does.
98 responsive: false,
99
100 // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
101 maintainAspectRatio: true,
102
103 // Boolean - Determines whether to draw tooltips on the canvas or not - attaches events to touchmove & mousemove
104 showTooltips: true,
105
106 // Array - Array of string names to attach tooltip events
107 tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
108
109 // String - Tooltip background colour
110 tooltipFillColor: "rgba(0,0,0,0.8)",
111
112 // String - Tooltip label font declaration for the scale label
113 tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
114
115 // Number - Tooltip label font size in pixels
116 tooltipFontSize: 14,
117
118 // String - Tooltip font weight style
119 tooltipFontStyle: "normal",
120
121 // String - Tooltip label font colour
122 tooltipFontColor: "#fff",
123
124 // String - Tooltip title font declaration for the scale label
125 tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
126
127 // Number - Tooltip title font size in pixels
128 tooltipTitleFontSize: 14,
129
130 // String - Tooltip title font weight style
131 tooltipTitleFontStyle: "bold",
132
133 // String - Tooltip title font colour
134 tooltipTitleFontColor: "#fff",
135
136 // Number - pixel width of padding around tooltip text
137 tooltipYPadding: 6,
138
139 // Number - pixel width of padding around tooltip text
140 tooltipXPadding: 6,
141
142 // Number - Size of the caret on the tooltip
143 tooltipCaretSize: 8,
144
145 // Number - Pixel radius of the tooltip border
146 tooltipCornerRadius: 6,
147
148 // Number - Pixel offset from point x to tooltip edge
149 tooltipXOffset: 10,
150
151 // String - Template string for single tooltips
152 tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
153
154 // String - Template string for single tooltips
155 multiTooltipTemplate: "<%= value %>",
156
157 // String - Colour behind the legend colour block
158 multiTooltipKeyBackground: '#fff',
159
160 // Function - Will fire on animation progression.
161 onAnimationProgress: function(){},
162
163 // Function - Will fire on animation completion.
164 onAnimationComplete: function(){}
165
166 }
167 };
168
169 //Create a dictionary of chart types, to allow for extension of existing types
170 Chart.types = {};
171
172 //Global Chart helpers object for utility methods and classes
173 var helpers = Chart.helpers = {};
174
175 //-- Basic js utility methods
176 var each = helpers.each = function(loopable,callback,self){
177 var additionalArgs = Array.prototype.slice.call(arguments, 3);
178 // Check to see if null or undefined firstly.
179 if (loopable){
180 if (loopable.length === +loopable.length){
181 var i;
182 for (i=0; i<loopable.length; i++){
183 callback.apply(self,[loopable[i], i].concat(additionalArgs));
184 }
185 }
186 else{
187 for (var item in loopable){
188 callback.apply(self,[loopable[item],item].concat(additionalArgs));
189 }
190 }
191 }
192 },
193 clone = helpers.clone = function(obj){
194 var objClone = {};
195 each(obj,function(value,key){
196 if (obj.hasOwnProperty(key)) objClone[key] = value;
197 });
198 return objClone;
199 },
200 extend = helpers.extend = function(base){
201 each(Array.prototype.slice.call(arguments,1), function(extensionObject) {
202 each(extensionObject,function(value,key){
203 if (extensionObject.hasOwnProperty(key)) base[key] = value;
204 });
205 });
206 return base;
207 },
208 merge = helpers.merge = function(base,master){
209 //Merge properties in left object over to a shallow clone of object right.
210 var args = Array.prototype.slice.call(arguments,0);
211 args.unshift({});
212 return extend.apply(null, args);
213 },
214 indexOf = helpers.indexOf = function(arrayToSearch, item){
215 if (Array.prototype.indexOf) {
216 return arrayToSearch.indexOf(item);
217 }
218 else{
219 for (var i = 0; i < arrayToSearch.length; i++) {
220 if (arrayToSearch[i] === item) return i;
221 }
222 return -1;
223 }
224 },
225 inherits = helpers.inherits = function(extensions){
226 //Basic javascript inheritance based on the model created in Backbone.js
227 var parent = this;
228 var ChartElement = (extensions && extensions.hasOwnProperty("constructor")) ? extensions.constructor : function(){ return parent.apply(this, arguments); };
229
230 var Surrogate = function(){ this.constructor = ChartElement;};
231 Surrogate.prototype = parent.prototype;
232 ChartElement.prototype = new Surrogate();
233
234 ChartElement.extend = inherits;
235
236 if (extensions) extend(ChartElement.prototype, extensions);
237
238 ChartElement.__super__ = parent.prototype;
239
240 return ChartElement;
241 },
242 noop = helpers.noop = function(){},
243 uid = helpers.uid = (function(){
244 var id=0;
245 return function(){
246 return "chart-" + id++;
247 };
248 })(),
249 warn = helpers.warn = function(str){
250 //Method for warning of errors
251 if (window.console && typeof window.console.warn == "function") console.warn(str);
252 },
253 amd = helpers.amd = (typeof root.define == 'function' && root.define.amd),
254 //-- Math methods
255 isNumber = helpers.isNumber = function(n){
256 return !isNaN(parseFloat(n)) && isFinite(n);
257 },
258 max = helpers.max = function(array){
259 return Math.max.apply( Math, array );
260 },
261 min = helpers.min = function(array){
262 return Math.min.apply( Math, array );
263 },
264 cap = helpers.cap = function(valueToCap,maxValue,minValue){
265 if(isNumber(maxValue)) {
266 if( valueToCap > maxValue ) {
267 return maxValue;
268 }
269 }
270 else if(isNumber(minValue)){
271 if ( valueToCap < minValue ){
272 return minValue;
273 }
274 }
275 return valueToCap;
276 },
277 getDecimalPlaces = helpers.getDecimalPlaces = function(num){
278 if (num%1!==0 && isNumber(num)){
279 return num.toString().split(".")[1].length;
280 }
281 else {
282 return 0;
283 }
284 },
285 toRadians = helpers.radians = function(degrees){
286 return degrees * (Math.PI/180);
287 },
288 // Gets the angle from vertical upright to the point about a centre.
289 getAngleFromPoint = helpers.getAngleFromPoint = function(centrePoint, anglePoint){
290 var distanceFromXCenter = anglePoint.x - centrePoint.x,
291 distanceFromYCenter = anglePoint.y - centrePoint.y,
292 radialDistanceFromCenter = Math.sqrt( distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
293
294
295 var angle = Math.PI * 2 + Math.atan2(distanceFromYCenter, distanceFromXCenter);
296
297 //If the segment is in the top left quadrant, we need to add another rotation to the angle
298 if (distanceFromXCenter < 0 && distanceFromYCenter < 0){
299 angle += Math.PI*2;
300 }
301
302 return {
303 angle: angle,
304 distance: radialDistanceFromCenter
305 };
306 },
307 aliasPixel = helpers.aliasPixel = function(pixelWidth){
308 return (pixelWidth % 2 === 0) ? 0 : 0.5;
309 },
310 splineCurve = helpers.splineCurve = function(FirstPoint,MiddlePoint,AfterPoint,t){
311 //Props to Rob Spencer at scaled innovation for his post on splining between points
312 //http://scaledinnovation.com/analytics/splines/aboutSplines.html
313 var d01=Math.sqrt(Math.pow(MiddlePoint.x-FirstPoint.x,2)+Math.pow(MiddlePoint.y-FirstPoint.y,2)),
314 d12=Math.sqrt(Math.pow(AfterPoint.x-MiddlePoint.x,2)+Math.pow(AfterPoint.y-MiddlePoint.y,2)),
315 fa=t*d01/(d01+d12),// scaling factor for triangle Ta
316 fb=t*d12/(d01+d12);
317 return {
318 inner : {
319 x : MiddlePoint.x-fa*(AfterPoint.x-FirstPoint.x),
320 y : MiddlePoint.y-fa*(AfterPoint.y-FirstPoint.y)
321 },
322 outer : {
323 x: MiddlePoint.x+fb*(AfterPoint.x-FirstPoint.x),
324 y : MiddlePoint.y+fb*(AfterPoint.y-FirstPoint.y)
325 }
326 };
327 },
328 calculateOrderOfMagnitude = helpers.calculateOrderOfMagnitude = function(val){
329 return Math.floor(Math.log(val) / Math.LN10);
330 },
331 calculateScaleRange = helpers.calculateScaleRange = function(valuesArray, drawingSize, textSize, startFromZero, integersOnly){
332
333 //Set a minimum step of two - a point at the top of the graph, and a point at the base
334 var minSteps = 2,
335 maxSteps = Math.floor(drawingSize/(textSize * 1.5)),
336 skipFitting = (minSteps >= maxSteps);
337
338 var maxValue = max(valuesArray),
339 minValue = min(valuesArray);
340
341 // We need some degree of seperation here to calculate the scales if all the values are the same
342 // Adding/minusing 0.5 will give us a range of 1.
343 if (maxValue === minValue){
344 maxValue += 0.5;
345 // So we don't end up with a graph with a negative start value if we've said always start from zero
346 if (minValue >= 0.5 && !startFromZero){
347 minValue -= 0.5;
348 }
349 else{
350 // Make up a whole number above the values
351 maxValue += 0.5;
352 }
353 }
354
355 var valueRange = Math.abs(maxValue - minValue),
356 rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange),
357 graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude),
358 graphMin = (startFromZero) ? 0 : Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude),
359 graphRange = graphMax - graphMin,
360 stepValue = Math.pow(10, rangeOrderOfMagnitude),
361 numberOfSteps = Math.round(graphRange / stepValue);
362
363 //If we have more space on the graph we'll use it to give more definition to the data
364 while((numberOfSteps > maxSteps || (numberOfSteps * 2) < maxSteps) && !skipFitting) {
365 if(numberOfSteps > maxSteps){
366 stepValue *=2;
367 numberOfSteps = Math.round(graphRange/stepValue);
368 // Don't ever deal with a decimal number of steps - cancel fitting and just use the minimum number of steps.
369 if (numberOfSteps % 1 !== 0){
370 skipFitting = true;
371 }
372 }
373 //We can fit in double the amount of scale points on the scale
374 else{
375 //If user has declared ints only, and the step value isn't a decimal
376 if (integersOnly && rangeOrderOfMagnitude >= 0){
377 //If the user has said integers only, we need to check that making the scale more granular wouldn't make it a float
378 if(stepValue/2 % 1 === 0){
379 stepValue /=2;
380 numberOfSteps = Math.round(graphRange/stepValue);
381 }
382 //If it would make it a float break out of the loop
383 else{
384 break;
385 }
386 }
387 //If the scale doesn't have to be an int, make the scale more granular anyway.
388 else{
389 stepValue /=2;
390 numberOfSteps = Math.round(graphRange/stepValue);
391 }
392
393 }
394 }
395
396 if (skipFitting){
397 numberOfSteps = minSteps;
398 stepValue = graphRange / numberOfSteps;
399 }
400
401 return {
402 steps : numberOfSteps,
403 stepValue : stepValue,
404 min : graphMin,
405 max : graphMin + (numberOfSteps * stepValue)
406 };
407
408 },
409 /* jshint ignore:start */
410 // Blows up jshint errors based on the new Function constructor
411 //Templating methods
412 //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
413 template = helpers.template = function(templateString, valuesObject){
414 // If templateString is function rather than string-template - call the function for valuesObject
415 if(templateString instanceof Function)
416 {
417 return templateString(valuesObject);
418 }
419
420 var cache = {};
421 function tmpl(str, data){
422 // Figure out if we're getting a template, or if we need to
423 // load the template - and be sure to cache the result.
424 var fn = !/\W/.test(str) ?
425 cache[str] = cache[str] :
426
427 // Generate a reusable function that will serve as a template
428 // generator (and which will be cached).
429 new Function("obj",
430 "var p=[],print=function(){p.push.apply(p,arguments);};" +
431
432 // Introduce the data as local variables using with(){}
433 "with(obj){p.push('" +
434
435 // Convert the template into pure JavaScript
436 str
437 .replace(/[\r\t\n]/g, " ")
438 .split("<%").join("\t")
439 .replace(/((^|%>)[^\t]*)'/g, "$1\r")
440 .replace(/\t=(.*?)%>/g, "',$1,'")
441 .split("\t").join("');")
442 .split("%>").join("p.push('")
443 .split("\r").join("\\'") +
444 "');}return p.join('');"
445 );
446
447 // Provide some basic currying to the user
448 return data ? fn( data ) : fn;
449 }
450 return tmpl(templateString,valuesObject);
451 },
452 /* jshint ignore:end */
453 generateLabels = helpers.generateLabels = function(templateString,numberOfSteps,graphMin,stepValue){
454 var labelsArray = new Array(numberOfSteps);
455 if (labelTemplateString){
456 each(labelsArray,function(val,index){
457 labelsArray[index] = template(templateString,{value: (graphMin + (stepValue*(index+1)))});
458 });
459 }
460 return labelsArray;
461 },
462 //--Animation methods
463 //Easing functions adapted from Robert Penner's easing equations
464 //http://www.robertpenner.com/easing/
465 easingEffects = helpers.easingEffects = {
466 linear: function (t) {
467 return t;
468 },
469 easeInQuad: function (t) {
470 return t * t;
471 },
472 easeOutQuad: function (t) {
473 return -1 * t * (t - 2);
474 },
475 easeInOutQuad: function (t) {
476 if ((t /= 1 / 2) < 1) return 1 / 2 * t * t;
477 return -1 / 2 * ((--t) * (t - 2) - 1);
478 },
479 easeInCubic: function (t) {
480 return t * t * t;
481 },
482 easeOutCubic: function (t) {
483 return 1 * ((t = t / 1 - 1) * t * t + 1);
484 },
485 easeInOutCubic: function (t) {
486 if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t;
487 return 1 / 2 * ((t -= 2) * t * t + 2);
488 },
489 easeInQuart: function (t) {
490 return t * t * t * t;
491 },
492 easeOutQuart: function (t) {
493 return -1 * ((t = t / 1 - 1) * t * t * t - 1);
494 },
495 easeInOutQuart: function (t) {
496 if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t;
497 return -1 / 2 * ((t -= 2) * t * t * t - 2);
498 },
499 easeInQuint: function (t) {
500 return 1 * (t /= 1) * t * t * t * t;
501 },
502 easeOutQuint: function (t) {
503 return 1 * ((t = t / 1 - 1) * t * t * t * t + 1);
504 },
505 easeInOutQuint: function (t) {
506 if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t * t;
507 return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
508 },
509 easeInSine: function (t) {
510 return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1;
511 },
512 easeOutSine: function (t) {
513 return 1 * Math.sin(t / 1 * (Math.PI / 2));
514 },
515 easeInOutSine: function (t) {
516 return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1);
517 },
518 easeInExpo: function (t) {
519 return (t === 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1));
520 },
521 easeOutExpo: function (t) {
522 return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
523 },
524 easeInOutExpo: function (t) {
525 if (t === 0) return 0;
526 if (t === 1) return 1;
527 if ((t /= 1 / 2) < 1) return 1 / 2 * Math.pow(2, 10 * (t - 1));
528 return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
529 },
530 easeInCirc: function (t) {
531 if (t >= 1) return t;
532 return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
533 },
534 easeOutCirc: function (t) {
535 return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t);
536 },
537 easeInOutCirc: function (t) {
538 if ((t /= 1 / 2) < 1) return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
539 return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
540 },
541 easeInElastic: function (t) {
542 var s = 1.70158;
543 var p = 0;
544 var a = 1;
545 if (t === 0) return 0;
546 if ((t /= 1) == 1) return 1;
547 if (!p) p = 1 * 0.3;
548 if (a < Math.abs(1)) {
549 a = 1;
550 s = p / 4;
551 } else s = p / (2 * Math.PI) * Math.asin(1 / a);
552 return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
553 },
554 easeOutElastic: function (t) {
555 var s = 1.70158;
556 var p = 0;
557 var a = 1;
558 if (t === 0) return 0;
559 if ((t /= 1) == 1) return 1;
560 if (!p) p = 1 * 0.3;
561 if (a < Math.abs(1)) {
562 a = 1;
563 s = p / 4;
564 } else s = p / (2 * Math.PI) * Math.asin(1 / a);
565 return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
566 },
567 easeInOutElastic: function (t) {
568 var s = 1.70158;
569 var p = 0;
570 var a = 1;
571 if (t === 0) return 0;
572 if ((t /= 1 / 2) == 2) return 1;
573 if (!p) p = 1 * (0.3 * 1.5);
574 if (a < Math.abs(1)) {
575 a = 1;
576 s = p / 4;
577 } else s = p / (2 * Math.PI) * Math.asin(1 / a);
578 if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
579 return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * 0.5 + 1;
580 },
581 easeInBack: function (t) {
582 var s = 1.70158;
583 return 1 * (t /= 1) * t * ((s + 1) * t - s);
584 },
585 easeOutBack: function (t) {
586 var s = 1.70158;
587 return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1);
588 },
589 easeInOutBack: function (t) {
590 var s = 1.70158;
591 if ((t /= 1 / 2) < 1) return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
592 return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
593 },
594 easeInBounce: function (t) {
595 return 1 - easingEffects.easeOutBounce(1 - t);
596 },
597 easeOutBounce: function (t) {
598 if ((t /= 1) < (1 / 2.75)) {
599 return 1 * (7.5625 * t * t);
600 } else if (t < (2 / 2.75)) {
601 return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75);
602 } else if (t < (2.5 / 2.75)) {
603 return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375);
604 } else {
605 return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375);
606 }
607 },
608 easeInOutBounce: function (t) {
609 if (t < 1 / 2) return easingEffects.easeInBounce(t * 2) * 0.5;
610 return easingEffects.easeOutBounce(t * 2 - 1) * 0.5 + 1 * 0.5;
611 }
612 },
613 //Request animation polyfill - http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
614 requestAnimFrame = helpers.requestAnimFrame = (function(){
615 return window.requestAnimationFrame ||
616 window.webkitRequestAnimationFrame ||
617 window.mozRequestAnimationFrame ||
618 window.oRequestAnimationFrame ||
619 window.msRequestAnimationFrame ||
620 function(callback) {
621 return window.setTimeout(callback, 1000 / 60);
622 };
623 })(),
624 cancelAnimFrame = helpers.cancelAnimFrame = (function(){
625 return window.cancelAnimationFrame ||
626 window.webkitCancelAnimationFrame ||
627 window.mozCancelAnimationFrame ||
628 window.oCancelAnimationFrame ||
629 window.msCancelAnimationFrame ||
630 function(callback) {
631 return window.clearTimeout(callback, 1000 / 60);
632 };
633 })(),
634 animationLoop = helpers.animationLoop = function(callback,totalSteps,easingString,onProgress,onComplete,chartInstance){
635
636 var currentStep = 0,
637 easingFunction = easingEffects[easingString] || easingEffects.linear;
638
639 var animationFrame = function(){
640 currentStep++;
641 var stepDecimal = currentStep/totalSteps;
642 var easeDecimal = easingFunction(stepDecimal);
643
644 callback.call(chartInstance,easeDecimal,stepDecimal, currentStep);
645 onProgress.call(chartInstance,easeDecimal,stepDecimal);
646 if (currentStep < totalSteps){
647 chartInstance.animationFrame = requestAnimFrame(animationFrame);
648 } else{
649 onComplete.apply(chartInstance);
650 }
651 };
652 requestAnimFrame(animationFrame);
653 },
654 //-- DOM methods
655 getRelativePosition = helpers.getRelativePosition = function(evt){
656 var mouseX, mouseY;
657 var e = evt.originalEvent || evt,
658 canvas = evt.currentTarget || evt.srcElement,
659 boundingRect = canvas.getBoundingClientRect();
660
661 if (e.touches){
662 mouseX = e.touches[0].clientX - boundingRect.left;
663 mouseY = e.touches[0].clientY - boundingRect.top;
664
665 }
666 else{
667 mouseX = e.clientX - boundingRect.left;
668 mouseY = e.clientY - boundingRect.top;
669 }
670
671 return {
672 x : mouseX,
673 y : mouseY
674 };
675
676 },
677 addEvent = helpers.addEvent = function(node,eventType,method){
678 if (node.addEventListener){
679 node.addEventListener(eventType,method);
680 } else if (node.attachEvent){
681 node.attachEvent("on"+eventType, method);
682 } else {
683 node["on"+eventType] = method;
684 }
685 },
686 removeEvent = helpers.removeEvent = function(node, eventType, handler){
687 if (node.removeEventListener){
688 node.removeEventListener(eventType, handler, false);
689 } else if (node.detachEvent){
690 node.detachEvent("on"+eventType,handler);
691 } else{
692 node["on" + eventType] = noop;
693 }
694 },
695 bindEvents = helpers.bindEvents = function(chartInstance, arrayOfEvents, handler){
696 // Create the events object if it's not already present
697 if (!chartInstance.events) chartInstance.events = {};
698
699 each(arrayOfEvents,function(eventName){
700 chartInstance.events[eventName] = function(){
701 handler.apply(chartInstance, arguments);
702 };
703 addEvent(chartInstance.chart.canvas,eventName,chartInstance.events[eventName]);
704 });
705 },
706 unbindEvents = helpers.unbindEvents = function (chartInstance, arrayOfEvents) {
707 each(arrayOfEvents, function(handler,eventName){
708 removeEvent(chartInstance.chart.canvas, eventName, handler);
709 });
710 },
711 getMaximumWidth = helpers.getMaximumWidth = function(domNode){
712 var container = domNode.parentNode;
713 // TODO = check cross browser stuff with this.
714 return container.clientWidth;
715 },
716 getMaximumHeight = helpers.getMaximumHeight = function(domNode){
717 var container = domNode.parentNode;
718 // TODO = check cross browser stuff with this.
719 return container.clientHeight;
720 },
721 getMaximumSize = helpers.getMaximumSize = helpers.getMaximumWidth, // legacy support
722 retinaScale = helpers.retinaScale = function(chart){
723 var ctx = chart.ctx,
724 width = chart.canvas.width,
725 height = chart.canvas.height;
726 //console.log(width + " x " + height);
727 if (window.devicePixelRatio) {
728 ctx.canvas.style.width = width + "px";
729 ctx.canvas.style.height = height + "px";
730 ctx.canvas.height = height * window.devicePixelRatio;
731 ctx.canvas.width = width * window.devicePixelRatio;
732 ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
733 }
734 },
735 //-- Canvas methods
736 clear = helpers.clear = function(chart){
737 chart.ctx.clearRect(0,0,chart.width,chart.height);
738 },
739 fontString = helpers.fontString = function(pixelSize,fontStyle,fontFamily){
740 return fontStyle + " " + pixelSize+"px " + fontFamily;
741 },
742 longestText = helpers.longestText = function(ctx,font,arrayOfStrings){
743 ctx.font = font;
744 var longest = 0;
745 each(arrayOfStrings,function(string){
746 var textWidth = ctx.measureText(string).width;
747 longest = (textWidth > longest) ? textWidth : longest;
748 });
749 return longest;
750 },
751 drawRoundedRectangle = helpers.drawRoundedRectangle = function(ctx,x,y,width,height,radius){
752 ctx.beginPath();
753 ctx.moveTo(x + radius, y);
754 ctx.lineTo(x + width - radius, y);
755 ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
756 ctx.lineTo(x + width, y + height - radius);
757 ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
758 ctx.lineTo(x + radius, y + height);
759 ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
760 ctx.lineTo(x, y + radius);
761 ctx.quadraticCurveTo(x, y, x + radius, y);
762 ctx.closePath();
763 };
764
765
766 //Store a reference to each instance - allowing us to globally resize chart instances on window resize.
767 //Destroy method on the chart will remove the instance of the chart from this reference.
768 Chart.instances = {};
769
770 Chart.Type = function(data,options,chart){
771 this.options = options;
772 this.chart = chart;
773 this.id = uid();
774 //Add the chart instance to the global namespace
775 Chart.instances[this.id] = this;
776
777 // Initialize is always called when a chart type is created
778 // By default it is a no op, but it should be extended
779 if (options.responsive){
780 this.resize();
781 }
782 this.initialize.call(this,data);
783 };
784
785 //Core methods that'll be a part of every chart type
786 extend(Chart.Type.prototype,{
787 initialize : function(){return this;},
788 clear : function(){
789 clear(this.chart);
790 return this;
791 },
792 stop : function(){
793 // Stops any current animation loop occuring
794 helpers.cancelAnimFrame.call(root, this.animationFrame);
795 return this;
796 },
797 resize : function(callback){
798 this.stop();
799 var canvas = this.chart.canvas,
800 newWidth = getMaximumWidth(this.chart.canvas),
801 newHeight = this.options.maintainAspectRatio ? newWidth / this.chart.aspectRatio : getMaximumHeight(this.chart.canvas);
802
803 canvas.width = this.chart.width = newWidth;
804 canvas.height = this.chart.height = newHeight;
805
806 retinaScale(this.chart);
807
808 if (typeof callback === "function"){
809 callback.apply(this, Array.prototype.slice.call(arguments, 1));
810 }
811 return this;
812 },
813 reflow : noop,
814 render : function(reflow){
815 if (reflow){
816 this.reflow();
817 }
818 if (this.options.animation && !reflow){
819 helpers.animationLoop(
820 this.draw,
821 this.options.animationSteps,
822 this.options.animationEasing,
823 this.options.onAnimationProgress,
824 this.options.onAnimationComplete,
825 this
826 );
827 }
828 else{
829 this.draw();
830 this.options.onAnimationComplete.call(this);
831 }
832 return this;
833 },
834 generateLegend : function(){
835 return template(this.options.legendTemplate,this);
836 },
837 destroy : function(){
838 this.clear();
839 unbindEvents(this, this.events);
840 delete Chart.instances[this.id];
841 },
842 showTooltip : function(ChartElements, forceRedraw){
843 // Only redraw the chart if we've actually changed what we're hovering on.
844 if (typeof this.activeElements === 'undefined') this.activeElements = [];
845
846 var isChanged = (function(Elements){
847 var changed = false;
848
849 if (Elements.length !== this.activeElements.length){
850 changed = true;
851 return changed;
852 }
853
854 each(Elements, function(element, index){
855 if (element !== this.activeElements[index]){
856 changed = true;
857 }
858 }, this);
859 return changed;
860 }).call(this, ChartElements);
861
862 if (!isChanged && !forceRedraw){
863 return;
864 }
865 else{
866 this.activeElements = ChartElements;
867 }
868 this.draw();
869 if (ChartElements.length > 0){
870 // If we have multiple datasets, show a MultiTooltip for all of the data points at that index
871 if (this.datasets && this.datasets.length > 1) {
872 var dataArray,
873 dataIndex;
874
875 for (var i = this.datasets.length - 1; i >= 0; i--) {
876 dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments;
877 dataIndex = indexOf(dataArray, ChartElements[0]);
878 if (dataIndex !== -1){
879 break;
880 }
881 }
882 var tooltipLabels = [],
883 tooltipColors = [],
884 medianPosition = (function(index) {
885
886 // Get all the points at that particular index
887 var Elements = [],
888 dataCollection,
889 xPositions = [],
890 yPositions = [],
891 xMax,
892 yMax,
893 xMin,
894 yMin;
895 helpers.each(this.datasets, function(dataset){
896 dataCollection = dataset.points || dataset.bars || dataset.segments;
897 if (dataCollection[dataIndex]){
898 Elements.push(dataCollection[dataIndex]);
899 }
900 });
901
902 helpers.each(Elements, function(element) {
903 xPositions.push(element.x);
904 yPositions.push(element.y);
905
906
907 //Include any colour information about the element
908 tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element));
909 tooltipColors.push({
910 fill: element._saved.fillColor || element.fillColor,
911 stroke: element._saved.strokeColor || element.strokeColor
912 });
913
914 }, this);
915
916 yMin = min(yPositions);
917 yMax = max(yPositions);
918
919 xMin = min(xPositions);
920 xMax = max(xPositions);
921
922 return {
923 x: (xMin > this.chart.width/2) ? xMin : xMax,
924 y: (yMin + yMax)/2
925 };
926 }).call(this, dataIndex);
927
928 new Chart.MultiTooltip({
929 x: medianPosition.x,
930 y: medianPosition.y,
931 xPadding: this.options.tooltipXPadding,
932 yPadding: this.options.tooltipYPadding,
933 xOffset: this.options.tooltipXOffset,
934 fillColor: this.options.tooltipFillColor,
935 textColor: this.options.tooltipFontColor,
936 fontFamily: this.options.tooltipFontFamily,
937 fontStyle: this.options.tooltipFontStyle,
938 fontSize: this.options.tooltipFontSize,
939 titleTextColor: this.options.tooltipTitleFontColor,
940 titleFontFamily: this.options.tooltipTitleFontFamily,
941 titleFontStyle: this.options.tooltipTitleFontStyle,
942 titleFontSize: this.options.tooltipTitleFontSize,
943 cornerRadius: this.options.tooltipCornerRadius,
944 labels: tooltipLabels,
945 legendColors: tooltipColors,
946 legendColorBackground : this.options.multiTooltipKeyBackground,
947 title: ChartElements[0].label,
948 chart: this.chart,
949 ctx: this.chart.ctx
950 }).draw();
951
952 } else {
953 each(ChartElements, function(Element) {
954 var tooltipPosition = Element.tooltipPosition();
955 new Chart.Tooltip({
956 x: Math.round(tooltipPosition.x),
957 y: Math.round(tooltipPosition.y),
958 xPadding: this.options.tooltipXPadding,
959 yPadding: this.options.tooltipYPadding,
960 fillColor: this.options.tooltipFillColor,
961 textColor: this.options.tooltipFontColor,
962 fontFamily: this.options.tooltipFontFamily,
963 fontStyle: this.options.tooltipFontStyle,
964 fontSize: this.options.tooltipFontSize,
965 caretHeight: this.options.tooltipCaretSize,
966 cornerRadius: this.options.tooltipCornerRadius,
967 text: template(this.options.tooltipTemplate, Element),
968 chart: this.chart
969 }).draw();
970 }, this);
971 }
972 }
973 return this;
974 },
975 toBase64Image : function(){
976 return this.chart.canvas.toDataURL.apply(this.chart.canvas, arguments);
977 }
978 });
979
980 Chart.Type.extend = function(extensions){
981
982 var parent = this;
983
984 var ChartType = function(){
985 return parent.apply(this,arguments);
986 };
987
988 //Copy the prototype object of the this class
989 ChartType.prototype = clone(parent.prototype);
990 //Now overwrite some of the properties in the base class with the new extensions
991 extend(ChartType.prototype, extensions);
992
993 ChartType.extend = Chart.Type.extend;
994
995 if (extensions.name || parent.prototype.name){
996
997 var chartName = extensions.name || parent.prototype.name;
998 //Assign any potential default values of the new chart type
999
1000 //If none are defined, we'll use a clone of the chart type this is being extended from.
1001 //I.e. if we extend a line chart, we'll use the defaults from the line chart if our new chart
1002 //doesn't define some defaults of their own.
1003
1004 var baseDefaults = (Chart.defaults[parent.prototype.name]) ? clone(Chart.defaults[parent.prototype.name]) : {};
1005
1006 Chart.defaults[chartName] = extend(baseDefaults,extensions.defaults);
1007
1008 Chart.types[chartName] = ChartType;
1009
1010 //Register this new chart type in the Chart prototype
1011 Chart.prototype[chartName] = function(data,options){
1012 var config = merge(Chart.defaults.global, Chart.defaults[chartName], options || {});
1013 return new ChartType(data,config,this);
1014 };
1015 } else{
1016 warn("Name not provided for this chart, so it hasn't been registered");
1017 }
1018 return parent;
1019 };
1020
1021 Chart.Element = function(configuration){
1022 extend(this,configuration);
1023 this.initialize.apply(this,arguments);
1024 this.save();
1025 };
1026 extend(Chart.Element.prototype,{
1027 initialize : function(){},
1028 restore : function(props){
1029 if (!props){
1030 extend(this,this._saved);
1031 } else {
1032 each(props,function(key){
1033 this[key] = this._saved[key];
1034 },this);
1035 }
1036 return this;
1037 },
1038 save : function(){
1039 this._saved = clone(this);
1040 delete this._saved._saved;
1041 return this;
1042 },
1043 update : function(newProps){
1044 each(newProps,function(value,key){
1045 this._saved[key] = this[key];
1046 this[key] = value;
1047 },this);
1048 return this;
1049 },
1050 transition : function(props,ease){
1051 each(props,function(value,key){
1052 this[key] = ((value - this._saved[key]) * ease) + this._saved[key];
1053 },this);
1054 return this;
1055 },
1056 tooltipPosition : function(){
1057 return {
1058 x : this.x,
1059 y : this.y
1060 };
1061 }
1062 });
1063
1064 Chart.Element.extend = inherits;
1065
1066
1067 Chart.Point = Chart.Element.extend({
1068 display: true,
1069 inRange: function(chartX,chartY){
1070 var hitDetectionRange = this.hitDetectionRadius + this.radius;
1071 return ((Math.pow(chartX-this.x, 2)+Math.pow(chartY-this.y, 2)) < Math.pow(hitDetectionRange,2));
1072 },
1073 draw : function(){
1074 if (this.display){
1075 var ctx = this.ctx;
1076 ctx.beginPath();
1077
1078 ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
1079 ctx.closePath();
1080
1081 ctx.strokeStyle = this.strokeColor;
1082 ctx.lineWidth = this.strokeWidth;
1083
1084 ctx.fillStyle = this.fillColor;
1085
1086 ctx.fill();
1087 ctx.stroke();
1088 }
1089
1090
1091 //Quick debug for bezier curve splining
1092 //Highlights control points and the line between them.
1093 //Handy for dev - stripped in the min version.
1094
1095 // ctx.save();
1096 // ctx.fillStyle = "black";
1097 // ctx.strokeStyle = "black"
1098 // ctx.beginPath();
1099 // ctx.arc(this.controlPoints.inner.x,this.controlPoints.inner.y, 2, 0, Math.PI*2);
1100 // ctx.fill();
1101
1102 // ctx.beginPath();
1103 // ctx.arc(this.controlPoints.outer.x,this.controlPoints.outer.y, 2, 0, Math.PI*2);
1104 // ctx.fill();
1105
1106 // ctx.moveTo(this.controlPoints.inner.x,this.controlPoints.inner.y);
1107 // ctx.lineTo(this.controlPoints.outer.x,this.controlPoints.outer.y);
1108 // ctx.stroke();
1109
1110 // ctx.restore();
1111
1112
1113
1114 }
1115 });
1116
1117 Chart.Arc = Chart.Element.extend({
1118 inRange : function(chartX,chartY){
1119
1120 var pointRelativePosition = helpers.getAngleFromPoint(this, {
1121 x: chartX,
1122 y: chartY
1123 });
1124
1125 //Check if within the range of the open/close angle
1126 var betweenAngles = (pointRelativePosition.angle >= this.startAngle && pointRelativePosition.angle <= this.endAngle),
1127 withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius);
1128
1129 return (betweenAngles && withinRadius);
1130 //Ensure within the outside of the arc centre, but inside arc outer
1131 },
1132 tooltipPosition : function(){
1133 var centreAngle = this.startAngle + ((this.endAngle - this.startAngle) / 2),
1134 rangeFromCentre = (this.outerRadius - this.innerRadius) / 2 + this.innerRadius;
1135 return {
1136 x : this.x + (Math.cos(centreAngle) * rangeFromCentre),
1137 y : this.y + (Math.sin(centreAngle) * rangeFromCentre)
1138 };
1139 },
1140 draw : function(animationPercent){
1141
1142 var easingDecimal = animationPercent || 1;
1143
1144 var ctx = this.ctx;
1145
1146 ctx.beginPath();
1147
1148 ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle);
1149
1150 ctx.arc(this.x, this.y, this.innerRadius, this.endAngle, this.startAngle, true);
1151
1152 ctx.closePath();
1153 ctx.strokeStyle = this.strokeColor;
1154 ctx.lineWidth = this.strokeWidth;
1155
1156 ctx.fillStyle = this.fillColor;
1157
1158 ctx.fill();
1159 ctx.lineJoin = 'bevel';
1160
1161 if (this.showStroke){
1162 ctx.stroke();
1163 }
1164 }
1165 });
1166
1167 Chart.Rectangle = Chart.Element.extend({
1168 draw : function(){
1169 var ctx = this.ctx,
1170 halfWidth = this.width/2,
1171 leftX = this.x - halfWidth,
1172 rightX = this.x + halfWidth,
1173 top = this.base - (this.base - this.y),
1174 halfStroke = this.strokeWidth / 2;
1175
1176 // Canvas doesn't allow us to stroke inside the width so we can
1177 // adjust the sizes to fit if we're setting a stroke on the line
1178 if (this.showStroke){
1179 leftX += halfStroke;
1180 rightX -= halfStroke;
1181 top += halfStroke;
1182 }
1183
1184 ctx.beginPath();
1185
1186 ctx.fillStyle = this.fillColor;
1187 ctx.strokeStyle = this.strokeColor;
1188 ctx.lineWidth = this.strokeWidth;
1189
1190 // It'd be nice to keep this class totally generic to any rectangle
1191 // and simply specify which border to miss out.
1192 ctx.moveTo(leftX, this.base);
1193 ctx.lineTo(leftX, top);
1194 ctx.lineTo(rightX, top);
1195 ctx.lineTo(rightX, this.base);
1196 ctx.fill();
1197 if (this.showStroke){
1198 ctx.stroke();
1199 }
1200 },
1201 height : function(){
1202 return this.base - this.y;
1203 },
1204 inRange : function(chartX,chartY){
1205 return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base);
1206 }
1207 });
1208
1209 Chart.Tooltip = Chart.Element.extend({
1210 draw : function(){
1211
1212 var ctx = this.chart.ctx;
1213
1214 ctx.font = fontString(this.fontSize,this.fontStyle,this.fontFamily);
1215
1216 this.xAlign = "center";
1217 this.yAlign = "above";
1218
1219 //Distance between the actual element.y position and the start of the tooltip caret
1220 var caretPadding = 2;
1221
1222 var tooltipWidth = ctx.measureText(this.text).width + 2*this.xPadding,
1223 tooltipRectHeight = this.fontSize + 2*this.yPadding,
1224 tooltipHeight = tooltipRectHeight + this.caretHeight + caretPadding;
1225
1226 if (this.x + tooltipWidth/2 >this.chart.width){
1227 this.xAlign = "left";
1228 } else if (this.x - tooltipWidth/2 < 0){
1229 this.xAlign = "right";
1230 }
1231
1232 if (this.y - tooltipHeight < 0){
1233 this.yAlign = "below";
1234 }
1235
1236
1237 var tooltipX = this.x - tooltipWidth/2,
1238 tooltipY = this.y - tooltipHeight;
1239
1240 ctx.fillStyle = this.fillColor;
1241
1242 switch(this.yAlign)
1243 {
1244 case "above":
1245 //Draw a caret above the x/y
1246 ctx.beginPath();
1247 ctx.moveTo(this.x,this.y - caretPadding);
1248 ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
1249 ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
1250 ctx.closePath();
1251 ctx.fill();
1252 break;
1253 case "below":
1254 tooltipY = this.y + caretPadding + this.caretHeight;
1255 //Draw a caret below the x/y
1256 ctx.beginPath();
1257 ctx.moveTo(this.x, this.y + caretPadding);
1258 ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
1259 ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
1260 ctx.closePath();
1261 ctx.fill();
1262 break;
1263 }
1264
1265 switch(this.xAlign)
1266 {
1267 case "left":
1268 tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
1269 break;
1270 case "right":
1271 tooltipX = this.x - (this.cornerRadius + this.caretHeight);
1272 break;
1273 }
1274
1275 drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);
1276
1277 ctx.fill();
1278
1279 ctx.fillStyle = this.textColor;
1280 ctx.textAlign = "center";
1281 ctx.textBaseline = "middle";
1282 ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
1283 }
1284 });
1285
1286 Chart.MultiTooltip = Chart.Element.extend({
1287 initialize : function(){
1288 this.font = fontString(this.fontSize,this.fontStyle,this.fontFamily);
1289
1290 this.titleFont = fontString(this.titleFontSize,this.titleFontStyle,this.titleFontFamily);
1291
1292 this.height = (this.labels.length * this.fontSize) + ((this.labels.length-1) * (this.fontSize/2)) + (this.yPadding*2) + this.titleFontSize *1.5;
1293
1294 this.ctx.font = this.titleFont;
1295
1296 var titleWidth = this.ctx.measureText(this.title).width,
1297 //Label has a legend square as well so account for this.
1298 labelWidth = longestText(this.ctx,this.font,this.labels) + this.fontSize + 3,
1299 longestTextWidth = max([labelWidth,titleWidth]);
1300
1301 this.width = longestTextWidth + (this.xPadding*2);
1302
1303
1304 var halfHeight = this.height/2;
1305
1306 //Check to ensure the height will fit on the canvas
1307 //The three is to buffer form the very
1308 if (this.y - halfHeight < 0 ){
1309 this.y = halfHeight;
1310 } else if (this.y + halfHeight > this.chart.height){
1311 this.y = this.chart.height - halfHeight;
1312 }
1313
1314 //Decide whether to align left or right based on position on canvas
1315 if (this.x > this.chart.width/2){
1316 this.x -= this.xOffset + this.width;
1317 } else {
1318 this.x += this.xOffset;
1319 }
1320
1321
1322 },
1323 getLineHeight : function(index){
1324 var baseLineHeight = this.y - (this.height/2) + this.yPadding,
1325 afterTitleIndex = index-1;
1326
1327 //If the index is zero, we're getting the title
1328 if (index === 0){
1329 return baseLineHeight + this.titleFontSize/2;
1330 } else{
1331 return baseLineHeight + ((this.fontSize*1.5*afterTitleIndex) + this.fontSize/2) + this.titleFontSize * 1.5;
1332 }
1333
1334 },
1335 draw : function(){
1336 drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);
1337 var ctx = this.ctx;
1338 ctx.fillStyle = this.fillColor;
1339 ctx.fill();
1340 ctx.closePath();
1341
1342 ctx.textAlign = "left";
1343 ctx.textBaseline = "middle";
1344 ctx.fillStyle = this.titleTextColor;
1345 ctx.font = this.titleFont;
1346
1347 ctx.fillText(this.title,this.x + this.xPadding, this.getLineHeight(0));
1348
1349 ctx.font = this.font;
1350 helpers.each(this.labels,function(label,index){
1351 ctx.fillStyle = this.textColor;
1352 ctx.fillText(label,this.x + this.xPadding + this.fontSize + 3, this.getLineHeight(index + 1));
1353
1354 //A bit gnarly, but clearing this rectangle breaks when using explorercanvas (clears whole canvas)
1355 //ctx.clearRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
1356 //Instead we'll make a white filled block to put the legendColour palette over.
1357
1358 ctx.fillStyle = this.legendColorBackground;
1359 ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
1360
1361 ctx.fillStyle = this.legendColors[index].fill;
1362 ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
1363
1364
1365 },this);
1366 }
1367 });
1368
1369 Chart.Scale = Chart.Element.extend({
1370 initialize : function(){
1371 this.fit();
1372 },
1373 buildYLabels : function(){
1374 this.yLabels = [];
1375
1376 var stepDecimalPlaces = getDecimalPlaces(this.stepValue);
1377
1378 for (var i=0; i<=this.steps; i++){
1379 this.yLabels.push(template(this.templateString,{value:(this.min + (i * this.stepValue)).toFixed(stepDecimalPlaces)}));
1380 }
1381 this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) : 0;
1382 },
1383 addXLabel : function(label){
1384 this.xLabels.push(label);
1385 this.valuesCount++;
1386 this.fit();
1387 },
1388 removeXLabel : function(){
1389 this.xLabels.shift();
1390 this.valuesCount--;
1391 this.fit();
1392 },
1393 // Fitting loop to rotate x Labels and figure out what fits there, and also calculate how many Y steps to use
1394 fit: function(){
1395 // First we need the width of the yLabels, assuming the xLabels aren't rotated
1396
1397 // To do that we need the base line at the top and base of the chart, assuming there is no x label rotation
1398 this.startPoint = (this.display) ? this.fontSize : 0;
1399 this.endPoint = (this.display) ? this.height - (this.fontSize * 1.5) - 5 : this.height; // -5 to pad labels
1400
1401 // Apply padding settings to the start and end point.
1402 this.startPoint += this.padding;
1403 this.endPoint -= this.padding;
1404
1405 // Cache the starting height, so can determine if we need to recalculate the scale yAxis
1406 var cachedHeight = this.endPoint - this.startPoint,
1407 cachedYLabelWidth;
1408
1409 // Build the current yLabels so we have an idea of what size they'll be to start
1410 /*
1411 * This sets what is returned from calculateScaleRange as static properties of this class:
1412 *
1413 this.steps;
1414 this.stepValue;
1415 this.min;
1416 this.max;
1417 *
1418 */
1419 this.calculateYRange(cachedHeight);
1420
1421 // With these properties set we can now build the array of yLabels
1422 // and also the width of the largest yLabel
1423 this.buildYLabels();
1424
1425 this.calculateXLabelRotation();
1426
1427 while((cachedHeight > this.endPoint - this.startPoint)){
1428 cachedHeight = this.endPoint - this.startPoint;
1429 cachedYLabelWidth = this.yLabelWidth;
1430
1431 this.calculateYRange(cachedHeight);
1432 this.buildYLabels();
1433
1434 // Only go through the xLabel loop again if the yLabel width has changed
1435 if (cachedYLabelWidth < this.yLabelWidth){
1436 this.calculateXLabelRotation();
1437 }
1438 }
1439
1440 },
1441 calculateXLabelRotation : function(){
1442 //Get the width of each grid by calculating the difference
1443 //between x offsets between 0 and 1.
1444
1445 this.ctx.font = this.font;
1446
1447 var firstWidth = this.ctx.measureText(this.xLabels[0]).width,
1448 lastWidth = this.ctx.measureText(this.xLabels[this.xLabels.length - 1]).width,
1449 firstRotated,
1450 lastRotated;
1451
1452
1453 this.xScalePaddingRight = lastWidth/2 + 3;
1454 this.xScalePaddingLeft = (firstWidth/2 > this.yLabelWidth + 10) ? firstWidth/2 : this.yLabelWidth + 10;
1455
1456 this.xLabelRotation = 0;
1457 if (this.display){
1458 var originalLabelWidth = longestText(this.ctx,this.font,this.xLabels),
1459 cosRotation,
1460 firstRotatedWidth;
1461 this.xLabelWidth = originalLabelWidth;
1462 //Allow 3 pixels x2 padding either side for label readability
1463 var xGridWidth = Math.floor(this.calculateX(1) - this.calculateX(0)) - 6;
1464
1465 //Max label rotate should be 90 - also act as a loop counter
1466 while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)){
1467 cosRotation = Math.cos(toRadians(this.xLabelRotation));
1468
1469 firstRotated = cosRotation * firstWidth;
1470 lastRotated = cosRotation * lastWidth;
1471
1472 // We're right aligning the text now.
1473 if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8){
1474 this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
1475 }
1476 this.xScalePaddingRight = this.fontSize/2;
1477
1478
1479 this.xLabelRotation++;
1480 this.xLabelWidth = cosRotation * originalLabelWidth;
1481
1482 }
1483 if (this.xLabelRotation > 0){
1484 this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;
1485 }
1486 }
1487 else{
1488 this.xLabelWidth = 0;
1489 this.xScalePaddingRight = this.padding;
1490 this.xScalePaddingLeft = this.padding;
1491 }
1492
1493 },
1494 // Needs to be overidden in each Chart type
1495 // Otherwise we need to pass all the data into the scale class
1496 calculateYRange: noop,
1497 drawingArea: function(){
1498 return this.startPoint - this.endPoint;
1499 },
1500 calculateY : function(value){
1501 var scalingFactor = this.drawingArea() / (this.min - this.max);
1502 return this.endPoint - (scalingFactor * (value - this.min));
1503 },
1504 calculateX : function(index){
1505 var isRotated = (this.xLabelRotation > 0),
1506 // innerWidth = (this.offsetGridLines) ? this.width - offsetLeft - this.padding : this.width - (offsetLeft + halfLabelWidth * 2) - this.padding,
1507 innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
1508 valueWidth = innerWidth/(this.valuesCount - ((this.offsetGridLines) ? 0 : 1)),
1509 valueOffset = (valueWidth * index) + this.xScalePaddingLeft;
1510
1511 if (this.offsetGridLines){
1512 valueOffset += (valueWidth/2);
1513 }
1514
1515 return Math.round(valueOffset);
1516 },
1517 update : function(newProps){
1518 helpers.extend(this, newProps);
1519 this.fit();
1520 },
1521 draw : function(){
1522 var ctx = this.ctx,
1523 yLabelGap = (this.endPoint - this.startPoint) / this.steps,
1524 xStart = Math.round(this.xScalePaddingLeft);
1525 if (this.display){
1526 ctx.fillStyle = this.textColor;
1527 ctx.font = this.font;
1528 each(this.yLabels,function(labelString,index){
1529 var yLabelCenter = this.endPoint - (yLabelGap * index),
1530 linePositionY = Math.round(yLabelCenter);
1531
1532 ctx.textAlign = "right";
1533 ctx.textBaseline = "middle";
1534 if (this.showLabels){
1535 ctx.fillText(labelString,xStart - 10,yLabelCenter);
1536 }
1537 ctx.beginPath();
1538 if (index > 0){
1539 // This is a grid line in the centre, so drop that
1540 ctx.lineWidth = this.gridLineWidth;
1541 ctx.strokeStyle = this.gridLineColor;
1542 } else {
1543 // This is the first line on the scale
1544 ctx.lineWidth = this.lineWidth;
1545 ctx.strokeStyle = this.lineColor;
1546 }
1547
1548 linePositionY += helpers.aliasPixel(ctx.lineWidth);
1549
1550 ctx.moveTo(xStart, linePositionY);
1551 ctx.lineTo(this.width, linePositionY);
1552 ctx.stroke();
1553 ctx.closePath();
1554
1555 ctx.lineWidth = this.lineWidth;
1556 ctx.strokeStyle = this.lineColor;
1557 ctx.beginPath();
1558 ctx.moveTo(xStart - 5, linePositionY);
1559 ctx.lineTo(xStart, linePositionY);
1560 ctx.stroke();
1561 ctx.closePath();
1562
1563 },this);
1564
1565 each(this.xLabels,function(label,index){
1566 var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
1567 // Check to see if line/bar here and decide where to place the line
1568 linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
1569 isRotated = (this.xLabelRotation > 0);
1570
1571 ctx.beginPath();
1572
1573 if (index > 0){
1574 // This is a grid line in the centre, so drop that
1575 ctx.lineWidth = this.gridLineWidth;
1576 ctx.strokeStyle = this.gridLineColor;
1577 } else {
1578 // This is the first line on the scale
1579 ctx.lineWidth = this.lineWidth;
1580 ctx.strokeStyle = this.lineColor;
1581 }
1582 ctx.moveTo(linePos,this.endPoint);
1583 ctx.lineTo(linePos,this.startPoint - 3);
1584 ctx.stroke();
1585 ctx.closePath();
1586
1587
1588 ctx.lineWidth = this.lineWidth;
1589 ctx.strokeStyle = this.lineColor;
1590
1591
1592 // Small lines at the bottom of the base grid line
1593 ctx.beginPath();
1594 ctx.moveTo(linePos,this.endPoint);
1595 ctx.lineTo(linePos,this.endPoint + 5);
1596 ctx.stroke();
1597 ctx.closePath();
1598
1599 ctx.save();
1600 ctx.translate(xPos,(isRotated) ? this.endPoint + 12 : this.endPoint + 8);
1601 ctx.rotate(toRadians(this.xLabelRotation)*-1);
1602 ctx.font = this.font;
1603 ctx.textAlign = (isRotated) ? "right" : "center";
1604 ctx.textBaseline = (isRotated) ? "middle" : "top";
1605 ctx.fillText(label, 0, 0);
1606 ctx.restore();
1607 },this);
1608
1609 }
1610 }
1611
1612 });
1613
1614 Chart.RadialScale = Chart.Element.extend({
1615 initialize: function(){
1616 this.size = min([this.height, this.width]);
1617 this.drawingArea = (this.display) ? (this.size/2) - (this.fontSize/2 + this.backdropPaddingY) : (this.size/2);
1618 },
1619 calculateCenterOffset: function(value){
1620 // Take into account half font size + the yPadding of the top value
1621 var scalingFactor = this.drawingArea / (this.max - this.min);
1622
1623 return (value - this.min) * scalingFactor;
1624 },
1625 update : function(){
1626 if (!this.lineArc){
1627 this.setScaleSize();
1628 } else {
1629 this.drawingArea = (this.display) ? (this.size/2) - (this.fontSize/2 + this.backdropPaddingY) : (this.size/2);
1630 }
1631 this.buildYLabels();
1632 },
1633 buildYLabels: function(){
1634 this.yLabels = [];
1635
1636 var stepDecimalPlaces = getDecimalPlaces(this.stepValue);
1637
1638 for (var i=0; i<=this.steps; i++){
1639 this.yLabels.push(template(this.templateString,{value:(this.min + (i * this.stepValue)).toFixed(stepDecimalPlaces)}));
1640 }
1641 },
1642 getCircumference : function(){
1643 return ((Math.PI*2) / this.valuesCount);
1644 },
1645 setScaleSize: function(){
1646 /*
1647 * Right, this is really confusing and there is a lot of maths going on here
1648 * The gist of the problem is here: https://gist.github.com/nnnick/696cc9c55f4b0beb8fe9
1649 *
1650 * Reaction: https://dl.dropboxusercontent.com/u/34601363/toomuchscience.gif
1651 *
1652 * Solution:
1653 *
1654 * We assume the radius of the polygon is half the size of the canvas at first
1655 * at each index we check if the text overlaps.
1656 *
1657 * Where it does, we store that angle and that index.
1658 *
1659 * After finding the largest index and angle we calculate how much we need to remove
1660 * from the shape radius to move the point inwards by that x.
1661 *
1662 * We average the left and right distances to get the maximum shape radius that can fit in the box
1663 * along with labels.
1664 *
1665 * Once we have that, we can find the centre point for the chart, by taking the x text protrusion
1666 * on each side, removing that from the size, halving it and adding the left x protrusion width.
1667 *
1668 * This will mean we have a shape fitted to the canvas, as large as it can be with the labels
1669 * and position it in the most space efficient manner
1670 *
1671 * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
1672 */
1673
1674
1675 // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
1676 // Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
1677 var largestPossibleRadius = min([(this.height/2 - this.pointLabelFontSize - 5), this.width/2]),
1678 pointPosition,
1679 i,
1680 textWidth,
1681 halfTextWidth,
1682 furthestRight = this.width,
1683 furthestRightIndex,
1684 furthestRightAngle,
1685 furthestLeft = 0,
1686 furthestLeftIndex,
1687 furthestLeftAngle,
1688 xProtrusionLeft,
1689 xProtrusionRight,
1690 radiusReductionRight,
1691 radiusReductionLeft,
1692 maxWidthRadius;
1693 this.ctx.font = fontString(this.pointLabelFontSize,this.pointLabelFontStyle,this.pointLabelFontFamily);
1694 for (i=0;i<this.valuesCount;i++){
1695 // 5px to space the text slightly out - similar to what we do in the draw function.
1696 pointPosition = this.getPointPosition(i, largestPossibleRadius);
1697 textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i] })).width + 5;
1698 if (i === 0 || i === this.valuesCount/2){
1699 // If we're at index zero, or exactly the middle, we're at exactly the top/bottom
1700 // of the radar chart, so text will be aligned centrally, so we'll half it and compare
1701 // w/left and right text sizes
1702 halfTextWidth = textWidth/2;
1703 if (pointPosition.x + halfTextWidth > furthestRight) {
1704 furthestRight = pointPosition.x + halfTextWidth;
1705 furthestRightIndex = i;
1706 }
1707 if (pointPosition.x - halfTextWidth < furthestLeft) {
1708 furthestLeft = pointPosition.x - halfTextWidth;
1709 furthestLeftIndex = i;
1710 }
1711 }
1712 else if (i < this.valuesCount/2) {
1713 // Less than half the values means we'll left align the text
1714 if (pointPosition.x + textWidth > furthestRight) {
1715 furthestRight = pointPosition.x + textWidth;
1716 furthestRightIndex = i;
1717 }
1718 }
1719 else if (i > this.valuesCount/2){
1720 // More than half the values means we'll right align the text
1721 if (pointPosition.x - textWidth < furthestLeft) {
1722 furthestLeft = pointPosition.x - textWidth;
1723 furthestLeftIndex = i;
1724 }
1725 }
1726 }
1727
1728 xProtrusionLeft = furthestLeft;
1729
1730 xProtrusionRight = Math.ceil(furthestRight - this.width);
1731
1732 furthestRightAngle = this.getIndexAngle(furthestRightIndex);
1733
1734 furthestLeftAngle = this.getIndexAngle(furthestLeftIndex);
1735
1736 radiusReductionRight = xProtrusionRight / Math.sin(furthestRightAngle + Math.PI/2);
1737
1738 radiusReductionLeft = xProtrusionLeft / Math.sin(furthestLeftAngle + Math.PI/2);
1739
1740 // Ensure we actually need to reduce the size of the chart
1741 radiusReductionRight = (isNumber(radiusReductionRight)) ? radiusReductionRight : 0;
1742 radiusReductionLeft = (isNumber(radiusReductionLeft)) ? radiusReductionLeft : 0;
1743
1744 this.drawingArea = largestPossibleRadius - (radiusReductionLeft + radiusReductionRight)/2;
1745
1746 //this.drawingArea = min([maxWidthRadius, (this.height - (2 * (this.pointLabelFontSize + 5)))/2])
1747 this.setCenterPoint(radiusReductionLeft, radiusReductionRight);
1748
1749 },
1750 setCenterPoint: function(leftMovement, rightMovement){
1751
1752 var maxRight = this.width - rightMovement - this.drawingArea,
1753 maxLeft = leftMovement + this.drawingArea;
1754
1755 this.xCenter = (maxLeft + maxRight)/2;
1756 // Always vertically in the centre as the text height doesn't change
1757 this.yCenter = (this.height/2);
1758 },
1759
1760 getIndexAngle : function(index){
1761 var angleMultiplier = (Math.PI * 2) / this.valuesCount;
1762 // Start from the top instead of right, so remove a quarter of the circle
1763
1764 return index * angleMultiplier - (Math.PI/2);
1765 },
1766 getPointPosition : function(index, distanceFromCenter){
1767 var thisAngle = this.getIndexAngle(index);
1768 return {
1769 x : (Math.cos(thisAngle) * distanceFromCenter) + this.xCenter,
1770 y : (Math.sin(thisAngle) * distanceFromCenter) + this.yCenter
1771 };
1772 },
1773 draw: function(){
1774 if (this.display){
1775 var ctx = this.ctx;
1776 each(this.yLabels, function(label, index){
1777 // Don't draw a centre value
1778 if (index > 0){
1779 var yCenterOffset = index * (this.drawingArea/this.steps),
1780 yHeight = this.yCenter - yCenterOffset,
1781 pointPosition;
1782
1783 // Draw circular lines around the scale
1784 if (this.lineWidth > 0){
1785 ctx.strokeStyle = this.lineColor;
1786 ctx.lineWidth = this.lineWidth;
1787
1788 if(this.lineArc){
1789 ctx.beginPath();
1790 ctx.arc(this.xCenter, this.yCenter, yCenterOffset, 0, Math.PI*2);
1791 ctx.closePath();
1792 ctx.stroke();
1793 } else{
1794 ctx.beginPath();
1795 for (var i=0;i<this.valuesCount;i++)
1796 {
1797 pointPosition = this.getPointPosition(i, this.calculateCenterOffset(this.min + (index * this.stepValue)));
1798 if (i === 0){
1799 ctx.moveTo(pointPosition.x, pointPosition.y);
1800 } else {
1801 ctx.lineTo(pointPosition.x, pointPosition.y);
1802 }
1803 }
1804 ctx.closePath();
1805 ctx.stroke();
1806 }
1807 }
1808 if(this.showLabels){
1809 ctx.font = fontString(this.fontSize,this.fontStyle,this.fontFamily);
1810 if (this.showLabelBackdrop){
1811 var labelWidth = ctx.measureText(label).width;
1812 ctx.fillStyle = this.backdropColor;
1813 ctx.fillRect(
1814 this.xCenter - labelWidth/2 - this.backdropPaddingX,
1815 yHeight - this.fontSize/2 - this.backdropPaddingY,
1816 labelWidth + this.backdropPaddingX*2,
1817 this.fontSize + this.backdropPaddingY*2
1818 );
1819 }
1820 ctx.textAlign = 'center';
1821 ctx.textBaseline = "middle";
1822 ctx.fillStyle = this.fontColor;
1823 ctx.fillText(label, this.xCenter, yHeight);
1824 }
1825 }
1826 }, this);
1827
1828 if (!this.lineArc){
1829 ctx.lineWidth = this.angleLineWidth;
1830 ctx.strokeStyle = this.angleLineColor;
1831 for (var i = this.valuesCount - 1; i >= 0; i--) {
1832 if (this.angleLineWidth > 0){
1833 var outerPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max));
1834 ctx.beginPath();
1835 ctx.moveTo(this.xCenter, this.yCenter);
1836 ctx.lineTo(outerPosition.x, outerPosition.y);
1837 ctx.stroke();
1838 ctx.closePath();
1839 }
1840 // Extra 3px out for some label spacing
1841 var pointLabelPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max) + 5);
1842 ctx.font = fontString(this.pointLabelFontSize,this.pointLabelFontStyle,this.pointLabelFontFamily);
1843 ctx.fillStyle = this.pointLabelFontColor;
1844
1845 var labelsCount = this.labels.length,
1846 halfLabelsCount = this.labels.length/2,
1847 quarterLabelsCount = halfLabelsCount/2,
1848 upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
1849 exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
1850 if (i === 0){
1851 ctx.textAlign = 'center';
1852 } else if(i === halfLabelsCount){
1853 ctx.textAlign = 'center';
1854 } else if (i < halfLabelsCount){
1855 ctx.textAlign = 'left';
1856 } else {
1857 ctx.textAlign = 'right';
1858 }
1859
1860 // Set the correct text baseline based on outer positioning
1861 if (exactQuarter){
1862 ctx.textBaseline = 'middle';
1863 } else if (upperHalf){
1864 ctx.textBaseline = 'bottom';
1865 } else {
1866 ctx.textBaseline = 'top';
1867 }
1868
1869 ctx.fillText(this.labels[i], pointLabelPosition.x, pointLabelPosition.y);
1870 }
1871 }
1872 }
1873 }
1874 });
1875
1876 // Attach global event to resize each chart instance when the browser resizes
1877 helpers.addEvent(window, "resize", (function(){
1878 // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
1879 var timeout;
1880 return function(){
1881 clearTimeout(timeout);
1882 timeout = setTimeout(function(){
1883 each(Chart.instances,function(instance){
1884 // If the responsive flag is set in the chart instance config
1885 // Cascade the resize event down to the chart.
1886 if (instance.options.responsive){
1887 instance.resize(instance.render, true);
1888 }
1889 });
1890 }, 50);
1891 };
1892 })());
1893
1894
1895 if (amd) {
1896 define(function(){
1897 return Chart;
1898 });
1899 } else if (typeof module === 'object' && module.exports) {
1900 module.exports = Chart;
1901 }
1902
1903 root.Chart = Chart;
1904
1905 Chart.noConflict = function(){
1906 root.Chart = previous;
1907 return Chart;
1908 };
1909
1910}).call(this);
1911
1912(function(){
1913 "use strict";
1914
1915 var root = this,
1916 Chart = root.Chart,
1917 helpers = Chart.helpers;
1918
1919
1920 var defaultConfig = {
1921 //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
1922 scaleBeginAtZero : true,
1923
1924 //Boolean - Whether grid lines are shown across the chart
1925 scaleShowGridLines : true,
1926
1927 //String - Colour of the grid lines
1928 scaleGridLineColor : "rgba(0,0,0,.05)",
1929
1930 //Number - Width of the grid lines
1931 scaleGridLineWidth : 1,
1932
1933 //Boolean - If there is a stroke on each bar
1934 barShowStroke : true,
1935
1936 //Number - Pixel width of the bar stroke
1937 barStrokeWidth : 2,
1938
1939 //Number - Spacing between each of the X value sets
1940 barValueSpacing : 5,
1941
1942 //Number - Spacing between data sets within X values
1943 barDatasetSpacing : 1,
1944
1945 //String - A legend template
1946 legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
1947
1948 };
1949
1950
1951 Chart.Type.extend({
1952 name: "Bar",
1953 defaults : defaultConfig,
1954 initialize: function(data){
1955
1956 //Expose options as a scope variable here so we can access it in the ScaleClass
1957 var options = this.options;
1958
1959 this.ScaleClass = Chart.Scale.extend({
1960 offsetGridLines : true,
1961 calculateBarX : function(datasetCount, datasetIndex, barIndex){
1962 //Reusable method for calculating the xPosition of a given bar based on datasetIndex & width of the bar
1963 var xWidth = this.calculateBaseWidth(),
1964 xAbsolute = this.calculateX(barIndex) - (xWidth/2),
1965 barWidth = this.calculateBarWidth(datasetCount);
1966
1967 return xAbsolute + (barWidth * datasetIndex) + (datasetIndex * options.barDatasetSpacing) + barWidth/2;
1968 },
1969 calculateBaseWidth : function(){
1970 return (this.calculateX(1) - this.calculateX(0)) - (2*options.barValueSpacing);
1971 },
1972 calculateBarWidth : function(datasetCount){
1973 //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
1974 var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing);
1975
1976 return (baseWidth / datasetCount);
1977 }
1978 });
1979
1980 this.datasets = [];
1981
1982 //Set up tooltip events on the chart
1983 if (this.options.showTooltips){
1984 helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
1985 var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
1986
1987 this.eachBars(function(bar){
1988 bar.restore(['fillColor', 'strokeColor']);
1989 });
1990 helpers.each(activeBars, function(activeBar){
1991 activeBar.fillColor = activeBar.highlightFill;
1992 activeBar.strokeColor = activeBar.highlightStroke;
1993 });
1994 this.showTooltip(activeBars);
1995 });
1996 }
1997
1998 //Declare the extension of the default point, to cater for the options passed in to the constructor
1999 this.BarClass = Chart.Rectangle.extend({
2000 strokeWidth : this.options.barStrokeWidth,
2001 showStroke : this.options.barShowStroke,
2002 ctx : this.chart.ctx
2003 });
2004
2005 //Iterate through each of the datasets, and build this into a property of the chart
2006 helpers.each(data.datasets,function(dataset,datasetIndex){
2007
2008 var datasetObject = {
2009 label : dataset.label || null,
2010 fillColor : dataset.fillColor,
2011 strokeColor : dataset.strokeColor,
2012 bars : []
2013 };
2014
2015 this.datasets.push(datasetObject);
2016
2017 helpers.each(dataset.data,function(dataPoint,index){
2018 if (helpers.isNumber(dataPoint)){
2019 //Add a new point for each piece of data, passing any required data to draw.
2020 datasetObject.bars.push(new this.BarClass({
2021 value : dataPoint,
2022 label : data.labels[index],
2023 datasetLabel: dataset.label,
2024 strokeColor : dataset.strokeColor,
2025 fillColor : dataset.fillColor,
2026 highlightFill : dataset.highlightFill || dataset.fillColor,
2027 highlightStroke : dataset.highlightStroke || dataset.strokeColor
2028 }));
2029 }
2030 },this);
2031
2032 },this);
2033
2034 this.buildScale(data.labels);
2035
2036 this.BarClass.prototype.base = this.scale.endPoint;
2037
2038 this.eachBars(function(bar, index, datasetIndex){
2039 helpers.extend(bar, {
2040 width : this.scale.calculateBarWidth(this.datasets.length),
2041 x: this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
2042 y: this.scale.endPoint
2043 });
2044 bar.save();
2045 }, this);
2046
2047 this.render();
2048 },
2049 update : function(){
2050 this.scale.update();
2051 // Reset any highlight colours before updating.
2052 helpers.each(this.activeElements, function(activeElement){
2053 activeElement.restore(['fillColor', 'strokeColor']);
2054 });
2055
2056 this.eachBars(function(bar){
2057 bar.save();
2058 });
2059 this.render();
2060 },
2061 eachBars : function(callback){
2062 helpers.each(this.datasets,function(dataset, datasetIndex){
2063 helpers.each(dataset.bars, callback, this, datasetIndex);
2064 },this);
2065 },
2066 getBarsAtEvent : function(e){
2067 var barsArray = [],
2068 eventPosition = helpers.getRelativePosition(e),
2069 datasetIterator = function(dataset){
2070 barsArray.push(dataset.bars[barIndex]);
2071 },
2072 barIndex;
2073
2074 for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
2075 for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
2076 if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
2077 helpers.each(this.datasets, datasetIterator);
2078 return barsArray;
2079 }
2080 }
2081 }
2082
2083 return barsArray;
2084 },
2085 buildScale : function(labels){
2086 var self = this;
2087
2088 var dataTotal = function(){
2089 var values = [];
2090 self.eachBars(function(bar){
2091 values.push(bar.value);
2092 });
2093 return values;
2094 };
2095
2096 var scaleOptions = {
2097 templateString : this.options.scaleLabel,
2098 height : this.chart.height,
2099 width : this.chart.width,
2100 ctx : this.chart.ctx,
2101 textColor : this.options.scaleFontColor,
2102 fontSize : this.options.scaleFontSize,
2103 fontStyle : this.options.scaleFontStyle,
2104 fontFamily : this.options.scaleFontFamily,
2105 valuesCount : labels.length,
2106 beginAtZero : this.options.scaleBeginAtZero,
2107 integersOnly : this.options.scaleIntegersOnly,
2108 calculateYRange: function(currentHeight){
2109 var updatedRanges = helpers.calculateScaleRange(
2110 dataTotal(),
2111 currentHeight,
2112 this.fontSize,
2113 this.beginAtZero,
2114 this.integersOnly
2115 );
2116 helpers.extend(this, updatedRanges);
2117 },
2118 xLabels : labels,
2119 font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
2120 lineWidth : this.options.scaleLineWidth,
2121 lineColor : this.options.scaleLineColor,
2122 gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
2123 gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
2124 padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
2125 showLabels : this.options.scaleShowLabels,
2126 display : this.options.showScale
2127 };
2128
2129 if (this.options.scaleOverride){
2130 helpers.extend(scaleOptions, {
2131 calculateYRange: helpers.noop,
2132 steps: this.options.scaleSteps,
2133 stepValue: this.options.scaleStepWidth,
2134 min: this.options.scaleStartValue,
2135 max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
2136 });
2137 }
2138
2139 this.scale = new this.ScaleClass(scaleOptions);
2140 },
2141 addData : function(valuesArray,label){
2142 //Map the values array for each of the datasets
2143 helpers.each(valuesArray,function(value,datasetIndex){
2144 if (helpers.isNumber(value)){
2145 //Add a new point for each piece of data, passing any required data to draw.
2146 this.datasets[datasetIndex].bars.push(new this.BarClass({
2147 value : value,
2148 label : label,
2149 x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
2150 y: this.scale.endPoint,
2151 width : this.scale.calculateBarWidth(this.datasets.length),
2152 base : this.scale.endPoint,
2153 strokeColor : this.datasets[datasetIndex].strokeColor,
2154 fillColor : this.datasets[datasetIndex].fillColor
2155 }));
2156 }
2157 },this);
2158
2159 this.scale.addXLabel(label);
2160 //Then re-render the chart.
2161 this.update();
2162 },
2163 removeData : function(){
2164 this.scale.removeXLabel();
2165 //Then re-render the chart.
2166 helpers.each(this.datasets,function(dataset){
2167 dataset.bars.shift();
2168 },this);
2169 this.update();
2170 },
2171 reflow : function(){
2172 helpers.extend(this.BarClass.prototype,{
2173 y: this.scale.endPoint,
2174 base : this.scale.endPoint
2175 });
2176 var newScaleProps = helpers.extend({
2177 height : this.chart.height,
2178 width : this.chart.width
2179 });
2180 this.scale.update(newScaleProps);
2181 },
2182 draw : function(ease){
2183 var easingDecimal = ease || 1;
2184 this.clear();
2185
2186 var ctx = this.chart.ctx;
2187
2188 this.scale.draw(easingDecimal);
2189
2190 //Draw all the bars for each dataset
2191 helpers.each(this.datasets,function(dataset,datasetIndex){
2192 helpers.each(dataset.bars,function(bar,index){
2193 bar.base = this.scale.endPoint;
2194 //Transition then draw
2195 bar.transition({
2196 x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
2197 y : this.scale.calculateY(bar.value),
2198 width : this.scale.calculateBarWidth(this.datasets.length)
2199 }, easingDecimal).draw();
2200 },this);
2201
2202 },this);
2203 }
2204 });
2205
2206
2207}).call(this);
2208(function(){
2209 "use strict";
2210
2211 var root = this,
2212 Chart = root.Chart,
2213 //Cache a local reference to Chart.helpers
2214 helpers = Chart.helpers;
2215
2216 var defaultConfig = {
2217 //Boolean - Whether we should show a stroke on each segment
2218 segmentShowStroke : true,
2219
2220 //String - The colour of each segment stroke
2221 segmentStrokeColor : "#fff",
2222
2223 //Number - The width of each segment stroke
2224 segmentStrokeWidth : 2,
2225
2226 //The percentage of the chart that we cut out of the middle.
2227 percentageInnerCutout : 50,
2228
2229 //Number - Amount of animation steps
2230 animationSteps : 100,
2231
2232 //String - Animation easing effect
2233 animationEasing : "easeOutBounce",
2234
2235 //Boolean - Whether we animate the rotation of the Doughnut
2236 animateRotate : true,
2237
2238 //Boolean - Whether we animate scaling the Doughnut from the centre
2239 animateScale : false,
2240
2241 //String - A legend template
2242 legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
2243
2244 };
2245
2246
2247 Chart.Type.extend({
2248 //Passing in a name registers this chart in the Chart namespace
2249 name: "Doughnut",
2250 //Providing a defaults will also register the deafults in the chart namespace
2251 defaults : defaultConfig,
2252 //Initialize is fired when the chart is initialized - Data is passed in as a parameter
2253 //Config is automatically merged by the core of Chart.js, and is available at this.options
2254 initialize: function(data){
2255
2256 //Declare segments as a static property to prevent inheriting across the Chart type prototype
2257 this.segments = [];
2258 this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
2259
2260 this.SegmentArc = Chart.Arc.extend({
2261 ctx : this.chart.ctx,
2262 x : this.chart.width/2,
2263 y : this.chart.height/2
2264 });
2265
2266 //Set up tooltip events on the chart
2267 if (this.options.showTooltips){
2268 helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
2269 var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : [];
2270
2271 helpers.each(this.segments,function(segment){
2272 segment.restore(["fillColor"]);
2273 });
2274 helpers.each(activeSegments,function(activeSegment){
2275 activeSegment.fillColor = activeSegment.highlightColor;
2276 });
2277 this.showTooltip(activeSegments);
2278 });
2279 }
2280 this.calculateTotal(data);
2281
2282 helpers.each(data,function(datapoint, index){
2283 this.addData(datapoint, index, true);
2284 },this);
2285
2286 this.render();
2287 },
2288 getSegmentsAtEvent : function(e){
2289 var segmentsArray = [];
2290
2291 var location = helpers.getRelativePosition(e);
2292
2293 helpers.each(this.segments,function(segment){
2294 if (segment.inRange(location.x,location.y)) segmentsArray.push(segment);
2295 },this);
2296 return segmentsArray;
2297 },
2298 addData : function(segment, atIndex, silent){
2299 var index = atIndex || this.segments.length;
2300 this.segments.splice(index, 0, new this.SegmentArc({
2301 value : segment.value,
2302 outerRadius : (this.options.animateScale) ? 0 : this.outerRadius,
2303 innerRadius : (this.options.animateScale) ? 0 : (this.outerRadius/100) * this.options.percentageInnerCutout,
2304 fillColor : segment.color,
2305 highlightColor : segment.highlight || segment.color,
2306 showStroke : this.options.segmentShowStroke,
2307 strokeWidth : this.options.segmentStrokeWidth,
2308 strokeColor : this.options.segmentStrokeColor,
2309 startAngle : Math.PI * 1.5,
2310 circumference : (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
2311 label : segment.label
2312 }));
2313 if (!silent){
2314 this.reflow();
2315 this.update();
2316 }
2317 },
2318 calculateCircumference : function(value){
2319 return (Math.PI*2)*(value / this.total);
2320 },
2321 calculateTotal : function(data){
2322 this.total = 0;
2323 helpers.each(data,function(segment){
2324 this.total += segment.value;
2325 },this);
2326 },
2327 update : function(){
2328 this.calculateTotal(this.segments);
2329
2330 // Reset any highlight colours before updating.
2331 helpers.each(this.activeElements, function(activeElement){
2332 activeElement.restore(['fillColor']);
2333 });
2334
2335 helpers.each(this.segments,function(segment){
2336 segment.save();
2337 });
2338 this.render();
2339 },
2340
2341 removeData: function(atIndex){
2342 var indexToDelete = (helpers.isNumber(atIndex)) ? atIndex : this.segments.length-1;
2343 this.segments.splice(indexToDelete, 1);
2344 this.reflow();
2345 this.update();
2346 },
2347
2348 reflow : function(){
2349 helpers.extend(this.SegmentArc.prototype,{
2350 x : this.chart.width/2,
2351 y : this.chart.height/2
2352 });
2353 this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
2354 helpers.each(this.segments, function(segment){
2355 segment.update({
2356 outerRadius : this.outerRadius,
2357 innerRadius : (this.outerRadius/100) * this.options.percentageInnerCutout
2358 });
2359 }, this);
2360 },
2361 draw : function(easeDecimal){
2362 var animDecimal = (easeDecimal) ? easeDecimal : 1;
2363 this.clear();
2364 helpers.each(this.segments,function(segment,index){
2365 segment.transition({
2366 circumference : this.calculateCircumference(segment.value),
2367 outerRadius : this.outerRadius,
2368 innerRadius : (this.outerRadius/100) * this.options.percentageInnerCutout
2369 },animDecimal);
2370
2371 segment.endAngle = segment.startAngle + segment.circumference;
2372
2373 segment.draw();
2374 if (index === 0){
2375 segment.startAngle = Math.PI * 1.5;
2376 }
2377 //Check to see if it's the last segment, if not get the next and update the start angle
2378 if (index < this.segments.length-1){
2379 this.segments[index+1].startAngle = segment.endAngle;
2380 }
2381 },this);
2382
2383 }
2384 });
2385
2386 Chart.types.Doughnut.extend({
2387 name : "Pie",
2388 defaults : helpers.merge(defaultConfig,{percentageInnerCutout : 0})
2389 });
2390
2391}).call(this);
2392(function(){
2393 "use strict";
2394
2395 var root = this,
2396 Chart = root.Chart,
2397 helpers = Chart.helpers;
2398
2399 var defaultConfig = {
2400
2401 ///Boolean - Whether grid lines are shown across the chart
2402 scaleShowGridLines : true,
2403
2404 //String - Colour of the grid lines
2405 scaleGridLineColor : "rgba(0,0,0,.05)",
2406
2407 //Number - Width of the grid lines
2408 scaleGridLineWidth : 1,
2409
2410 //Boolean - Whether the line is curved between points
2411 bezierCurve : true,
2412
2413 //Number - Tension of the bezier curve between points
2414 bezierCurveTension : 0.4,
2415
2416 //Boolean - Whether to show a dot for each point
2417 pointDot : true,
2418
2419 //Number - Radius of each point dot in pixels
2420 pointDotRadius : 4,
2421
2422 //Number - Pixel width of point dot stroke
2423 pointDotStrokeWidth : 1,
2424
2425 //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
2426 pointHitDetectionRadius : 20,
2427
2428 //Boolean - Whether to show a stroke for datasets
2429 datasetStroke : true,
2430
2431 //Number - Pixel width of dataset stroke
2432 datasetStrokeWidth : 2,
2433
2434 //Boolean - Whether to fill the dataset with a colour
2435 datasetFill : true,
2436
2437 //String - A legend template
2438 legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
2439
2440 };
2441
2442
2443 Chart.Type.extend({
2444 name: "Line",
2445 defaults : defaultConfig,
2446 initialize: function(data){
2447 //Declare the extension of the default point, to cater for the options passed in to the constructor
2448 this.PointClass = Chart.Point.extend({
2449 strokeWidth : this.options.pointDotStrokeWidth,
2450 radius : this.options.pointDotRadius,
2451 display: this.options.pointDot,
2452 hitDetectionRadius : this.options.pointHitDetectionRadius,
2453 ctx : this.chart.ctx,
2454 inRange : function(mouseX){
2455 return (Math.pow(mouseX-this.x, 2) < Math.pow(this.radius + this.hitDetectionRadius,2));
2456 }
2457 });
2458
2459 this.datasets = [];
2460
2461 //Set up tooltip events on the chart
2462 if (this.options.showTooltips){
2463 helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
2464 var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
2465 this.eachPoints(function(point){
2466 point.restore(['fillColor', 'strokeColor']);
2467 });
2468 helpers.each(activePoints, function(activePoint){
2469 activePoint.fillColor = activePoint.highlightFill;
2470 activePoint.strokeColor = activePoint.highlightStroke;
2471 });
2472 this.showTooltip(activePoints);
2473 });
2474 }
2475
2476 //Iterate through each of the datasets, and build this into a property of the chart
2477 helpers.each(data.datasets,function(dataset){
2478
2479 var datasetObject = {
2480 label : dataset.label || null,
2481 fillColor : dataset.fillColor,
2482 strokeColor : dataset.strokeColor,
2483 pointColor : dataset.pointColor,
2484 pointStrokeColor : dataset.pointStrokeColor,
2485 points : []
2486 };
2487
2488 this.datasets.push(datasetObject);
2489
2490
2491 helpers.each(dataset.data,function(dataPoint,index){
2492 //Best way to do this? or in draw sequence...?
2493 if (helpers.isNumber(dataPoint)){
2494 //Add a new point for each piece of data, passing any required data to draw.
2495 datasetObject.points.push(new this.PointClass({
2496 value : dataPoint,
2497 label : data.labels[index],
2498 datasetLabel: dataset.label,
2499 strokeColor : dataset.pointStrokeColor,
2500 fillColor : dataset.pointColor,
2501 highlightFill : dataset.pointHighlightFill || dataset.pointColor,
2502 highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
2503 }));
2504 }
2505 },this);
2506
2507 this.buildScale(data.labels);
2508
2509
2510 this.eachPoints(function(point, index){
2511 helpers.extend(point, {
2512 x: this.scale.calculateX(index),
2513 y: this.scale.endPoint
2514 });
2515 point.save();
2516 }, this);
2517
2518 },this);
2519
2520
2521 this.render();
2522 },
2523 update : function(){
2524 this.scale.update();
2525 // Reset any highlight colours before updating.
2526 helpers.each(this.activeElements, function(activeElement){
2527 activeElement.restore(['fillColor', 'strokeColor']);
2528 });
2529 this.eachPoints(function(point){
2530 point.save();
2531 });
2532 this.render();
2533 },
2534 eachPoints : function(callback){
2535 helpers.each(this.datasets,function(dataset){
2536 helpers.each(dataset.points,callback,this);
2537 },this);
2538 },
2539 getPointsAtEvent : function(e){
2540 var pointsArray = [],
2541 eventPosition = helpers.getRelativePosition(e);
2542 helpers.each(this.datasets,function(dataset){
2543 helpers.each(dataset.points,function(point){
2544 if (point.inRange(eventPosition.x,eventPosition.y)) pointsArray.push(point);
2545 });
2546 },this);
2547 return pointsArray;
2548 },
2549 buildScale : function(labels){
2550 var self = this;
2551
2552 var dataTotal = function(){
2553 var values = [];
2554 self.eachPoints(function(point){
2555 values.push(point.value);
2556 });
2557
2558 return values;
2559 };
2560
2561 var scaleOptions = {
2562 templateString : this.options.scaleLabel,
2563 height : this.chart.height,
2564 width : this.chart.width,
2565 ctx : this.chart.ctx,
2566 textColor : this.options.scaleFontColor,
2567 fontSize : this.options.scaleFontSize,
2568 fontStyle : this.options.scaleFontStyle,
2569 fontFamily : this.options.scaleFontFamily,
2570 valuesCount : labels.length,
2571 beginAtZero : this.options.scaleBeginAtZero,
2572 integersOnly : this.options.scaleIntegersOnly,
2573 calculateYRange : function(currentHeight){
2574 var updatedRanges = helpers.calculateScaleRange(
2575 dataTotal(),
2576 currentHeight,
2577 this.fontSize,
2578 this.beginAtZero,
2579 this.integersOnly
2580 );
2581 helpers.extend(this, updatedRanges);
2582 },
2583 xLabels : labels,
2584 font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
2585 lineWidth : this.options.scaleLineWidth,
2586 lineColor : this.options.scaleLineColor,
2587 gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
2588 gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
2589 padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
2590 showLabels : this.options.scaleShowLabels,
2591 display : this.options.showScale
2592 };
2593
2594 if (this.options.scaleOverride){
2595 helpers.extend(scaleOptions, {
2596 calculateYRange: helpers.noop,
2597 steps: this.options.scaleSteps,
2598 stepValue: this.options.scaleStepWidth,
2599 min: this.options.scaleStartValue,
2600 max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
2601 });
2602 }
2603
2604
2605 this.scale = new Chart.Scale(scaleOptions);
2606 },
2607 addData : function(valuesArray,label){
2608 //Map the values array for each of the datasets
2609
2610 helpers.each(valuesArray,function(value,datasetIndex){
2611 if (helpers.isNumber(value)){
2612 //Add a new point for each piece of data, passing any required data to draw.
2613 this.datasets[datasetIndex].points.push(new this.PointClass({
2614 value : value,
2615 label : label,
2616 x: this.scale.calculateX(this.scale.valuesCount+1),
2617 y: this.scale.endPoint,
2618 strokeColor : this.datasets[datasetIndex].pointStrokeColor,
2619 fillColor : this.datasets[datasetIndex].pointColor
2620 }));
2621 }
2622 },this);
2623
2624 this.scale.addXLabel(label);
2625 //Then re-render the chart.
2626 this.update();
2627 },
2628 removeData : function(){
2629 this.scale.removeXLabel();
2630 //Then re-render the chart.
2631 helpers.each(this.datasets,function(dataset){
2632 dataset.points.shift();
2633 },this);
2634 this.update();
2635 },
2636 reflow : function(){
2637 var newScaleProps = helpers.extend({
2638 height : this.chart.height,
2639 width : this.chart.width
2640 });
2641 this.scale.update(newScaleProps);
2642 },
2643 draw : function(ease){
2644 var easingDecimal = ease || 1;
2645 this.clear();
2646
2647 var ctx = this.chart.ctx;
2648
2649 this.scale.draw(easingDecimal);
2650
2651
2652 helpers.each(this.datasets,function(dataset){
2653
2654 //Transition each point first so that the line and point drawing isn't out of sync
2655 //We can use this extra loop to calculate the control points of this dataset also in this loop
2656
2657 helpers.each(dataset.points,function(point,index){
2658 point.transition({
2659 y : this.scale.calculateY(point.value),
2660 x : this.scale.calculateX(index)
2661 }, easingDecimal);
2662
2663 },this);
2664
2665
2666 // Control points need to be calculated in a seperate loop, because we need to know the current x/y of the point
2667 // This would cause issues when there is no animation, because the y of the next point would be 0, so beziers would be skewed
2668 if (this.options.bezierCurve){
2669 helpers.each(dataset.points,function(point,index){
2670 //If we're at the start or end, we don't have a previous/next point
2671 //By setting the tension to 0 here, the curve will transition to straight at the end
2672 if (index === 0){
2673 point.controlPoints = helpers.splineCurve(point,point,dataset.points[index+1],0);
2674 }
2675 else if (index >= dataset.points.length-1){
2676 point.controlPoints = helpers.splineCurve(dataset.points[index-1],point,point,0);
2677 }
2678 else{
2679 point.controlPoints = helpers.splineCurve(dataset.points[index-1],point,dataset.points[index+1],this.options.bezierCurveTension);
2680 }
2681 },this);
2682 }
2683
2684
2685 //Draw the line between all the points
2686 ctx.lineWidth = this.options.datasetStrokeWidth;
2687 ctx.strokeStyle = dataset.strokeColor;
2688 ctx.beginPath();
2689 helpers.each(dataset.points,function(point,index){
2690 if (index>0){
2691 if(this.options.bezierCurve){
2692 ctx.bezierCurveTo(
2693 dataset.points[index-1].controlPoints.outer.x,
2694 dataset.points[index-1].controlPoints.outer.y,
2695 point.controlPoints.inner.x,
2696 point.controlPoints.inner.y,
2697 point.x,
2698 point.y
2699 );
2700 }
2701 else{
2702 ctx.lineTo(point.x,point.y);
2703 }
2704
2705 }
2706 else{
2707 ctx.moveTo(point.x,point.y);
2708 }
2709 },this);
2710 ctx.stroke();
2711
2712
2713 if (this.options.datasetFill){
2714 //Round off the line by going to the base of the chart, back to the start, then fill.
2715 ctx.lineTo(dataset.points[dataset.points.length-1].x, this.scale.endPoint);
2716 ctx.lineTo(this.scale.calculateX(0), this.scale.endPoint);
2717 ctx.fillStyle = dataset.fillColor;
2718 ctx.closePath();
2719 ctx.fill();
2720 }
2721
2722 //Now draw the points over the line
2723 //A little inefficient double looping, but better than the line
2724 //lagging behind the point positions
2725 helpers.each(dataset.points,function(point){
2726 point.draw();
2727 });
2728
2729 },this);
2730 }
2731 });
2732
2733
2734}).call(this);
2735(function(){
2736 "use strict";
2737
2738 var root = this,
2739 Chart = root.Chart,
2740 //Cache a local reference to Chart.helpers
2741 helpers = Chart.helpers;
2742
2743 var defaultConfig = {
2744 //Boolean - Show a backdrop to the scale label
2745 scaleShowLabelBackdrop : true,
2746
2747 //String - The colour of the label backdrop
2748 scaleBackdropColor : "rgba(255,255,255,0.75)",
2749
2750 // Boolean - Whether the scale should begin at zero
2751 scaleBeginAtZero : true,
2752
2753 //Number - The backdrop padding above & below the label in pixels
2754 scaleBackdropPaddingY : 2,
2755
2756 //Number - The backdrop padding to the side of the label in pixels
2757 scaleBackdropPaddingX : 2,
2758
2759 //Boolean - Show line for each value in the scale
2760 scaleShowLine : true,
2761
2762 //Boolean - Stroke a line around each segment in the chart
2763 segmentShowStroke : true,
2764
2765 //String - The colour of the stroke on each segement.
2766 segmentStrokeColor : "#fff",
2767
2768 //Number - The width of the stroke value in pixels
2769 segmentStrokeWidth : 2,
2770
2771 //Number - Amount of animation steps
2772 animationSteps : 100,
2773
2774 //String - Animation easing effect.
2775 animationEasing : "easeOutBounce",
2776
2777 //Boolean - Whether to animate the rotation of the chart
2778 animateRotate : true,
2779
2780 //Boolean - Whether to animate scaling the chart from the centre
2781 animateScale : false,
2782
2783 //String - A legend template
2784 legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
2785 };
2786
2787
2788 Chart.Type.extend({
2789 //Passing in a name registers this chart in the Chart namespace
2790 name: "PolarArea",
2791 //Providing a defaults will also register the deafults in the chart namespace
2792 defaults : defaultConfig,
2793 //Initialize is fired when the chart is initialized - Data is passed in as a parameter
2794 //Config is automatically merged by the core of Chart.js, and is available at this.options
2795 initialize: function(data){
2796 this.segments = [];
2797 //Declare segment class as a chart instance specific class, so it can share props for this instance
2798 this.SegmentArc = Chart.Arc.extend({
2799 showStroke : this.options.segmentShowStroke,
2800 strokeWidth : this.options.segmentStrokeWidth,
2801 strokeColor : this.options.segmentStrokeColor,
2802 ctx : this.chart.ctx,
2803 innerRadius : 0,
2804 x : this.chart.width/2,
2805 y : this.chart.height/2
2806 });
2807 this.scale = new Chart.RadialScale({
2808 display: this.options.showScale,
2809 fontStyle: this.options.scaleFontStyle,
2810 fontSize: this.options.scaleFontSize,
2811 fontFamily: this.options.scaleFontFamily,
2812 fontColor: this.options.scaleFontColor,
2813 showLabels: this.options.scaleShowLabels,
2814 showLabelBackdrop: this.options.scaleShowLabelBackdrop,
2815 backdropColor: this.options.scaleBackdropColor,
2816 backdropPaddingY : this.options.scaleBackdropPaddingY,
2817 backdropPaddingX: this.options.scaleBackdropPaddingX,
2818 lineWidth: (this.options.scaleShowLine) ? this.options.scaleLineWidth : 0,
2819 lineColor: this.options.scaleLineColor,
2820 lineArc: true,
2821 width: this.chart.width,
2822 height: this.chart.height,
2823 xCenter: this.chart.width/2,
2824 yCenter: this.chart.height/2,
2825 ctx : this.chart.ctx,
2826 templateString: this.options.scaleLabel,
2827 valuesCount: data.length
2828 });
2829
2830 this.updateScaleRange(data);
2831
2832 this.scale.update();
2833
2834 helpers.each(data,function(segment,index){
2835 this.addData(segment,index,true);
2836 },this);
2837
2838 //Set up tooltip events on the chart
2839 if (this.options.showTooltips){
2840 helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
2841 var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : [];
2842 helpers.each(this.segments,function(segment){
2843 segment.restore(["fillColor"]);
2844 });
2845 helpers.each(activeSegments,function(activeSegment){
2846 activeSegment.fillColor = activeSegment.highlightColor;
2847 });
2848 this.showTooltip(activeSegments);
2849 });
2850 }
2851
2852 this.render();
2853 },
2854 getSegmentsAtEvent : function(e){
2855 var segmentsArray = [];
2856
2857 var location = helpers.getRelativePosition(e);
2858
2859 helpers.each(this.segments,function(segment){
2860 if (segment.inRange(location.x,location.y)) segmentsArray.push(segment);
2861 },this);
2862 return segmentsArray;
2863 },
2864 addData : function(segment, atIndex, silent){
2865 var index = atIndex || this.segments.length;
2866
2867 this.segments.splice(index, 0, new this.SegmentArc({
2868 fillColor: segment.color,
2869 highlightColor: segment.highlight || segment.color,
2870 label: segment.label,
2871 value: segment.value,
2872 outerRadius: (this.options.animateScale) ? 0 : this.scale.calculateCenterOffset(segment.value),
2873 circumference: (this.options.animateRotate) ? 0 : this.scale.getCircumference(),
2874 startAngle: Math.PI * 1.5
2875 }));
2876 if (!silent){
2877 this.reflow();
2878 this.update();
2879 }
2880 },
2881 removeData: function(atIndex){
2882 var indexToDelete = (helpers.isNumber(atIndex)) ? atIndex : this.segments.length-1;
2883 this.segments.splice(indexToDelete, 1);
2884 this.reflow();
2885 this.update();
2886 },
2887 calculateTotal: function(data){
2888 this.total = 0;
2889 helpers.each(data,function(segment){
2890 this.total += segment.value;
2891 },this);
2892 this.scale.valuesCount = this.segments.length;
2893 },
2894 updateScaleRange: function(datapoints){
2895 var valuesArray = [];
2896 helpers.each(datapoints,function(segment){
2897 valuesArray.push(segment.value);
2898 });
2899
2900 var scaleSizes = (this.options.scaleOverride) ?
2901 {
2902 steps: this.options.scaleSteps,
2903 stepValue: this.options.scaleStepWidth,
2904 min: this.options.scaleStartValue,
2905 max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
2906 } :
2907 helpers.calculateScaleRange(
2908 valuesArray,
2909 helpers.min([this.chart.width, this.chart.height])/2,
2910 this.options.scaleFontSize,
2911 this.options.scaleBeginAtZero,
2912 this.options.scaleIntegersOnly
2913 );
2914
2915 helpers.extend(
2916 this.scale,
2917 scaleSizes,
2918 {
2919 size: helpers.min([this.chart.width, this.chart.height]),
2920 xCenter: this.chart.width/2,
2921 yCenter: this.chart.height/2
2922 }
2923 );
2924
2925 },
2926 update : function(){
2927 this.calculateTotal(this.segments);
2928
2929 helpers.each(this.segments,function(segment){
2930 segment.save();
2931 });
2932 this.render();
2933 },
2934 reflow : function(){
2935 helpers.extend(this.SegmentArc.prototype,{
2936 x : this.chart.width/2,
2937 y : this.chart.height/2
2938 });
2939 this.updateScaleRange(this.segments);
2940 this.scale.update();
2941
2942 helpers.extend(this.scale,{
2943 xCenter: this.chart.width/2,
2944 yCenter: this.chart.height/2
2945 });
2946
2947 helpers.each(this.segments, function(segment){
2948 segment.update({
2949 outerRadius : this.scale.calculateCenterOffset(segment.value)
2950 });
2951 }, this);
2952
2953 },
2954 draw : function(ease){
2955 var easingDecimal = ease || 1;
2956 //Clear & draw the canvas
2957 this.clear();
2958 helpers.each(this.segments,function(segment, index){
2959 segment.transition({
2960 circumference : this.scale.getCircumference(),
2961 outerRadius : this.scale.calculateCenterOffset(segment.value)
2962 },easingDecimal);
2963
2964 segment.endAngle = segment.startAngle + segment.circumference;
2965
2966 // If we've removed the first segment we need to set the first one to
2967 // start at the top.
2968 if (index === 0){
2969 segment.startAngle = Math.PI * 1.5;
2970 }
2971
2972 //Check to see if it's the last segment, if not get the next and update the start angle
2973 if (index < this.segments.length - 1){
2974 this.segments[index+1].startAngle = segment.endAngle;
2975 }
2976 segment.draw();
2977 }, this);
2978 this.scale.draw();
2979 }
2980 });
2981
2982}).call(this);
2983(function(){
2984 "use strict";
2985
2986 var root = this,
2987 Chart = root.Chart,
2988 helpers = Chart.helpers;
2989
2990
2991
2992 Chart.Type.extend({
2993 name: "Radar",
2994 defaults:{
2995 //Boolean - Whether to show lines for each scale point
2996 scaleShowLine : true,
2997
2998 //Boolean - Whether we show the angle lines out of the radar
2999 angleShowLineOut : true,
3000
3001 //Boolean - Whether to show labels on the scale
3002 scaleShowLabels : false,
3003
3004 // Boolean - Whether the scale should begin at zero
3005 scaleBeginAtZero : true,
3006
3007 //String - Colour of the angle line
3008 angleLineColor : "rgba(0,0,0,.1)",
3009
3010 //Number - Pixel width of the angle line
3011 angleLineWidth : 1,
3012
3013 //String - Point label font declaration
3014 pointLabelFontFamily : "'Arial'",
3015
3016 //String - Point label font weight
3017 pointLabelFontStyle : "normal",
3018
3019 //Number - Point label font size in pixels
3020 pointLabelFontSize : 10,
3021
3022 //String - Point label font colour
3023 pointLabelFontColor : "#666",
3024
3025 //Boolean - Whether to show a dot for each point
3026 pointDot : true,
3027
3028 //Number - Radius of each point dot in pixels
3029 pointDotRadius : 3,
3030
3031 //Number - Pixel width of point dot stroke
3032 pointDotStrokeWidth : 1,
3033
3034 //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
3035 pointHitDetectionRadius : 20,
3036
3037 //Boolean - Whether to show a stroke for datasets
3038 datasetStroke : true,
3039
3040 //Number - Pixel width of dataset stroke
3041 datasetStrokeWidth : 2,
3042
3043 //Boolean - Whether to fill the dataset with a colour
3044 datasetFill : true,
3045
3046 //String - A legend template
3047 legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
3048
3049 },
3050
3051 initialize: function(data){
3052 this.PointClass = Chart.Point.extend({
3053 strokeWidth : this.options.pointDotStrokeWidth,
3054 radius : this.options.pointDotRadius,
3055 display: this.options.pointDot,
3056 hitDetectionRadius : this.options.pointHitDetectionRadius,
3057 ctx : this.chart.ctx
3058 });
3059
3060 this.datasets = [];
3061
3062 this.buildScale(data);
3063
3064 //Set up tooltip events on the chart
3065 if (this.options.showTooltips){
3066 helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
3067 var activePointsCollection = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
3068
3069 this.eachPoints(function(point){
3070 point.restore(['fillColor', 'strokeColor']);
3071 });
3072 helpers.each(activePointsCollection, function(activePoint){
3073 activePoint.fillColor = activePoint.highlightFill;
3074 activePoint.strokeColor = activePoint.highlightStroke;
3075 });
3076
3077 this.showTooltip(activePointsCollection);
3078 });
3079 }
3080
3081 //Iterate through each of the datasets, and build this into a property of the chart
3082 helpers.each(data.datasets,function(dataset){
3083
3084 var datasetObject = {
3085 label: dataset.label || null,
3086 fillColor : dataset.fillColor,
3087 strokeColor : dataset.strokeColor,
3088 pointColor : dataset.pointColor,
3089 pointStrokeColor : dataset.pointStrokeColor,
3090 points : []
3091 };
3092
3093 this.datasets.push(datasetObject);
3094
3095 helpers.each(dataset.data,function(dataPoint,index){
3096 //Best way to do this? or in draw sequence...?
3097 if (helpers.isNumber(dataPoint)){
3098 //Add a new point for each piece of data, passing any required data to draw.
3099 var pointPosition;
3100 if (!this.scale.animation){
3101 pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
3102 }
3103 datasetObject.points.push(new this.PointClass({
3104 value : dataPoint,
3105 label : data.labels[index],
3106 datasetLabel: dataset.label,
3107 x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
3108 y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
3109 strokeColor : dataset.pointStrokeColor,
3110 fillColor : dataset.pointColor,
3111 highlightFill : dataset.pointHighlightFill || dataset.pointColor,
3112 highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
3113 }));
3114 }
3115 },this);
3116
3117 },this);
3118
3119 this.render();
3120 },
3121 eachPoints : function(callback){
3122 helpers.each(this.datasets,function(dataset){
3123 helpers.each(dataset.points,callback,this);
3124 },this);
3125 },
3126
3127 getPointsAtEvent : function(evt){
3128 var mousePosition = helpers.getRelativePosition(evt),
3129 fromCenter = helpers.getAngleFromPoint({
3130 x: this.scale.xCenter,
3131 y: this.scale.yCenter
3132 }, mousePosition);
3133
3134 var anglePerIndex = (Math.PI * 2) /this.scale.valuesCount,
3135 pointIndex = Math.round((fromCenter.angle - Math.PI * 1.5) / anglePerIndex),
3136 activePointsCollection = [];
3137
3138 // If we're at the top, make the pointIndex 0 to get the first of the array.
3139 if (pointIndex >= this.scale.valuesCount || pointIndex < 0){
3140 pointIndex = 0;
3141 }
3142
3143 if (fromCenter.distance <= this.scale.drawingArea){
3144 helpers.each(this.datasets, function(dataset){
3145 activePointsCollection.push(dataset.points[pointIndex]);
3146 });
3147 }
3148
3149 return activePointsCollection;
3150 },
3151
3152 buildScale : function(data){
3153 this.scale = new Chart.RadialScale({
3154 display: this.options.showScale,
3155 fontStyle: this.options.scaleFontStyle,
3156 fontSize: this.options.scaleFontSize,
3157 fontFamily: this.options.scaleFontFamily,
3158 fontColor: this.options.scaleFontColor,
3159 showLabels: this.options.scaleShowLabels,
3160 showLabelBackdrop: this.options.scaleShowLabelBackdrop,
3161 backdropColor: this.options.scaleBackdropColor,
3162 backdropPaddingY : this.options.scaleBackdropPaddingY,
3163 backdropPaddingX: this.options.scaleBackdropPaddingX,
3164 lineWidth: (this.options.scaleShowLine) ? this.options.scaleLineWidth : 0,
3165 lineColor: this.options.scaleLineColor,
3166 angleLineColor : this.options.angleLineColor,
3167 angleLineWidth : (this.options.angleShowLineOut) ? this.options.angleLineWidth : 0,
3168 // Point labels at the edge of each line
3169 pointLabelFontColor : this.options.pointLabelFontColor,
3170 pointLabelFontSize : this.options.pointLabelFontSize,
3171 pointLabelFontFamily : this.options.pointLabelFontFamily,
3172 pointLabelFontStyle : this.options.pointLabelFontStyle,
3173 height : this.chart.height,
3174 width: this.chart.width,
3175 xCenter: this.chart.width/2,
3176 yCenter: this.chart.height/2,
3177 ctx : this.chart.ctx,
3178 templateString: this.options.scaleLabel,
3179 labels: data.labels,
3180 valuesCount: data.datasets[0].data.length
3181 });
3182
3183 this.scale.setScaleSize();
3184 this.updateScaleRange(data.datasets);
3185 this.scale.buildYLabels();
3186 },
3187 updateScaleRange: function(datasets){
3188 var valuesArray = (function(){
3189 var totalDataArray = [];
3190 helpers.each(datasets,function(dataset){
3191 if (dataset.data){
3192 totalDataArray = totalDataArray.concat(dataset.data);
3193 }
3194 else {
3195 helpers.each(dataset.points, function(point){
3196 totalDataArray.push(point.value);
3197 });
3198 }
3199 });
3200 return totalDataArray;
3201 })();
3202
3203
3204 var scaleSizes = (this.options.scaleOverride) ?
3205 {
3206 steps: this.options.scaleSteps,
3207 stepValue: this.options.scaleStepWidth,
3208 min: this.options.scaleStartValue,
3209 max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
3210 } :
3211 helpers.calculateScaleRange(
3212 valuesArray,
3213 helpers.min([this.chart.width, this.chart.height])/2,
3214 this.options.scaleFontSize,
3215 this.options.scaleBeginAtZero,
3216 this.options.scaleIntegersOnly
3217 );
3218
3219 helpers.extend(
3220 this.scale,
3221 scaleSizes
3222 );
3223
3224 },
3225 addData : function(valuesArray,label){
3226 //Map the values array for each of the datasets
3227 this.scale.valuesCount++;
3228 helpers.each(valuesArray,function(value,datasetIndex){
3229 if (helpers.isNumber(value)){
3230 var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
3231 this.datasets[datasetIndex].points.push(new this.PointClass({
3232 value : value,
3233 label : label,
3234 x: pointPosition.x,
3235 y: pointPosition.y,
3236 strokeColor : this.datasets[datasetIndex].pointStrokeColor,
3237 fillColor : this.datasets[datasetIndex].pointColor
3238 }));
3239 }
3240 },this);
3241
3242 this.scale.labels.push(label);
3243
3244 this.reflow();
3245
3246 this.update();
3247 },
3248 removeData : function(){
3249 this.scale.valuesCount--;
3250 this.scale.labels.shift();
3251 helpers.each(this.datasets,function(dataset){
3252 dataset.points.shift();
3253 },this);
3254 this.reflow();
3255 this.update();
3256 },
3257 update : function(){
3258 this.eachPoints(function(point){
3259 point.save();
3260 });
3261 this.reflow();
3262 this.render();
3263 },
3264 reflow: function(){
3265 helpers.extend(this.scale, {
3266 width : this.chart.width,
3267 height: this.chart.height,
3268 size : helpers.min([this.chart.width, this.chart.height]),
3269 xCenter: this.chart.width/2,
3270 yCenter: this.chart.height/2
3271 });
3272 this.updateScaleRange(this.datasets);
3273 this.scale.setScaleSize();
3274 this.scale.buildYLabels();
3275 },
3276 draw : function(ease){
3277 var easeDecimal = ease || 1,
3278 ctx = this.chart.ctx;
3279 this.clear();
3280 this.scale.draw();
3281
3282 helpers.each(this.datasets,function(dataset){
3283
3284 //Transition each point first so that the line and point drawing isn't out of sync
3285 helpers.each(dataset.points,function(point,index){
3286 point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
3287 },this);
3288
3289
3290
3291 //Draw the line between all the points
3292 ctx.lineWidth = this.options.datasetStrokeWidth;
3293 ctx.strokeStyle = dataset.strokeColor;
3294 ctx.beginPath();
3295 helpers.each(dataset.points,function(point,index){
3296 if (index === 0){
3297 ctx.moveTo(point.x,point.y);
3298 }
3299 else{
3300 ctx.lineTo(point.x,point.y);
3301 }
3302 },this);
3303 ctx.closePath();
3304 ctx.stroke();
3305
3306 ctx.fillStyle = dataset.fillColor;
3307 ctx.fill();
3308
3309 //Now draw the points over the line
3310 //A little inefficient double looping, but better than the line
3311 //lagging behind the point positions
3312 helpers.each(dataset.points,function(point){
3313 point.draw();
3314 });
3315
3316 },this);
3317
3318 }
3319
3320 });
3321
3322
3323
3324
3325
3326}).call(this);</script><meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
3327<style>
3328body {
3329 margin: 0 auto;
3330 padding: 22px 0;
3331 font-family: 'Source Sans Pro', sans-serif;
3332 font-weight: 200;
3333 width: 940px;
3334 background: #F0F0F0;
3335}
3336h2 {
3337 font-weight: 200;
3338 font-size: 1.5em;
3339 border-bottom: solid 1px black;
3340 padding-top: 35px;
3341}
3342p {
3343 line-height:140%;
3344}
3345table.simple {background-color: #FFFFFF;border-collapse:collapse;text-align :right; border: 2px solid #000000; float:none;}
3346table.simple td {border: 1px solid #000000;width:auto;padding:5px;font-size: 12pt;}
3347table.simple th {border: 2px solid #000000;width:auto;padding:5px;font-size: 12pt;}
3348footer {
3349 position: absolute;
3350 left: 0;
3351 width: 100%;
3352 background: #222;
3353}
3354footer div {
3355 display: table;
3356 margin: 0 auto;
3357 padding: 44px 0;
3358 width: 940px;
3359 color: #777;
3360}
3361footer div section {
3362 display: table-cell;
3363 width: 300px;
3364}
3365footer div #about, footer div #blogroll {
3366 padding-right: 20px;
3367}
3368footer h3 {
3369 color: #FFF;
3370}
3371footer a {
3372 color: #999;
3373}
3374footer a:hover {
3375 color: #FFF;
3376 text-decoration: none;
3377}
3378footer ul {
3379margin: 0 0 0 40px;
3380 list-style: square;
3381color: #565656;
3382}
3383footer ul li a {
3384display: block;
3385}
3386canvas {
3387 padding-left: 0;
3388 padding-right: 0;
3389 margin-left: 0;
3390 margin-right: auto;
3391 display: block;
3392 float: left;
3393}
3394nav {
3395left: 0;
3396width: 100%;
3397background: #75787B;
3398color: #FFF;
3399}
3400.chart-legend ul {
3401 list-style: none;
3402 width: 100%;
3403 margin: 30px auto 0;
3404 float: left;
3405}
3406.chart-legend li {
3407 text-indent: 16px;
3408 line-height: 24px;
3409 position: relative;
3410 font-weight: 200;
3411 display: block;
3412 float: left;
3413 width: 100%;
3414 font-size: 1em;
3415}
3416.chart-legend li:before {
3417 display: block;
3418 width: 10px;
3419 height: 16px;
3420 position: absolute;
3421 left: 0;
3422 top: 3px;
3423 content: "";}
3424</style>
3425</head>
3426<body>
3427<h1>sample.bqsr.baserecal.markdup.sortsam.bwa.bam</h1><p>758066680 reads, size:80517958961 bytes, created 2017-01-09 11:11:52 </p>
3428<section>
3429<h2>Mapping stats:</h2>
3430<div style="float: left;width=250px">
3431<canvas id="canvas1" height="250" width="250px"></canvas>
3432</div><div class="chart-legend" style="float: left;width: 235px">
3433<ul><style>#id65537:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3434<li id="id65537">MAPQ >= 30</li><style>#id131073:before { background-color: rgba(237,139,65,1.0);}</style>
3435<li id="id131073">MAPQ < 30</li><style>#id196609:before { background-color: rgba(254,209,65,1.0);}</style>
3436<li id="id196609">MAPQ < 20</li><style>#id262145:before { background-color: rgba(120,190,32,1.0);}</style>
3437<li id="id262145">MAPQ < 10</li><style>#id327681:before { background-color: rgba(66,109,169,1.0);}</style>
3438<li id="id327681">MAPQ < 3</li><style>#id393217:before { background-color: rgba(177,179,179 ,1.0);}</style>
3439<li id="id393217">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3440var ChartData1 = {
3441labels : ["Number"],
3442datasets : [
3443{
3444fillColor : "rgba(224 , 69 , 123,1.0)",
3445strokeColor : "rgba(224 , 69 , 123,1.0)",
3446pointColor : "rgba(224 , 69 , 123,1.0)",
3447data : [703933760.000000]
3448},
3449{
3450fillColor : "rgba(237,139,65,1.0)",
3451strokeColor : "rgba(237,139,65,1.0)",
3452pointColor : "rgba(237,139,65,1.0)",
3453data : [10699522.000000]
3454},
3455{
3456fillColor : "rgba(254,209,65,1.0)",
3457strokeColor : "rgba(254,209,65,1.0)",
3458pointColor : "rgba(254,209,65,1.0)",
3459data : [4408308.000000]
3460},
3461{
3462fillColor : "rgba(120,190,32,1.0)",
3463strokeColor : "rgba(120,190,32,1.0)",
3464pointColor : "rgba(120,190,32,1.0)",
3465data : [4604960.000000]
3466},
3467{
3468fillColor : "rgba(66,109,169,1.0)",
3469strokeColor : "rgba(66,109,169,1.0)",
3470pointColor : "rgba(66,109,169,1.0)",
3471data : [999652.000000]
3472},
3473{
3474fillColor : "rgba(177,179,179 ,1.0)",
3475strokeColor : "rgba(177,179,179 ,1.0)",
3476pointColor : "rgba(177,179,179 ,1.0)",
3477data : [33420456.000000]
3478}
3479]
3480}
3481var pieData1 = [
3482{ value: 703933760.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 10699522.000000, color:"rgba(237,139,65,1.0)"},{ value: 4408308.000000, color:"rgba(254,209,65,1.0)"},{ value: 4604960.000000, color:"rgba(120,190,32,1.0)"},{ value: 999652.000000, color:"rgba(66,109,169,1.0)"},{ value: 33420456.000000, color:"rgba(177,179,179 ,1.0)"}];
3483var Chartopt = {datasetFill : false}
3484var myLine = new Chart(document.getElementById("canvas1").getContext("2d")).Pie(pieData1);
3485</script>
3486<p>Number of alignments in various mapping quality (MAPQ) intervals and number of unmapped sequences.</p>
3487<table class="simple" >
3488<tr>
3489<td style="width:100px "></td>
3490<td style="width:90px">Number</td>
3491<td style="width:90px">Percentage</td>
3492</tr>
3493<tr>
3494<td style="background-color: rgba(224 , 69 , 123,1.0);" >MAPQ >= 30</td>
3495<td>703933760.0</td>
3496<td>92.9</td>
3497</tr>
3498<tr>
3499<td style="background-color: rgba(237,139,65,1.0);" >MAPQ < 30</td>
3500<td>10699522.0</td>
3501<td>1.4</td>
3502</tr>
3503<tr>
3504<td style="background-color: rgba(254,209,65,1.0);" >MAPQ < 20</td>
3505<td>4408308.0</td>
3506<td>0.6</td>
3507</tr>
3508<tr>
3509<td style="background-color: rgba(120,190,32,1.0);" >MAPQ < 10</td>
3510<td>4604960.0</td>
3511<td>0.6</td>
3512</tr>
3513<tr>
3514<td style="background-color: rgba(66,109,169,1.0);" >MAPQ < 3</td>
3515<td>999652.0</td>
3516<td>0.1</td>
3517</tr>
3518<tr>
3519<td style="background-color: rgba(177,179,179 ,1.0);" >Unmapped</td>
3520<td>33420456.0</td>
3521<td>4.4</td>
3522</tr>
3523<tr>
3524<td style="background-color: rgba(177,179,179 ,1.0);" >Total</td>
3525<td>758066688.0</td>
3526<td>100.0</td>
3527</tr>
3528</table>
3529<div style="clear:both;"></div><p>Number of alignments in various mapping quality (MAPQ) intervals and number of unmapped sequences.</p>
3530<section>
3531<h2>Read Length Distributions</h2>
3532<div style="float: left;width=705px">
3533<canvas id="canvas2" height="250" width="705px"></canvas>
3534</div><div class="chart-legend" style="float: left;width: 235px">
3535<ul><style>#id65538:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3536<li id="id65538">MAPQ >= 30</li><style>#id131074:before { background-color: rgba(237,139,65,1.0);}</style>
3537<li id="id131074">MAPQ < 30</li><style>#id196610:before { background-color: rgba(254,209,65,1.0);}</style>
3538<li id="id196610">MAPQ < 20</li><style>#id262146:before { background-color: rgba(120,190,32,1.0);}</style>
3539<li id="id262146">MAPQ < 10</li><style>#id327682:before { background-color: rgba(66,109,169,1.0);}</style>
3540<li id="id327682">MAPQ < 3</li><style>#id393218:before { background-color: rgba(177,179,179 ,1.0);}</style>
3541<li id="id393218">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3542var ChartData2 = {
3543labels : ["34nt","35nt","36nt","37nt","38nt","39nt","40nt","41nt","42nt","43nt","44nt","45nt","46nt","47nt","48nt","49nt","50nt","51nt","52nt","53nt"],
3544datasets : [
3545{
3546fillColor : "rgba(224 , 69 , 123,1.0)",
3547strokeColor : "rgba(224 , 69 , 123,1.0)",
3548pointColor : "rgba(224 , 69 , 123,1.0)",
3549data : [0.000000,38732.000000,3785.000000,3707.000000,4098.000000,4173.000000,4272.000000,4337.000000,4553.000000,4484.000000,4919.000000,4822.000000,5117.000000,5117.000000,5449.000000,5658.000000,5564.000000,5586.000000,5956.000000,5972.000000]
3550},
3551{
3552fillColor : "rgba(237,139,65,1.0)",
3553strokeColor : "rgba(237,139,65,1.0)",
3554pointColor : "rgba(237,139,65,1.0)",
3555data : [0.000000,9611.000000,1211.000000,1313.000000,1384.000000,1277.000000,1437.000000,1384.000000,1467.000000,1484.000000,1643.000000,1671.000000,1714.000000,1862.000000,1793.000000,1818.000000,1625.000000,1743.000000,1758.000000,1825.000000]
3556},
3557{
3558fillColor : "rgba(254,209,65,1.0)",
3559strokeColor : "rgba(254,209,65,1.0)",
3560pointColor : "rgba(254,209,65,1.0)",
3561data : [0.000000,11649.000000,1247.000000,1361.000000,1364.000000,1464.000000,1542.000000,1574.000000,1622.000000,1724.000000,1778.000000,1754.000000,1830.000000,1911.000000,1958.000000,1960.000000,2087.000000,2176.000000,2108.000000,2175.000000]
3562},
3563{
3564fillColor : "rgba(120,190,32,1.0)",
3565strokeColor : "rgba(120,190,32,1.0)",
3566pointColor : "rgba(120,190,32,1.0)",
3567data : [0.000000,9723.000000,1008.000000,1065.000000,1043.000000,1102.000000,1179.000000,1109.000000,1247.000000,1207.000000,1253.000000,1331.000000,1265.000000,1339.000000,1442.000000,1377.000000,1427.000000,1541.000000,1553.000000,1499.000000]
3568},
3569{
3570fillColor : "rgba(66,109,169,1.0)",
3571strokeColor : "rgba(66,109,169,1.0)",
3572pointColor : "rgba(66,109,169,1.0)",
3573data : [0.000000,3034.000000,331.000000,325.000000,343.000000,319.000000,300.000000,330.000000,356.000000,362.000000,423.000000,384.000000,393.000000,397.000000,366.000000,440.000000,471.000000,474.000000,488.000000,469.000000]
3574},
3575{
3576fillColor : "rgba(177,179,179 ,1.0)",
3577strokeColor : "rgba(177,179,179 ,1.0)",
3578pointColor : "rgba(177,179,179 ,1.0)",
3579data : [0.000000,2741157.000000,10614.000000,10724.000000,11049.000000,11217.000000,11557.000000,11381.000000,11754.000000,11833.000000,12056.000000,12203.000000,12271.000000,12141.000000,12242.000000,12417.000000,12702.000000,12649.000000,12971.000000,12908.000000]
3580}
3581]
3582}
3583var pieData2 = [
3584{ value: 0.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 0.000000, color:"rgba(237,139,65,1.0)"},{ value: 0.000000, color:"rgba(254,209,65,1.0)"},{ value: 0.000000, color:"rgba(120,190,32,1.0)"},{ value: 0.000000, color:"rgba(66,109,169,1.0)"},{ value: 0.000000, color:"rgba(177,179,179 ,1.0)"}];
3585var Chartopt = {datasetFill : false}
3586var myLine = new Chart(document.getElementById("canvas2").getContext("2d")).Line(ChartData2,Chartopt);
3587</script>
3588<div style="float: left;width=705px">
3589<canvas id="canvas3" height="250" width="705px"></canvas>
3590</div><div class="chart-legend" style="float: left;width: 235px">
3591<ul><style>#id65539:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3592<li id="id65539">MAPQ >= 30</li><style>#id131075:before { background-color: rgba(237,139,65,1.0);}</style>
3593<li id="id131075">MAPQ < 30</li><style>#id196611:before { background-color: rgba(254,209,65,1.0);}</style>
3594<li id="id196611">MAPQ < 20</li><style>#id262147:before { background-color: rgba(120,190,32,1.0);}</style>
3595<li id="id262147">MAPQ < 10</li><style>#id327683:before { background-color: rgba(66,109,169,1.0);}</style>
3596<li id="id327683">MAPQ < 3</li><style>#id393219:before { background-color: rgba(177,179,179 ,1.0);}</style>
3597<li id="id393219">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3598var ChartData3 = {
3599labels : ["54nt","55nt","56nt","57nt","58nt","59nt","60nt","61nt","62nt","63nt","64nt","65nt","66nt","67nt","68nt","69nt","70nt","71nt","72nt","73nt"],
3600datasets : [
3601{
3602fillColor : "rgba(224 , 69 , 123,1.0)",
3603strokeColor : "rgba(224 , 69 , 123,1.0)",
3604pointColor : "rgba(224 , 69 , 123,1.0)",
3605data : [6148.000000,6286.000000,6574.000000,6631.000000,6786.000000,6936.000000,7012.000000,7177.000000,7301.000000,7502.000000,7735.000000,7476.000000,7740.000000,8019.000000,8031.000000,8179.000000,8256.000000,8282.000000,8853.000000,8441.000000]
3606},
3607{
3608fillColor : "rgba(237,139,65,1.0)",
3609strokeColor : "rgba(237,139,65,1.0)",
3610pointColor : "rgba(237,139,65,1.0)",
3611data : [1744.000000,1827.000000,1821.000000,1865.000000,1912.000000,1896.000000,1879.000000,1917.000000,1932.000000,1979.000000,2025.000000,2091.000000,1967.000000,2039.000000,2056.000000,2064.000000,2076.000000,2048.000000,2100.000000,2050.000000]
3612},
3613{
3614fillColor : "rgba(254,209,65,1.0)",
3615strokeColor : "rgba(254,209,65,1.0)",
3616pointColor : "rgba(254,209,65,1.0)",
3617data : [2199.000000,2201.000000,2267.000000,2250.000000,2315.000000,2294.000000,2308.000000,2261.000000,2372.000000,2449.000000,2373.000000,2390.000000,2436.000000,2246.000000,2366.000000,2411.000000,2449.000000,2381.000000,2582.000000,2556.000000]
3618},
3619{
3620fillColor : "rgba(120,190,32,1.0)",
3621strokeColor : "rgba(120,190,32,1.0)",
3622pointColor : "rgba(120,190,32,1.0)",
3623data : [1647.000000,1588.000000,1591.000000,1627.000000,1712.000000,1809.000000,1761.000000,1755.000000,1769.000000,1733.000000,1745.000000,1764.000000,1884.000000,1863.000000,1889.000000,1907.000000,1853.000000,1817.000000,1899.000000,1848.000000]
3624},
3625{
3626fillColor : "rgba(66,109,169,1.0)",
3627strokeColor : "rgba(66,109,169,1.0)",
3628pointColor : "rgba(66,109,169,1.0)",
3629data : [460.000000,495.000000,484.000000,507.000000,506.000000,500.000000,486.000000,517.000000,537.000000,506.000000,514.000000,511.000000,502.000000,519.000000,503.000000,482.000000,584.000000,440.000000,530.000000,469.000000]
3630},
3631{
3632fillColor : "rgba(177,179,179 ,1.0)",
3633strokeColor : "rgba(177,179,179 ,1.0)",
3634pointColor : "rgba(177,179,179 ,1.0)",
3635data : [12769.000000,12770.000000,12952.000000,12820.000000,13395.000000,13027.000000,13233.000000,13046.000000,13068.000000,12930.000000,12966.000000,12612.000000,12616.000000,12543.000000,12740.000000,12678.000000,12721.000000,12757.000000,12607.000000,12244.000000]
3636}
3637]
3638}
3639var pieData3 = [
3640{ value: 0.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 0.000000, color:"rgba(237,139,65,1.0)"},{ value: 0.000000, color:"rgba(254,209,65,1.0)"},{ value: 0.000000, color:"rgba(120,190,32,1.0)"},{ value: 0.000000, color:"rgba(66,109,169,1.0)"},{ value: 0.000000, color:"rgba(177,179,179 ,1.0)"}];
3641var Chartopt = {datasetFill : false}
3642var myLine = new Chart(document.getElementById("canvas3").getContext("2d")).Line(ChartData3,Chartopt);
3643</script>
3644<div style="float: left;width=705px">
3645<canvas id="canvas4" height="250" width="705px"></canvas>
3646</div><div class="chart-legend" style="float: left;width: 235px">
3647<ul><style>#id65540:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3648<li id="id65540">MAPQ >= 30</li><style>#id131076:before { background-color: rgba(237,139,65,1.0);}</style>
3649<li id="id131076">MAPQ < 30</li><style>#id196612:before { background-color: rgba(254,209,65,1.0);}</style>
3650<li id="id196612">MAPQ < 20</li><style>#id262148:before { background-color: rgba(120,190,32,1.0);}</style>
3651<li id="id262148">MAPQ < 10</li><style>#id327684:before { background-color: rgba(66,109,169,1.0);}</style>
3652<li id="id327684">MAPQ < 3</li><style>#id393220:before { background-color: rgba(177,179,179 ,1.0);}</style>
3653<li id="id393220">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3654var ChartData4 = {
3655labels : ["74nt","75nt","76nt","77nt","78nt","79nt","80nt","81nt","82nt","83nt","84nt","85nt","86nt","87nt","88nt","89nt","90nt","91nt","92nt","93nt"],
3656datasets : [
3657{
3658fillColor : "rgba(224 , 69 , 123,1.0)",
3659strokeColor : "rgba(224 , 69 , 123,1.0)",
3660pointColor : "rgba(224 , 69 , 123,1.0)",
3661data : [8630.000000,8827.000000,9055.000000,9369.000000,9520.000000,9471.000000,9898.000000,9678.000000,9862.000000,10284.000000,10128.000000,10696.000000,10721.000000,10782.000000,11158.000000,10862.000000,11836.000000,11659.000000,12005.000000,12566.000000]
3662},
3663{
3664fillColor : "rgba(237,139,65,1.0)",
3665strokeColor : "rgba(237,139,65,1.0)",
3666pointColor : "rgba(237,139,65,1.0)",
3667data : [2113.000000,2134.000000,2004.000000,2048.000000,1955.000000,2049.000000,2107.000000,2025.000000,1963.000000,2002.000000,2115.000000,2044.000000,1922.000000,1881.000000,1994.000000,2036.000000,1889.000000,1924.000000,1870.000000,1869.000000]
3668},
3669{
3670fillColor : "rgba(254,209,65,1.0)",
3671strokeColor : "rgba(254,209,65,1.0)",
3672pointColor : "rgba(254,209,65,1.0)",
3673data : [2383.000000,2461.000000,2447.000000,2548.000000,2523.000000,2323.000000,2587.000000,2545.000000,2473.000000,2548.000000,2602.000000,2472.000000,2360.000000,2409.000000,2400.000000,2407.000000,2372.000000,2505.000000,2329.000000,2347.000000]
3674},
3675{
3676fillColor : "rgba(120,190,32,1.0)",
3677strokeColor : "rgba(120,190,32,1.0)",
3678pointColor : "rgba(120,190,32,1.0)",
3679data : [1842.000000,1914.000000,1870.000000,1984.000000,1874.000000,1908.000000,1865.000000,1786.000000,1835.000000,1742.000000,1855.000000,1814.000000,1931.000000,1743.000000,1826.000000,1830.000000,1738.000000,1697.000000,1831.000000,1731.000000]
3680},
3681{
3682fillColor : "rgba(66,109,169,1.0)",
3683strokeColor : "rgba(66,109,169,1.0)",
3684pointColor : "rgba(66,109,169,1.0)",
3685data : [467.000000,474.000000,528.000000,470.000000,452.000000,393.000000,446.000000,440.000000,448.000000,467.000000,466.000000,426.000000,392.000000,455.000000,425.000000,418.000000,456.000000,447.000000,413.000000,417.000000]
3686},
3687{
3688fillColor : "rgba(177,179,179 ,1.0)",
3689strokeColor : "rgba(177,179,179 ,1.0)",
3690pointColor : "rgba(177,179,179 ,1.0)",
3691data : [12547.000000,12236.000000,12239.000000,12172.000000,12045.000000,12308.000000,12046.000000,11851.000000,11974.000000,11781.000000,11709.000000,11750.000000,11477.000000,11560.000000,11247.000000,11389.000000,11341.000000,10884.000000,10909.000000,10690.000000]
3692}
3693]
3694}
3695var pieData4 = [
3696{ value: 0.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 0.000000, color:"rgba(237,139,65,1.0)"},{ value: 0.000000, color:"rgba(254,209,65,1.0)"},{ value: 0.000000, color:"rgba(120,190,32,1.0)"},{ value: 0.000000, color:"rgba(66,109,169,1.0)"},{ value: 0.000000, color:"rgba(177,179,179 ,1.0)"}];
3697var Chartopt = {datasetFill : false}
3698var myLine = new Chart(document.getElementById("canvas4").getContext("2d")).Line(ChartData4,Chartopt);
3699</script>
3700<div style="float: left;width=705px">
3701<canvas id="canvas5" height="250" width="705px"></canvas>
3702</div><div class="chart-legend" style="float: left;width: 235px">
3703<ul><style>#id65541:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3704<li id="id65541">MAPQ >= 30</li><style>#id131077:before { background-color: rgba(237,139,65,1.0);}</style>
3705<li id="id131077">MAPQ < 30</li><style>#id196613:before { background-color: rgba(254,209,65,1.0);}</style>
3706<li id="id196613">MAPQ < 20</li><style>#id262149:before { background-color: rgba(120,190,32,1.0);}</style>
3707<li id="id262149">MAPQ < 10</li><style>#id327685:before { background-color: rgba(66,109,169,1.0);}</style>
3708<li id="id327685">MAPQ < 3</li><style>#id393221:before { background-color: rgba(177,179,179 ,1.0);}</style>
3709<li id="id393221">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3710var ChartData5 = {
3711labels : ["94nt","95nt","96nt","97nt","98nt","99nt","100nt","101nt","102nt","103nt","104nt","105nt","106nt","107nt","108nt","109nt","110nt","111nt","112nt","113nt"],
3712datasets : [
3713{
3714fillColor : "rgba(224 , 69 , 123,1.0)",
3715strokeColor : "rgba(224 , 69 , 123,1.0)",
3716pointColor : "rgba(224 , 69 , 123,1.0)",
3717data : [12702.000000,13204.000000,13493.000000,13703.000000,14396.000000,14680.000000,14852.000000,15729.000000,16288.000000,16838.000000,17341.000000,18356.000000,18694.000000,20057.000000,20379.000000,21534.000000,22379.000000,23624.000000,24637.000000,25673.000000]
3718},
3719{
3720fillColor : "rgba(237,139,65,1.0)",
3721strokeColor : "rgba(237,139,65,1.0)",
3722pointColor : "rgba(237,139,65,1.0)",
3723data : [1863.000000,1846.000000,1823.000000,1780.000000,1805.000000,1757.000000,1725.000000,1713.000000,1734.000000,1790.000000,1765.000000,1581.000000,1569.000000,1654.000000,1483.000000,1598.000000,1475.000000,1561.000000,1516.000000,1434.000000]
3724},
3725{
3726fillColor : "rgba(254,209,65,1.0)",
3727strokeColor : "rgba(254,209,65,1.0)",
3728pointColor : "rgba(254,209,65,1.0)",
3729data : [2265.000000,2342.000000,2211.000000,2209.000000,2142.000000,2111.000000,2187.000000,2004.000000,2167.000000,2047.000000,2016.000000,1925.000000,1887.000000,1823.000000,1769.000000,1836.000000,1786.000000,1788.000000,1813.000000,1630.000000]
3730},
3731{
3732fillColor : "rgba(120,190,32,1.0)",
3733strokeColor : "rgba(120,190,32,1.0)",
3734pointColor : "rgba(120,190,32,1.0)",
3735data : [1724.000000,1857.000000,1779.000000,1705.000000,1703.000000,1655.000000,1739.000000,1741.000000,1841.000000,1725.000000,1710.000000,1693.000000,1682.000000,1620.000000,1719.000000,1673.000000,1617.000000,1774.000000,1707.000000,1689.000000]
3736},
3737{
3738fillColor : "rgba(66,109,169,1.0)",
3739strokeColor : "rgba(66,109,169,1.0)",
3740pointColor : "rgba(66,109,169,1.0)",
3741data : [403.000000,417.000000,337.000000,382.000000,364.000000,350.000000,380.000000,359.000000,373.000000,370.000000,373.000000,364.000000,363.000000,372.000000,373.000000,349.000000,409.000000,369.000000,351.000000,372.000000]
3742},
3743{
3744fillColor : "rgba(177,179,179 ,1.0)",
3745strokeColor : "rgba(177,179,179 ,1.0)",
3746pointColor : "rgba(177,179,179 ,1.0)",
3747data : [10806.000000,10538.000000,10509.000000,10299.000000,10276.000000,10445.000000,10419.000000,10447.000000,10034.000000,9841.000000,9911.000000,9792.000000,9906.000000,9651.000000,9746.000000,9930.000000,9420.000000,9791.000000,9670.000000,9633.000000]
3748}
3749]
3750}
3751var pieData5 = [
3752{ value: 0.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 0.000000, color:"rgba(237,139,65,1.0)"},{ value: 0.000000, color:"rgba(254,209,65,1.0)"},{ value: 0.000000, color:"rgba(120,190,32,1.0)"},{ value: 0.000000, color:"rgba(66,109,169,1.0)"},{ value: 0.000000, color:"rgba(177,179,179 ,1.0)"}];
3753var Chartopt = {datasetFill : false}
3754var myLine = new Chart(document.getElementById("canvas5").getContext("2d")).Line(ChartData5,Chartopt);
3755</script>
3756<div style="float: left;width=705px">
3757<canvas id="canvas6" height="250" width="705px"></canvas>
3758</div><div class="chart-legend" style="float: left;width: 235px">
3759<ul><style>#id65542:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3760<li id="id65542">MAPQ >= 30</li><style>#id131078:before { background-color: rgba(237,139,65,1.0);}</style>
3761<li id="id131078">MAPQ < 30</li><style>#id196614:before { background-color: rgba(254,209,65,1.0);}</style>
3762<li id="id196614">MAPQ < 20</li><style>#id262150:before { background-color: rgba(120,190,32,1.0);}</style>
3763<li id="id262150">MAPQ < 10</li><style>#id327686:before { background-color: rgba(66,109,169,1.0);}</style>
3764<li id="id327686">MAPQ < 3</li><style>#id393222:before { background-color: rgba(177,179,179 ,1.0);}</style>
3765<li id="id393222">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3766var ChartData6 = {
3767labels : ["114nt","115nt","116nt","117nt","118nt","119nt","120nt","121nt","122nt","123nt","124nt","125nt","126nt","127nt","128nt","129nt","130nt","131nt","132nt","133nt"],
3768datasets : [
3769{
3770fillColor : "rgba(224 , 69 , 123,1.0)",
3771strokeColor : "rgba(224 , 69 , 123,1.0)",
3772pointColor : "rgba(224 , 69 , 123,1.0)",
3773data : [27060.000000,28150.000000,29943.000000,30439.000000,32196.000000,34643.000000,36286.000000,36326.000000,38090.000000,40147.000000,42056.000000,43151.000000,46091.000000,48943.000000,50907.000000,52037.000000,55249.000000,55624.000000,58493.000000,61572.000000]
3774},
3775{
3776fillColor : "rgba(237,139,65,1.0)",
3777strokeColor : "rgba(237,139,65,1.0)",
3778pointColor : "rgba(237,139,65,1.0)",
3779data : [1450.000000,1418.000000,1375.000000,1375.000000,1521.000000,1441.000000,1426.000000,1245.000000,1290.000000,1261.000000,1272.000000,1241.000000,1380.000000,1384.000000,1261.000000,1342.000000,1380.000000,1123.000000,1181.000000,1206.000000]
3780},
3781{
3782fillColor : "rgba(254,209,65,1.0)",
3783strokeColor : "rgba(254,209,65,1.0)",
3784pointColor : "rgba(254,209,65,1.0)",
3785data : [1582.000000,1602.000000,1690.000000,1566.000000,1670.000000,1646.000000,1610.000000,1484.000000,1468.000000,1382.000000,1383.000000,1385.000000,1439.000000,1473.000000,1449.000000,1457.000000,1461.000000,1180.000000,1242.000000,1240.000000]
3786},
3787{
3788fillColor : "rgba(120,190,32,1.0)",
3789strokeColor : "rgba(120,190,32,1.0)",
3790pointColor : "rgba(120,190,32,1.0)",
3791data : [1618.000000,1709.000000,1651.000000,1630.000000,1664.000000,1722.000000,1677.000000,1404.000000,1472.000000,1473.000000,1554.000000,1587.000000,1589.000000,1618.000000,1607.000000,1554.000000,1619.000000,1402.000000,1440.000000,1419.000000]
3792},
3793{
3794fillColor : "rgba(66,109,169,1.0)",
3795strokeColor : "rgba(66,109,169,1.0)",
3796pointColor : "rgba(66,109,169,1.0)",
3797data : [362.000000,326.000000,333.000000,328.000000,346.000000,361.000000,368.000000,331.000000,285.000000,285.000000,304.000000,267.000000,308.000000,309.000000,330.000000,359.000000,343.000000,261.000000,250.000000,302.000000]
3798},
3799{
3800fillColor : "rgba(177,179,179 ,1.0)",
3801strokeColor : "rgba(177,179,179 ,1.0)",
3802pointColor : "rgba(177,179,179 ,1.0)",
3803data : [9684.000000,9675.000000,9416.000000,9599.000000,9310.000000,9728.000000,9882.000000,9304.000000,9337.000000,9362.000000,9639.000000,9438.000000,10108.000000,10150.000000,9997.000000,9981.000000,10298.000000,9168.000000,9423.000000,9917.000000]
3804}
3805]
3806}
3807var pieData6 = [
3808{ value: 0.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 0.000000, color:"rgba(237,139,65,1.0)"},{ value: 0.000000, color:"rgba(254,209,65,1.0)"},{ value: 0.000000, color:"rgba(120,190,32,1.0)"},{ value: 0.000000, color:"rgba(66,109,169,1.0)"},{ value: 0.000000, color:"rgba(177,179,179 ,1.0)"}];
3809var Chartopt = {datasetFill : false}
3810var myLine = new Chart(document.getElementById("canvas6").getContext("2d")).Line(ChartData6,Chartopt);
3811</script>
3812<div style="float: left;width=599px">
3813<canvas id="canvas7" height="250" width="599px"></canvas>
3814</div><div class="chart-legend" style="float: left;width: 235px">
3815<ul><style>#id65543:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3816<li id="id65543">MAPQ >= 30</li><style>#id131079:before { background-color: rgba(237,139,65,1.0);}</style>
3817<li id="id131079">MAPQ < 30</li><style>#id196615:before { background-color: rgba(254,209,65,1.0);}</style>
3818<li id="id196615">MAPQ < 20</li><style>#id262151:before { background-color: rgba(120,190,32,1.0);}</style>
3819<li id="id262151">MAPQ < 10</li><style>#id327687:before { background-color: rgba(66,109,169,1.0);}</style>
3820<li id="id327687">MAPQ < 3</li><style>#id393223:before { background-color: rgba(177,179,179 ,1.0);}</style>
3821<li id="id393223">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3822var ChartData7 = {
3823labels : ["134nt","135nt","136nt","137nt","138nt","139nt","140nt","141nt","142nt","143nt","144nt","145nt","146nt","147nt","148nt","149nt","150nt"],
3824datasets : [
3825{
3826fillColor : "rgba(224 , 69 , 123,1.0)",
3827strokeColor : "rgba(224 , 69 , 123,1.0)",
3828pointColor : "rgba(224 , 69 , 123,1.0)",
3829data : [63267.000000,65878.000000,69376.000000,72562.000000,77231.000000,83546.000000,99454.000000,86960.000000,81428.000000,89015.000000,131797.000000,669359.000000,3457628.000000,15359644.000000,47775388.000000,191260784.000000,442801824.000000]
3830},
3831{
3832fillColor : "rgba(237,139,65,1.0)",
3833strokeColor : "rgba(237,139,65,1.0)",
3834pointColor : "rgba(237,139,65,1.0)",
3835data : [1186.000000,1218.000000,1362.000000,1260.000000,1388.000000,1387.000000,1989.000000,1504.000000,964.000000,1164.000000,1674.000000,6815.000000,47195.000000,221944.000000,626698.000000,2882780.000000,6721698.000000]
3836},
3837{
3838fillColor : "rgba(254,209,65,1.0)",
3839strokeColor : "rgba(254,209,65,1.0)",
3840pointColor : "rgba(254,209,65,1.0)",
3841data : [1142.000000,1202.000000,1285.000000,1157.000000,1279.000000,1250.000000,1497.000000,1039.000000,968.000000,975.000000,1261.000000,3038.000000,16596.000000,83565.000000,230565.000000,1148695.000000,2703996.000000]
3842},
3843{
3844fillColor : "rgba(120,190,32,1.0)",
3845strokeColor : "rgba(120,190,32,1.0)",
3846pointColor : "rgba(120,190,32,1.0)",
3847data : [1392.000000,1421.000000,1488.000000,1492.000000,1623.000000,1511.000000,1957.000000,1323.000000,1166.000000,1309.000000,1543.000000,3486.000000,17731.000000,89528.000000,244298.000000,1202566.000000,2860577.000000]
3848},
3849{
3850fillColor : "rgba(66,109,169,1.0)",
3851strokeColor : "rgba(66,109,169,1.0)",
3852pointColor : "rgba(66,109,169,1.0)",
3853data : [239.000000,300.000000,366.000000,383.000000,380.000000,394.000000,495.000000,295.000000,300.000000,351.000000,426.000000,803.000000,3443.000000,18493.000000,49635.000000,252886.000000,627718.000000]
3854},
3855{
3856fillColor : "rgba(177,179,179 ,1.0)",
3857strokeColor : "rgba(177,179,179 ,1.0)",
3858pointColor : "rgba(177,179,179 ,1.0)",
3859data : [9377.000000,10359.000000,10422.000000,10819.000000,11172.000000,11802.000000,13475.000000,10792.000000,9645.000000,10316.000000,12796.000000,27384.000000,129139.000000,640044.000000,1760159.000000,7663471.000000,19238310.000000]
3860}
3861]
3862}
3863var pieData7 = [
3864{ value: 0.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 0.000000, color:"rgba(237,139,65,1.0)"},{ value: 0.000000, color:"rgba(254,209,65,1.0)"},{ value: 0.000000, color:"rgba(120,190,32,1.0)"},{ value: 0.000000, color:"rgba(66,109,169,1.0)"},{ value: 0.000000, color:"rgba(177,179,179 ,1.0)"}];
3865var Chartopt = {datasetFill : false}
3866var myLine = new Chart(document.getElementById("canvas7").getContext("2d")).Line(ChartData7,Chartopt);
3867</script>
3868<p>Distribution of read lengths separated by mapping quality thresholds.</p>
3869<h2>Base Quality Distribution: One or more sequences have no base qualities.</h2>
3870<section>
3871<h2>Composition of MAPQ >= 20 Reads.</h2>
3872<div style="float: left;width=705px">
3873<canvas id="canvas8" height="250" width="705px"></canvas>
3874</div><div class="chart-legend" style="float: left;width: 235px">
3875<ul><style>#id65544:before { background-color: rgba(52,255,54,0.75);}</style>
3876<li id="id65544">A</li><style>#id131080:before { background-color: rgba(57,124,214,0.75);}</style>
3877<li id="id131080">C</li><style>#id196616:before { background-color: rgba(251,220,60,0.75);}</style>
3878<li id="id196616">G</li><style>#id262152:before { background-color: rgba(255,61,107,0.75);}</style>
3879<li id="id262152">T</li></ul></div><div style="clear:both;"></div><script>
3880var ChartData8 = {
3881labels : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","L","19","20"],
3882datasets : [
3883{
3884fillColor : "rgba(52,255,54,0.75)",
3885strokeColor : "rgba(52,255,54,0.75)",
3886pointColor : "rgba(52,255,54,0.75)",
3887data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
3888},
3889{
3890fillColor : "rgba(57,124,214,0.75)",
3891strokeColor : "rgba(57,124,214,0.75)",
3892pointColor : "rgba(57,124,214,0.75)",
3893data : [-2.137902,-2.092433,-2.178383,-2.163213,-2.175887,-2.114228,-2.148631,-2.114140,-2.121136,-2.129665,-2.116444,-2.123640,-2.135284,-2.126554,-2.131396,-2.122618,-2.129675,-2.230353,-2.117319,-2.120140]
3894},
3895{
3896fillColor : "rgba(251,220,60,0.75)",
3897strokeColor : "rgba(251,220,60,0.75)",
3898pointColor : "rgba(251,220,60,0.75)",
3899data : [-1.853218,-2.087716,-2.058086,-2.026734,-2.017390,-2.013885,-2.010045,-2.037383,-2.031251,-2.029197,-2.038442,-2.045850,-2.030484,-2.045254,-2.035215,-2.038189,-2.034851,-2.152556,-2.049819,-2.047135]
3900},
3901{
3902fillColor : "rgba(255,61,107,0.75)",
3903strokeColor : "rgba(255,61,107,0.75)",
3904pointColor : "rgba(255,61,107,0.75)",
3905data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
3906}
3907]
3908}
3909var pieData8 = [
3910{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.137902, color:"rgba(57,124,214,0.75)"},{ value: -1.853218, color:"rgba(251,220,60,0.75)"},{ value: nan, color:"rgba(255,61,107,0.75)"}];
3911var Chartopt = {datasetFill : false}
3912var myLine = new Chart(document.getElementById("canvas8").getContext("2d")).Line(ChartData8,Chartopt);
3913</script>
3914<div style="float: left;width=528px">
3915<canvas id="canvas9" height="250" width="528px"></canvas>
3916</div><div class="chart-legend" style="float: left;width: 235px">
3917<ul><style>#id65545:before { background-color: rgba(52,255,54,0.75);}</style>
3918<li id="id65545">A</li><style>#id131081:before { background-color: rgba(57,124,214,0.75);}</style>
3919<li id="id131081">C</li><style>#id196617:before { background-color: rgba(251,220,60,0.75);}</style>
3920<li id="id196617">G</li><style>#id262153:before { background-color: rgba(255,61,107,0.75);}</style>
3921<li id="id262153">T</li></ul></div><div style="clear:both;"></div><script>
3922var ChartData9 = {
3923labels : ["21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"],
3924datasets : [
3925{
3926fillColor : "rgba(52,255,54,0.75)",
3927strokeColor : "rgba(52,255,54,0.75)",
3928pointColor : "rgba(52,255,54,0.75)",
3929data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
3930},
3931{
3932fillColor : "rgba(57,124,214,0.75)",
3933strokeColor : "rgba(57,124,214,0.75)",
3934pointColor : "rgba(57,124,214,0.75)",
3935data : [-2.120579,-2.127515,-2.121270,-2.127279,-2.115154,-2.107519,-2.115143,-2.116877,-2.082758,-2.103715,-2.104223,-2.111889,-2.134683,-2.163942,-1.932836]
3936},
3937{
3938fillColor : "rgba(251,220,60,0.75)",
3939strokeColor : "rgba(251,220,60,0.75)",
3940pointColor : "rgba(251,220,60,0.75)",
3941data : [-2.043640,-2.048807,-2.041735,-2.052738,-2.038647,-2.055908,-2.032196,-2.040882,-2.068323,-2.032636,-2.086248,-2.083136,-2.105249,-2.018055,-2.049144]
3942},
3943{
3944fillColor : "rgba(255,61,107,0.75)",
3945strokeColor : "rgba(255,61,107,0.75)",
3946pointColor : "rgba(255,61,107,0.75)",
3947data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
3948}
3949]
3950}
3951var pieData9 = [
3952{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.137902, color:"rgba(57,124,214,0.75)"},{ value: -1.853218, color:"rgba(251,220,60,0.75)"},{ value: nan, color:"rgba(255,61,107,0.75)"}];
3953var Chartopt = {datasetFill : false}
3954var myLine = new Chart(document.getElementById("canvas9").getContext("2d")).Line(ChartData9,Chartopt);
3955</script>
3956<p>A HMM was trained on a subset of the sequences. Shown are log2 odds ratios comparing emission probabilities in match states to background nucleotide probabilities. Values above 0 indicate positional enrichment of a particular nucleotide. "L" indicates the emission probabilities for a state modelling residiues in the middle of the reads. </p>
3957<section>
3958<h2>Composition of 0 >= MAPQ < 20 Reads. </h2>
3959<div style="float: left;width=705px">
3960<canvas id="canvas10" height="250" width="705px"></canvas>
3961</div><div class="chart-legend" style="float: left;width: 235px">
3962<ul><style>#id65546:before { background-color: rgba(52,255,54,0.75);}</style>
3963<li id="id65546">A</li><style>#id131082:before { background-color: rgba(57,124,214,0.75);}</style>
3964<li id="id131082">C</li><style>#id196618:before { background-color: rgba(251,220,60,0.75);}</style>
3965<li id="id196618">G</li><style>#id262154:before { background-color: rgba(255,61,107,0.75);}</style>
3966<li id="id262154">T</li></ul></div><div style="clear:both;"></div><script>
3967var ChartData10 = {
3968labels : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","L","19","20"],
3969datasets : [
3970{
3971fillColor : "rgba(52,255,54,0.75)",
3972strokeColor : "rgba(52,255,54,0.75)",
3973pointColor : "rgba(52,255,54,0.75)",
3974data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
3975},
3976{
3977fillColor : "rgba(57,124,214,0.75)",
3978strokeColor : "rgba(57,124,214,0.75)",
3979pointColor : "rgba(57,124,214,0.75)",
3980data : [-2.041357,-2.001186,-2.071988,-2.064687,-2.081975,-2.054129,-2.090729,-2.039746,-2.043606,-2.044938,-2.062995,-2.000272,-2.064680,-2.051489,-2.036486,-2.052827,-2.007531,-2.025352,-2.082994,-2.055122]
3981},
3982{
3983fillColor : "rgba(251,220,60,0.75)",
3984strokeColor : "rgba(251,220,60,0.75)",
3985pointColor : "rgba(251,220,60,0.75)",
3986data : [-2.131967,-2.325179,-2.256869,-2.204404,-2.212098,-2.220284,-2.191005,-2.207869,-2.215984,-2.246129,-2.245778,-2.283492,-2.264131,-2.192110,-2.241458,-2.215209,-2.303948,-2.224016,-2.217922,-2.233525]
3987},
3988{
3989fillColor : "rgba(255,61,107,0.75)",
3990strokeColor : "rgba(255,61,107,0.75)",
3991pointColor : "rgba(255,61,107,0.75)",
3992data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
3993}
3994]
3995}
3996var pieData10 = [
3997{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.041357, color:"rgba(57,124,214,0.75)"},{ value: -2.131967, color:"rgba(251,220,60,0.75)"},{ value: nan, color:"rgba(255,61,107,0.75)"}];
3998var Chartopt = {datasetFill : false}
3999var myLine = new Chart(document.getElementById("canvas10").getContext("2d")).Line(ChartData10,Chartopt);
4000</script>
4001<div style="float: left;width=528px">
4002<canvas id="canvas11" height="250" width="528px"></canvas>
4003</div><div class="chart-legend" style="float: left;width: 235px">
4004<ul><style>#id65547:before { background-color: rgba(52,255,54,0.75);}</style>
4005<li id="id65547">A</li><style>#id131083:before { background-color: rgba(57,124,214,0.75);}</style>
4006<li id="id131083">C</li><style>#id196619:before { background-color: rgba(251,220,60,0.75);}</style>
4007<li id="id196619">G</li><style>#id262155:before { background-color: rgba(255,61,107,0.75);}</style>
4008<li id="id262155">T</li></ul></div><div style="clear:both;"></div><script>
4009var ChartData11 = {
4010labels : ["21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"],
4011datasets : [
4012{
4013fillColor : "rgba(52,255,54,0.75)",
4014strokeColor : "rgba(52,255,54,0.75)",
4015pointColor : "rgba(52,255,54,0.75)",
4016data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
4017},
4018{
4019fillColor : "rgba(57,124,214,0.75)",
4020strokeColor : "rgba(57,124,214,0.75)",
4021pointColor : "rgba(57,124,214,0.75)",
4022data : [-2.048887,-2.068974,-2.075289,-2.102922,-2.019090,-2.040066,-2.067656,-2.053184,-2.019348,-2.038744,-2.016175,-2.006250,-2.031958,-2.109704,-1.902953]
4023},
4024{
4025fillColor : "rgba(251,220,60,0.75)",
4026strokeColor : "rgba(251,220,60,0.75)",
4027pointColor : "rgba(251,220,60,0.75)",
4028data : [-2.280265,-2.212121,-2.188300,-2.198275,-2.189867,-2.224902,-2.178828,-2.245801,-2.260457,-2.214422,-2.307290,-2.290431,-2.291686,-2.228021,-2.189848]
4029},
4030{
4031fillColor : "rgba(255,61,107,0.75)",
4032strokeColor : "rgba(255,61,107,0.75)",
4033pointColor : "rgba(255,61,107,0.75)",
4034data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
4035}
4036]
4037}
4038var pieData11 = [
4039{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.041357, color:"rgba(57,124,214,0.75)"},{ value: -2.131967, color:"rgba(251,220,60,0.75)"},{ value: nan, color:"rgba(255,61,107,0.75)"}];
4040var Chartopt = {datasetFill : false}
4041var myLine = new Chart(document.getElementById("canvas11").getContext("2d")).Line(ChartData11,Chartopt);
4042</script>
4043<p>A HMM was trained on a subset of the sequences. Shown are log2 odds ratios comparing emission probabilities in match states to background nucleotide probabilities. Values above 0 indicate positional enrichment of a particular nucleotide. "L" indicates the emission probabilities for a state modelling residiues in the middle of the reads. </p>
4044<section>
4045<h2>Composition of unmapped reads.</h2>
4046<div style="float: left;width=705px">
4047<canvas id="canvas12" height="250" width="705px"></canvas>
4048</div><div class="chart-legend" style="float: left;width: 235px">
4049<ul><style>#id65548:before { background-color: rgba(52,255,54,0.75);}</style>
4050<li id="id65548">A</li><style>#id131084:before { background-color: rgba(57,124,214,0.75);}</style>
4051<li id="id131084">C</li><style>#id196620:before { background-color: rgba(251,220,60,0.75);}</style>
4052<li id="id196620">G</li><style>#id262156:before { background-color: rgba(255,61,107,0.75);}</style>
4053<li id="id262156">T</li></ul></div><div style="clear:both;"></div><script>
4054var ChartData12 = {
4055labels : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","L","19","20"],
4056datasets : [
4057{
4058fillColor : "rgba(52,255,54,0.75)",
4059strokeColor : "rgba(52,255,54,0.75)",
4060pointColor : "rgba(52,255,54,0.75)",
4061data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
4062},
4063{
4064fillColor : "rgba(57,124,214,0.75)",
4065strokeColor : "rgba(57,124,214,0.75)",
4066pointColor : "rgba(57,124,214,0.75)",
4067data : [-2.320271,-2.274411,-2.322345,-2.309523,-2.317883,-2.267092,-2.305833,-2.279022,-2.285305,-2.272151,-2.267825,-2.269143,-2.296087,-2.269109,-2.299045,-2.285506,-2.272001,-2.283975,-2.272002,-2.268429]
4068},
4069{
4070fillColor : "rgba(251,220,60,0.75)",
4071strokeColor : "rgba(251,220,60,0.75)",
4072pointColor : "rgba(251,220,60,0.75)",
4073data : [-2.223983,-2.430359,-2.423539,-2.397696,-2.377191,-2.368183,-2.376271,-2.382514,-2.380927,-2.378612,-2.375837,-2.390413,-2.388796,-2.395616,-2.381077,-2.388957,-2.366109,-2.343582,-2.380725,-2.394184]
4074},
4075{
4076fillColor : "rgba(255,61,107,0.75)",
4077strokeColor : "rgba(255,61,107,0.75)",
4078pointColor : "rgba(255,61,107,0.75)",
4079data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
4080}
4081]
4082}
4083var pieData12 = [
4084{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.320271, color:"rgba(57,124,214,0.75)"},{ value: -2.223983, color:"rgba(251,220,60,0.75)"},{ value: nan, color:"rgba(255,61,107,0.75)"}];
4085var Chartopt = {datasetFill : false}
4086var myLine = new Chart(document.getElementById("canvas12").getContext("2d")).Line(ChartData12,Chartopt);
4087</script>
4088<div style="float: left;width=528px">
4089<canvas id="canvas13" height="250" width="528px"></canvas>
4090</div><div class="chart-legend" style="float: left;width: 235px">
4091<ul><style>#id65549:before { background-color: rgba(52,255,54,0.75);}</style>
4092<li id="id65549">A</li><style>#id131085:before { background-color: rgba(57,124,214,0.75);}</style>
4093<li id="id131085">C</li><style>#id196621:before { background-color: rgba(251,220,60,0.75);}</style>
4094<li id="id196621">G</li><style>#id262157:before { background-color: rgba(255,61,107,0.75);}</style>
4095<li id="id262157">T</li></ul></div><div style="clear:both;"></div><script>
4096var ChartData13 = {
4097labels : ["21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"],
4098datasets : [
4099{
4100fillColor : "rgba(52,255,54,0.75)",
4101strokeColor : "rgba(52,255,54,0.75)",
4102pointColor : "rgba(52,255,54,0.75)",
4103data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
4104},
4105{
4106fillColor : "rgba(57,124,214,0.75)",
4107strokeColor : "rgba(57,124,214,0.75)",
4108pointColor : "rgba(57,124,214,0.75)",
4109data : [-2.270074,-2.278702,-2.262547,-2.275318,-2.272580,-2.265351,-2.278423,-2.259694,-2.221861,-2.243042,-2.245255,-2.260461,-2.287321,-2.313168,-2.090932]
4110},
4111{
4112fillColor : "rgba(251,220,60,0.75)",
4113strokeColor : "rgba(251,220,60,0.75)",
4114pointColor : "rgba(251,220,60,0.75)",
4115data : [-2.378558,-2.365848,-2.381292,-2.373653,-2.350861,-2.398816,-2.354409,-2.396495,-2.393915,-2.364985,-2.407109,-2.424963,-2.452651,-2.346249,-2.381904]
4116},
4117{
4118fillColor : "rgba(255,61,107,0.75)",
4119strokeColor : "rgba(255,61,107,0.75)",
4120pointColor : "rgba(255,61,107,0.75)",
4121data : [nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan,nan]
4122}
4123]
4124}
4125var pieData13 = [
4126{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.320271, color:"rgba(57,124,214,0.75)"},{ value: -2.223983, color:"rgba(251,220,60,0.75)"},{ value: nan, color:"rgba(255,61,107,0.75)"}];
4127var Chartopt = {datasetFill : false}
4128var myLine = new Chart(document.getElementById("canvas13").getContext("2d")).Line(ChartData13,Chartopt);
4129</script>
4130<p>A HMM was trained on a subset of the sequences. Shown are log2 odds ratios comparing emission probabilities in match states to background nucleotide probabilities. Values above 0 indicate positional enrichment of a particular nucleotide. "L" indicates the emission probabilities for a state modelling residiues in the middle of the reads.</p>
4131<section>
4132<h2>Distribution of Mismatches (MAPQ >= 30):</h2>
4133<div style="float: left;width=705px">
4134<canvas id="canvas14" height="250" width="705px"></canvas>
4135</div><div class="chart-legend" style="float: left;width: 235px">
4136<ul><style>#id65550:before { background-color: rgba(52,255,54,0.75);}</style>
4137<li id="id65550">A</li><style>#id131086:before { background-color: rgba(57,124,214,0.75);}</style>
4138<li id="id131086">C</li><style>#id196622:before { background-color: rgba(251,220,60,0.75);}</style>
4139<li id="id196622">G</li><style>#id262158:before { background-color: rgba(255,61,107,0.75);}</style>
4140<li id="id262158">T</li></ul></div><div style="clear:both;"></div><script>
4141var ChartData14 = {
4142labels : ["1nt","2nt","3nt","4nt","5nt","6nt","7nt","8nt","9nt","10nt","11nt","12nt","13nt","14nt","15nt","16nt","17nt","18nt","19nt","20nt"],
4143datasets : [
4144{
4145fillColor : "rgba(52,255,54,0.75)",
4146strokeColor : "rgba(52,255,54,0.75)",
4147pointColor : "rgba(52,255,54,0.75)",
4148data : [0.149503,0.112585,0.107915,0.111369,0.116984,0.156706,0.148336,0.151053,0.148510,0.137642,0.145691,0.159332,0.142533,0.135971,0.134880,0.140351,0.142617,0.136161,0.135481,0.130739]
4149},
4150{
4151fillColor : "rgba(57,124,214,0.75)",
4152strokeColor : "rgba(57,124,214,0.75)",
4153pointColor : "rgba(57,124,214,0.75)",
4154data : [0.154922,0.157919,0.131892,0.126981,0.129094,0.165681,0.173719,0.167064,0.154463,0.158217,0.159635,0.169401,0.164453,0.148439,0.155197,0.170891,0.158423,0.151304,0.154114,0.152085]
4155},
4156{
4157fillColor : "rgba(251,220,60,0.75)",
4158strokeColor : "rgba(251,220,60,0.75)",
4159pointColor : "rgba(251,220,60,0.75)",
4160data : [0.242316,0.188068,0.172935,0.166589,0.167388,0.213521,0.207903,0.203615,0.201751,0.192425,0.199620,0.214521,0.195465,0.184163,0.189618,0.193106,0.191418,0.194251,0.187281,0.188850]
4161},
4162{
4163fillColor : "rgba(255,61,107,0.75)",
4164strokeColor : "rgba(255,61,107,0.75)",
4165pointColor : "rgba(255,61,107,0.75)",
4166data : [0.049818,0.075308,0.078697,0.072526,0.078285,0.107554,0.108452,0.112144,0.104755,0.109636,0.114819,0.121133,0.116654,0.113607,0.114080,0.124674,0.123463,0.121750,0.126318,0.128057]
4167}
4168]
4169}
4170var pieData14 = [
4171{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4172var Chartopt = {datasetFill : false}
4173var myLine = new Chart(document.getElementById("canvas14").getContext("2d")).Bar(ChartData14);
4174</script>
4175<div style="float: left;width=705px">
4176<canvas id="canvas15" height="250" width="705px"></canvas>
4177</div><div class="chart-legend" style="float: left;width: 235px">
4178<ul><style>#id65551:before { background-color: rgba(52,255,54,0.75);}</style>
4179<li id="id65551">A</li><style>#id131087:before { background-color: rgba(57,124,214,0.75);}</style>
4180<li id="id131087">C</li><style>#id196623:before { background-color: rgba(251,220,60,0.75);}</style>
4181<li id="id196623">G</li><style>#id262159:before { background-color: rgba(255,61,107,0.75);}</style>
4182<li id="id262159">T</li></ul></div><div style="clear:both;"></div><script>
4183var ChartData15 = {
4184labels : ["21nt","22nt","23nt","24nt","25nt","26nt","27nt","28nt","29nt","30nt","31nt","32nt","33nt","34nt","35nt","36nt","37nt","38nt","39nt","40nt"],
4185datasets : [
4186{
4187fillColor : "rgba(52,255,54,0.75)",
4188strokeColor : "rgba(52,255,54,0.75)",
4189pointColor : "rgba(52,255,54,0.75)",
4190data : [0.131456,0.135549,0.133149,0.126703,0.129401,0.131730,0.132044,0.122535,0.126690,0.130941,0.121455,0.118437,0.127942,0.121322,0.116853,0.114918,0.116065,0.118026,0.112020,0.116794]
4191},
4192{
4193fillColor : "rgba(57,124,214,0.75)",
4194strokeColor : "rgba(57,124,214,0.75)",
4195pointColor : "rgba(57,124,214,0.75)",
4196data : [0.158819,0.162326,0.158563,0.150856,0.156906,0.156615,0.158621,0.151295,0.155099,0.163887,0.156229,0.148761,0.162886,0.153187,0.153494,0.155421,0.159945,0.159000,0.151689,0.160933]
4197},
4198{
4199fillColor : "rgba(251,220,60,0.75)",
4200strokeColor : "rgba(251,220,60,0.75)",
4201pointColor : "rgba(251,220,60,0.75)",
4202data : [0.182588,0.188003,0.187771,0.170930,0.182164,0.183085,0.183711,0.170516,0.173912,0.186372,0.168475,0.166266,0.180054,0.173989,0.167501,0.162761,0.173444,0.179332,0.160626,0.170733]
4203},
4204{
4205fillColor : "rgba(255,61,107,0.75)",
4206strokeColor : "rgba(255,61,107,0.75)",
4207pointColor : "rgba(255,61,107,0.75)",
4208data : [0.130211,0.138168,0.137239,0.134859,0.135517,0.143859,0.144780,0.139642,0.147796,0.148881,0.144952,0.143361,0.148728,0.152260,0.154194,0.149347,0.154580,0.154361,0.151966,0.158569]
4209}
4210]
4211}
4212var pieData15 = [
4213{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4214var Chartopt = {datasetFill : false}
4215var myLine = new Chart(document.getElementById("canvas15").getContext("2d")).Bar(ChartData15);
4216</script>
4217<div style="float: left;width=705px">
4218<canvas id="canvas16" height="250" width="705px"></canvas>
4219</div><div class="chart-legend" style="float: left;width: 235px">
4220<ul><style>#id65552:before { background-color: rgba(52,255,54,0.75);}</style>
4221<li id="id65552">A</li><style>#id131088:before { background-color: rgba(57,124,214,0.75);}</style>
4222<li id="id131088">C</li><style>#id196624:before { background-color: rgba(251,220,60,0.75);}</style>
4223<li id="id196624">G</li><style>#id262160:before { background-color: rgba(255,61,107,0.75);}</style>
4224<li id="id262160">T</li></ul></div><div style="clear:both;"></div><script>
4225var ChartData16 = {
4226labels : ["41nt","42nt","43nt","44nt","45nt","46nt","47nt","48nt","49nt","50nt","51nt","52nt","53nt","54nt","55nt","56nt","57nt","58nt","59nt","60nt"],
4227datasets : [
4228{
4229fillColor : "rgba(52,255,54,0.75)",
4230strokeColor : "rgba(52,255,54,0.75)",
4231pointColor : "rgba(52,255,54,0.75)",
4232data : [0.128137,0.115959,0.112888,0.106457,0.113909,0.120271,0.118530,0.123734,0.116380,0.120884,0.117902,0.113866,0.109991,0.110667,0.118416,0.109598,0.114988,0.119368,0.121771,0.112521]
4233},
4234{
4235fillColor : "rgba(57,124,214,0.75)",
4236strokeColor : "rgba(57,124,214,0.75)",
4237pointColor : "rgba(57,124,214,0.75)",
4238data : [0.179405,0.165908,0.163720,0.161184,0.168602,0.181550,0.182507,0.189829,0.192094,0.193108,0.192653,0.187633,0.185081,0.190164,0.204766,0.193993,0.205169,0.214698,0.223088,0.224659]
4239},
4240{
4241fillColor : "rgba(251,220,60,0.75)",
4242strokeColor : "rgba(251,220,60,0.75)",
4243pointColor : "rgba(251,220,60,0.75)",
4244data : [0.195734,0.177459,0.172283,0.168365,0.186057,0.188774,0.189825,0.203791,0.191821,0.202939,0.199649,0.192487,0.190679,0.195163,0.207499,0.197500,0.208099,0.217158,0.224120,0.214898]
4245},
4246{
4247fillColor : "rgba(255,61,107,0.75)",
4248strokeColor : "rgba(255,61,107,0.75)",
4249pointColor : "rgba(255,61,107,0.75)",
4250data : [0.169365,0.164762,0.160365,0.157848,0.166560,0.174497,0.174594,0.181514,0.179476,0.185253,0.183176,0.182786,0.180495,0.184981,0.195098,0.185778,0.195217,0.203513,0.209452,0.208020]
4251}
4252]
4253}
4254var pieData16 = [
4255{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4256var Chartopt = {datasetFill : false}
4257var myLine = new Chart(document.getElementById("canvas16").getContext("2d")).Bar(ChartData16);
4258</script>
4259<div style="float: left;width=705px">
4260<canvas id="canvas17" height="250" width="705px"></canvas>
4261</div><div class="chart-legend" style="float: left;width: 235px">
4262<ul><style>#id65553:before { background-color: rgba(52,255,54,0.75);}</style>
4263<li id="id65553">A</li><style>#id131089:before { background-color: rgba(57,124,214,0.75);}</style>
4264<li id="id131089">C</li><style>#id196625:before { background-color: rgba(251,220,60,0.75);}</style>
4265<li id="id196625">G</li><style>#id262161:before { background-color: rgba(255,61,107,0.75);}</style>
4266<li id="id262161">T</li></ul></div><div style="clear:both;"></div><script>
4267var ChartData17 = {
4268labels : ["61nt","62nt","63nt","64nt","65nt","66nt","67nt","68nt","69nt","70nt","71nt","72nt","73nt","74nt","75nt","76nt","77nt","78nt","79nt","80nt"],
4269datasets : [
4270{
4271fillColor : "rgba(52,255,54,0.75)",
4272strokeColor : "rgba(52,255,54,0.75)",
4273pointColor : "rgba(52,255,54,0.75)",
4274data : [0.118834,0.109807,0.114159,0.110804,0.109818,0.126170,0.107604,0.111523,0.111926,0.108019,0.118534,0.110298,0.116603,0.121066,0.122234,0.123150,0.118584,0.110960,0.111044,0.114930]
4275},
4276{
4277fillColor : "rgba(57,124,214,0.75)",
4278strokeColor : "rgba(57,124,214,0.75)",
4279pointColor : "rgba(57,124,214,0.75)",
4280data : [0.233169,0.228038,0.230198,0.231851,0.237421,0.255811,0.240292,0.251618,0.253308,0.254050,0.267913,0.264905,0.274380,0.286796,0.290913,0.294060,0.288413,0.281928,0.288999,0.300180]
4281},
4282{
4283fillColor : "rgba(251,220,60,0.75)",
4284strokeColor : "rgba(251,220,60,0.75)",
4285pointColor : "rgba(251,220,60,0.75)",
4286data : [0.225278,0.214765,0.224871,0.221940,0.226987,0.251342,0.229534,0.240207,0.249137,0.247302,0.271070,0.256517,0.264321,0.274408,0.283017,0.288886,0.289616,0.276729,0.284006,0.290508]
4287},
4288{
4289fillColor : "rgba(255,61,107,0.75)",
4290strokeColor : "rgba(255,61,107,0.75)",
4291pointColor : "rgba(255,61,107,0.75)",
4292data : [0.215689,0.210451,0.215711,0.218422,0.222674,0.236555,0.226185,0.233313,0.237787,0.239695,0.249214,0.248137,0.256984,0.265906,0.273333,0.276630,0.280900,0.277067,0.282134,0.291644]
4293}
4294]
4295}
4296var pieData17 = [
4297{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4298var Chartopt = {datasetFill : false}
4299var myLine = new Chart(document.getElementById("canvas17").getContext("2d")).Bar(ChartData17);
4300</script>
4301<div style="float: left;width=705px">
4302<canvas id="canvas18" height="250" width="705px"></canvas>
4303</div><div class="chart-legend" style="float: left;width: 235px">
4304<ul><style>#id65554:before { background-color: rgba(52,255,54,0.75);}</style>
4305<li id="id65554">A</li><style>#id131090:before { background-color: rgba(57,124,214,0.75);}</style>
4306<li id="id131090">C</li><style>#id196626:before { background-color: rgba(251,220,60,0.75);}</style>
4307<li id="id196626">G</li><style>#id262162:before { background-color: rgba(255,61,107,0.75);}</style>
4308<li id="id262162">T</li></ul></div><div style="clear:both;"></div><script>
4309var ChartData18 = {
4310labels : ["81nt","82nt","83nt","84nt","85nt","86nt","87nt","88nt","89nt","90nt","91nt","92nt","93nt","94nt","95nt","96nt","97nt","98nt","99nt","100nt"],
4311datasets : [
4312{
4313fillColor : "rgba(52,255,54,0.75)",
4314strokeColor : "rgba(52,255,54,0.75)",
4315pointColor : "rgba(52,255,54,0.75)",
4316data : [0.110688,0.113599,0.113582,0.111967,0.119910,0.113358,0.111869,0.112442,0.114861,0.121058,0.117893,0.117276,0.117855,0.112425,0.108319,0.123112,0.111029,0.113101,0.117731,0.121243]
4317},
4318{
4319fillColor : "rgba(57,124,214,0.75)",
4320strokeColor : "rgba(57,124,214,0.75)",
4321pointColor : "rgba(57,124,214,0.75)",
4322data : [0.290076,0.298051,0.298318,0.300346,0.316437,0.308446,0.311751,0.319335,0.324743,0.337857,0.342372,0.349247,0.353137,0.349771,0.350936,0.372345,0.364509,0.371231,0.383714,0.396523]
4323},
4324{
4325fillColor : "rgba(251,220,60,0.75)",
4326strokeColor : "rgba(251,220,60,0.75)",
4327pointColor : "rgba(251,220,60,0.75)",
4328data : [0.284873,0.295369,0.302478,0.295190,0.314434,0.308490,0.308598,0.314766,0.326805,0.335754,0.338294,0.335261,0.339441,0.336992,0.335707,0.361203,0.347150,0.354723,0.367720,0.380670]
4329},
4330{
4331fillColor : "rgba(255,61,107,0.75)",
4332strokeColor : "rgba(255,61,107,0.75)",
4333pointColor : "rgba(255,61,107,0.75)",
4334data : [0.289055,0.298637,0.303960,0.308575,0.324599,0.321404,0.327140,0.336061,0.342317,0.356749,0.359802,0.370174,0.377345,0.379573,0.384549,0.401943,0.399504,0.411172,0.423725,0.436633]
4335}
4336]
4337}
4338var pieData18 = [
4339{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4340var Chartopt = {datasetFill : false}
4341var myLine = new Chart(document.getElementById("canvas18").getContext("2d")).Bar(ChartData18);
4342</script>
4343<div style="float: left;width=705px">
4344<canvas id="canvas19" height="250" width="705px"></canvas>
4345</div><div class="chart-legend" style="float: left;width: 235px">
4346<ul><style>#id65555:before { background-color: rgba(52,255,54,0.75);}</style>
4347<li id="id65555">A</li><style>#id131091:before { background-color: rgba(57,124,214,0.75);}</style>
4348<li id="id131091">C</li><style>#id196627:before { background-color: rgba(251,220,60,0.75);}</style>
4349<li id="id196627">G</li><style>#id262163:before { background-color: rgba(255,61,107,0.75);}</style>
4350<li id="id262163">T</li></ul></div><div style="clear:both;"></div><script>
4351var ChartData19 = {
4352labels : ["101nt","102nt","103nt","104nt","105nt","106nt","107nt","108nt","109nt","110nt","111nt","112nt","113nt","114nt","115nt","116nt","117nt","118nt","119nt","120nt"],
4353datasets : [
4354{
4355fillColor : "rgba(52,255,54,0.75)",
4356strokeColor : "rgba(52,255,54,0.75)",
4357pointColor : "rgba(52,255,54,0.75)",
4358data : [0.123132,0.123521,0.124039,0.120747,0.122089,0.113335,0.111642,0.119379,0.123545,0.124683,0.114503,0.114220,0.119639,0.117771,0.117353,0.126758,0.119224,0.120850,0.118416,0.124197]
4359},
4360{
4361fillColor : "rgba(57,124,214,0.75)",
4362strokeColor : "rgba(57,124,214,0.75)",
4363pointColor : "rgba(57,124,214,0.75)",
4364data : [0.408132,0.413294,0.422787,0.423165,0.433696,0.431397,0.433009,0.449448,0.465031,0.479455,0.471218,0.478575,0.499710,0.500136,0.506294,0.528530,0.534692,0.548184,0.553350,0.570278]
4365},
4366{
4367fillColor : "rgba(251,220,60,0.75)",
4368strokeColor : "rgba(251,220,60,0.75)",
4369pointColor : "rgba(251,220,60,0.75)",
4370data : [0.390436,0.401539,0.398077,0.402307,0.411349,0.403286,0.408851,0.423677,0.435007,0.445417,0.438956,0.443868,0.461505,0.465932,0.470692,0.488604,0.486189,0.504299,0.502861,0.522882]
4371},
4372{
4373fillColor : "rgba(255,61,107,0.75)",
4374strokeColor : "rgba(255,61,107,0.75)",
4375pointColor : "rgba(255,61,107,0.75)",
4376data : [0.444729,0.452965,0.464923,0.470992,0.480289,0.479597,0.487119,0.504505,0.519388,0.534242,0.531776,0.542554,0.555892,0.564731,0.578188,0.593466,0.605588,0.620883,0.628626,0.646150]
4377}
4378]
4379}
4380var pieData19 = [
4381{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4382var Chartopt = {datasetFill : false}
4383var myLine = new Chart(document.getElementById("canvas19").getContext("2d")).Bar(ChartData19);
4384</script>
4385<div style="float: left;width=705px">
4386<canvas id="canvas20" height="250" width="705px"></canvas>
4387</div><div class="chart-legend" style="float: left;width: 235px">
4388<ul><style>#id65556:before { background-color: rgba(52,255,54,0.75);}</style>
4389<li id="id65556">A</li><style>#id131092:before { background-color: rgba(57,124,214,0.75);}</style>
4390<li id="id131092">C</li><style>#id196628:before { background-color: rgba(251,220,60,0.75);}</style>
4391<li id="id196628">G</li><style>#id262164:before { background-color: rgba(255,61,107,0.75);}</style>
4392<li id="id262164">T</li></ul></div><div style="clear:both;"></div><script>
4393var ChartData20 = {
4394labels : ["121nt","122nt","123nt","124nt","125nt","126nt","127nt","128nt","129nt","130nt","131nt","132nt","133nt","134nt","135nt","136nt","137nt","138nt","139nt","140nt"],
4395datasets : [
4396{
4397fillColor : "rgba(52,255,54,0.75)",
4398strokeColor : "rgba(52,255,54,0.75)",
4399pointColor : "rgba(52,255,54,0.75)",
4400data : [0.127322,0.126384,0.119802,0.126422,0.124531,0.115317,0.121495,0.120921,0.123494,0.114352,0.110235,0.114261,0.104201,0.109842,0.109116,0.098349,0.097559,0.104876,0.102284,0.096054]
4401},
4402{
4403fillColor : "rgba(57,124,214,0.75)",
4404strokeColor : "rgba(57,124,214,0.75)",
4405pointColor : "rgba(57,124,214,0.75)",
4406data : [0.591624,0.594288,0.602416,0.624566,0.633887,0.638998,0.652903,0.676583,0.690364,0.698207,0.717763,0.735502,0.743878,0.762621,0.783931,0.793550,0.808682,0.842148,0.866564,0.878030]
4407},
4408{
4409fillColor : "rgba(251,220,60,0.75)",
4410strokeColor : "rgba(251,220,60,0.75)",
4411pointColor : "rgba(251,220,60,0.75)",
4412data : [0.537971,0.538821,0.540475,0.564180,0.571082,0.577908,0.594110,0.604939,0.624178,0.627128,0.634528,0.659260,0.657200,0.687008,0.716748,0.709133,0.726109,0.759651,0.772727,0.780391]
4413},
4414{
4415fillColor : "rgba(255,61,107,0.75)",
4416strokeColor : "rgba(255,61,107,0.75)",
4417pointColor : "rgba(255,61,107,0.75)",
4418data : [0.659971,0.674801,0.683943,0.706369,0.722179,0.728085,0.748213,0.766021,0.786568,0.797235,0.810648,0.840001,0.857450,0.885083,0.904720,0.918911,0.948848,0.983255,1.012681,1.025366]
4419}
4420]
4421}
4422var pieData20 = [
4423{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4424var Chartopt = {datasetFill : false}
4425var myLine = new Chart(document.getElementById("canvas20").getContext("2d")).Bar(ChartData20);
4426</script>
4427<div style="float: left;width=352px">
4428<canvas id="canvas21" height="250" width="352px"></canvas>
4429</div><div class="chart-legend" style="float: left;width: 235px">
4430<ul><style>#id65557:before { background-color: rgba(52,255,54,0.75);}</style>
4431<li id="id65557">A</li><style>#id131093:before { background-color: rgba(57,124,214,0.75);}</style>
4432<li id="id131093">C</li><style>#id196629:before { background-color: rgba(251,220,60,0.75);}</style>
4433<li id="id196629">G</li><style>#id262165:before { background-color: rgba(255,61,107,0.75);}</style>
4434<li id="id262165">T</li></ul></div><div style="clear:both;"></div><script>
4435var ChartData21 = {
4436labels : ["141nt","142nt","143nt","144nt","145nt","146nt","147nt","148nt","149nt","150nt"],
4437datasets : [
4438{
4439fillColor : "rgba(52,255,54,0.75)",
4440strokeColor : "rgba(52,255,54,0.75)",
4441pointColor : "rgba(52,255,54,0.75)",
4442data : [0.096838,0.088037,0.104069,0.089993,0.085470,0.080043,0.077367,0.078304,0.072818,0.018886]
4443},
4444{
4445fillColor : "rgba(57,124,214,0.75)",
4446strokeColor : "rgba(57,124,214,0.75)",
4447pointColor : "rgba(57,124,214,0.75)",
4448data : [0.909640,0.925695,0.964172,0.986304,1.006825,1.041433,1.063097,1.068318,1.056162,0.947065]
4449},
4450{
4451fillColor : "rgba(251,220,60,0.75)",
4452strokeColor : "rgba(251,220,60,0.75)",
4453pointColor : "rgba(251,220,60,0.75)",
4454data : [0.819105,0.824328,0.872670,0.874707,0.889916,0.912050,0.939448,0.948390,0.923869,0.751186]
4455},
4456{
4457fillColor : "rgba(255,61,107,0.75)",
4458strokeColor : "rgba(255,61,107,0.75)",
4459pointColor : "rgba(255,61,107,0.75)",
4460data : [1.051202,1.082924,1.125009,1.142687,1.183280,1.218297,1.260417,1.291353,1.297964,1.154347]
4461}
4462]
4463}
4464var pieData21 = [
4465{ value: 0.149503, color:"rgba(52,255,54,0.75)"},{ value: 0.154922, color:"rgba(57,124,214,0.75)"},{ value: 0.242316, color:"rgba(251,220,60,0.75)"},{ value: 0.049818, color:"rgba(255,61,107,0.75)"}];
4466var Chartopt = {datasetFill : false}
4467var myLine = new Chart(document.getElementById("canvas21").getContext("2d")).Bar(ChartData21);
4468</script>
4469<p>Distribution of Mismatches in MAPQ >= 30 reads.</p>
4470<section>
4471<h2>Distribution of Mismatches (MAPQ < 30):</h2>
4472<div style="float: left;width=705px">
4473<canvas id="canvas22" height="250" width="705px"></canvas>
4474</div><div class="chart-legend" style="float: left;width: 235px">
4475<ul><style>#id65558:before { background-color: rgba(52,255,54,0.75);}</style>
4476<li id="id65558">A</li><style>#id131094:before { background-color: rgba(57,124,214,0.75);}</style>
4477<li id="id131094">C</li><style>#id196630:before { background-color: rgba(251,220,60,0.75);}</style>
4478<li id="id196630">G</li><style>#id262166:before { background-color: rgba(255,61,107,0.75);}</style>
4479<li id="id262166">T</li></ul></div><div style="clear:both;"></div><script>
4480var ChartData22 = {
4481labels : ["1nt","2nt","3nt","4nt","5nt","6nt","7nt","8nt","9nt","10nt","11nt","12nt","13nt","14nt","15nt","16nt","17nt","18nt","19nt","20nt"],
4482datasets : [
4483{
4484fillColor : "rgba(52,255,54,0.75)",
4485strokeColor : "rgba(52,255,54,0.75)",
4486pointColor : "rgba(52,255,54,0.75)",
4487data : [0.367811,0.280237,0.253198,0.248338,0.268517,0.381372,0.364128,0.373026,0.372830,0.384083,0.383746,0.397466,0.386335,0.385634,0.389148,0.384569,0.387615,0.386428,0.380073,0.386045]
4488},
4489{
4490fillColor : "rgba(57,124,214,0.75)",
4491strokeColor : "rgba(57,124,214,0.75)",
4492pointColor : "rgba(57,124,214,0.75)",
4493data : [0.344772,0.326865,0.283994,0.271835,0.286097,0.429505,0.425907,0.412224,0.402401,0.411663,0.438337,0.438393,0.424243,0.409962,0.420112,0.438833,0.435309,0.416364,0.417673,0.422823]
4494},
4495{
4496fillColor : "rgba(251,220,60,0.75)",
4497strokeColor : "rgba(251,220,60,0.75)",
4498pointColor : "rgba(251,220,60,0.75)",
4499data : [0.439664,0.325958,0.307612,0.289191,0.311649,0.456525,0.450693,0.433169,0.422346,0.436449,0.440300,0.462320,0.441842,0.422972,0.440356,0.444450,0.443235,0.445908,0.430533,0.450385]
4500},
4501{
4502fillColor : "rgba(255,61,107,0.75)",
4503strokeColor : "rgba(255,61,107,0.75)",
4504pointColor : "rgba(255,61,107,0.75)",
4505data : [0.187242,0.222543,0.227636,0.215654,0.226449,0.347502,0.345632,0.340127,0.343997,0.356549,0.378092,0.363474,0.364390,0.370792,0.361511,0.377624,0.369942,0.373372,0.384737,0.393859]
4506}
4507]
4508}
4509var pieData22 = [
4510{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4511var Chartopt = {datasetFill : false}
4512var myLine = new Chart(document.getElementById("canvas22").getContext("2d")).Bar(ChartData22);
4513</script>
4514<div style="float: left;width=705px">
4515<canvas id="canvas23" height="250" width="705px"></canvas>
4516</div><div class="chart-legend" style="float: left;width: 235px">
4517<ul><style>#id65559:before { background-color: rgba(52,255,54,0.75);}</style>
4518<li id="id65559">A</li><style>#id131095:before { background-color: rgba(57,124,214,0.75);}</style>
4519<li id="id131095">C</li><style>#id196631:before { background-color: rgba(251,220,60,0.75);}</style>
4520<li id="id196631">G</li><style>#id262167:before { background-color: rgba(255,61,107,0.75);}</style>
4521<li id="id262167">T</li></ul></div><div style="clear:both;"></div><script>
4522var ChartData23 = {
4523labels : ["21nt","22nt","23nt","24nt","25nt","26nt","27nt","28nt","29nt","30nt","31nt","32nt","33nt","34nt","35nt","36nt","37nt","38nt","39nt","40nt"],
4524datasets : [
4525{
4526fillColor : "rgba(52,255,54,0.75)",
4527strokeColor : "rgba(52,255,54,0.75)",
4528pointColor : "rgba(52,255,54,0.75)",
4529data : [0.376381,0.380185,0.392429,0.375568,0.390877,0.366185,0.375578,0.369512,0.376185,0.377409,0.361493,0.364857,0.371764,0.372353,0.361605,0.360399,0.361857,0.361932,0.360446,0.363951]
4530},
4531{
4532fillColor : "rgba(57,124,214,0.75)",
4533strokeColor : "rgba(57,124,214,0.75)",
4534pointColor : "rgba(57,124,214,0.75)",
4535data : [0.446001,0.444721,0.439020,0.435898,0.446796,0.448057,0.450478,0.438945,0.445777,0.474414,0.474526,0.471572,0.481246,0.486339,0.494994,0.512911,0.521724,0.517369,0.523117,0.551277]
4536},
4537{
4538fillColor : "rgba(251,220,60,0.75)",
4539strokeColor : "rgba(251,220,60,0.75)",
4540pointColor : "rgba(251,220,60,0.75)",
4541data : [0.444898,0.448057,0.451357,0.437216,0.462292,0.467628,0.465759,0.457749,0.463030,0.482872,0.474703,0.480330,0.494574,0.501658,0.500462,0.506322,0.517761,0.651235,0.522995,0.538959]
4542},
4543{
4544fillColor : "rgba(255,61,107,0.75)",
4545strokeColor : "rgba(255,61,107,0.75)",
4546pointColor : "rgba(255,61,107,0.75)",
4547data : [0.383036,0.401878,0.405906,0.408962,0.416963,0.418019,0.427720,0.426458,0.444440,0.462226,0.444263,0.459815,0.473946,0.494863,0.514621,0.491573,0.509789,0.521107,0.535716,0.562782]
4548}
4549]
4550}
4551var pieData23 = [
4552{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4553var Chartopt = {datasetFill : false}
4554var myLine = new Chart(document.getElementById("canvas23").getContext("2d")).Bar(ChartData23);
4555</script>
4556<div style="float: left;width=705px">
4557<canvas id="canvas24" height="250" width="705px"></canvas>
4558</div><div class="chart-legend" style="float: left;width: 235px">
4559<ul><style>#id65560:before { background-color: rgba(52,255,54,0.75);}</style>
4560<li id="id65560">A</li><style>#id131096:before { background-color: rgba(57,124,214,0.75);}</style>
4561<li id="id131096">C</li><style>#id196632:before { background-color: rgba(251,220,60,0.75);}</style>
4562<li id="id196632">G</li><style>#id262168:before { background-color: rgba(255,61,107,0.75);}</style>
4563<li id="id262168">T</li></ul></div><div style="clear:both;"></div><script>
4564var ChartData24 = {
4565labels : ["41nt","42nt","43nt","44nt","45nt","46nt","47nt","48nt","49nt","50nt","51nt","52nt","53nt","54nt","55nt","56nt","57nt","58nt","59nt","60nt"],
4566datasets : [
4567{
4568fillColor : "rgba(52,255,54,0.75)",
4569strokeColor : "rgba(52,255,54,0.75)",
4570pointColor : "rgba(52,255,54,0.75)",
4571data : [0.380223,0.358782,0.368699,0.347688,0.360614,0.358539,0.370746,0.370923,0.363184,0.366026,0.355053,0.360661,0.350175,0.356418,0.360867,0.342268,0.349034,0.358642,0.351829,0.339249]
4572},
4573{
4574fillColor : "rgba(57,124,214,0.75)",
4575strokeColor : "rgba(57,124,214,0.75)",
4576pointColor : "rgba(57,124,214,0.75)",
4577data : [0.574923,0.577773,0.573418,0.587456,0.597410,0.632449,0.638814,0.644636,0.670105,0.683217,0.703059,0.697639,0.703293,0.726668,0.762557,0.770483,0.790185,0.794830,0.828046,0.845234]
4578},
4579{
4580fillColor : "rgba(251,220,60,0.75)",
4581strokeColor : "rgba(251,220,60,0.75)",
4582pointColor : "rgba(251,220,60,0.75)",
4583data : [0.590811,0.571857,0.581091,0.586232,0.633234,0.639262,0.653375,0.686713,0.689423,0.718939,0.733724,0.733612,0.740454,0.760585,0.794456,0.790035,0.820280,0.831869,0.855347,0.868777]
4584},
4585{
4586fillColor : "rgba(255,61,107,0.75)",
4587strokeColor : "rgba(255,61,107,0.75)",
4588pointColor : "rgba(255,61,107,0.75)",
4589data : [0.560184,0.586176,0.590737,0.608728,0.624056,0.640225,0.634954,0.666273,0.681488,0.704639,0.693732,0.708546,0.726425,0.749688,0.769240,0.751445,0.780119,0.820457,0.833196,0.858767]
4590}
4591]
4592}
4593var pieData24 = [
4594{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4595var Chartopt = {datasetFill : false}
4596var myLine = new Chart(document.getElementById("canvas24").getContext("2d")).Bar(ChartData24);
4597</script>
4598<div style="float: left;width=705px">
4599<canvas id="canvas25" height="250" width="705px"></canvas>
4600</div><div class="chart-legend" style="float: left;width: 235px">
4601<ul><style>#id65561:before { background-color: rgba(52,255,54,0.75);}</style>
4602<li id="id65561">A</li><style>#id131097:before { background-color: rgba(57,124,214,0.75);}</style>
4603<li id="id131097">C</li><style>#id196633:before { background-color: rgba(251,220,60,0.75);}</style>
4604<li id="id196633">G</li><style>#id262169:before { background-color: rgba(255,61,107,0.75);}</style>
4605<li id="id262169">T</li></ul></div><div style="clear:both;"></div><script>
4606var ChartData25 = {
4607labels : ["61nt","62nt","63nt","64nt","65nt","66nt","67nt","68nt","69nt","70nt","71nt","72nt","73nt","74nt","75nt","76nt","77nt","78nt","79nt","80nt"],
4608datasets : [
4609{
4610fillColor : "rgba(52,255,54,0.75)",
4611strokeColor : "rgba(52,255,54,0.75)",
4612pointColor : "rgba(52,255,54,0.75)",
4613data : [0.347520,0.344529,0.351371,0.339613,0.340884,0.348716,0.338034,0.345445,0.340454,0.340903,0.347903,0.342567,0.345081,0.350090,0.344445,0.357652,0.348156,0.340081,0.337146,0.335080]
4614},
4615{
4616fillColor : "rgba(57,124,214,0.75)",
4617strokeColor : "rgba(57,124,214,0.75)",
4618pointColor : "rgba(57,124,214,0.75)",
4619data : [0.877123,0.877749,0.892890,0.921565,0.952800,0.986539,0.985567,0.994297,1.016569,1.035570,1.076394,1.088404,1.094993,1.130677,1.150005,1.170220,1.173333,1.168828,1.192745,1.207465]
4620},
4621{
4622fillColor : "rgba(251,220,60,0.75)",
4623strokeColor : "rgba(251,220,60,0.75)",
4624pointColor : "rgba(251,220,60,0.75)",
4625data : [0.886180,0.878114,0.906405,0.924929,0.935425,0.985997,0.977642,0.989315,1.032897,1.150846,1.088787,1.070562,1.085806,1.126069,1.141612,1.172398,1.163893,1.166351,1.198166,1.201231]
4626},
4627{
4628fillColor : "rgba(255,61,107,0.75)",
4629strokeColor : "rgba(255,61,107,0.75)",
4630pointColor : "rgba(255,61,107,0.75)",
4631data : [0.858010,0.882254,0.893414,0.920434,0.944201,0.935145,0.946809,0.975474,0.986194,1.007877,1.021690,1.040514,1.056225,1.087226,1.115115,1.100760,1.141939,1.161454,1.184632,1.213353]
4632}
4633]
4634}
4635var pieData25 = [
4636{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4637var Chartopt = {datasetFill : false}
4638var myLine = new Chart(document.getElementById("canvas25").getContext("2d")).Bar(ChartData25);
4639</script>
4640<div style="float: left;width=705px">
4641<canvas id="canvas26" height="250" width="705px"></canvas>
4642</div><div class="chart-legend" style="float: left;width: 235px">
4643<ul><style>#id65562:before { background-color: rgba(52,255,54,0.75);}</style>
4644<li id="id65562">A</li><style>#id131098:before { background-color: rgba(57,124,214,0.75);}</style>
4645<li id="id131098">C</li><style>#id196634:before { background-color: rgba(251,220,60,0.75);}</style>
4646<li id="id196634">G</li><style>#id262170:before { background-color: rgba(255,61,107,0.75);}</style>
4647<li id="id262170">T</li></ul></div><div style="clear:both;"></div><script>
4648var ChartData26 = {
4649labels : ["81nt","82nt","83nt","84nt","85nt","86nt","87nt","88nt","89nt","90nt","91nt","92nt","93nt","94nt","95nt","96nt","97nt","98nt","99nt","100nt"],
4650datasets : [
4651{
4652fillColor : "rgba(52,255,54,0.75)",
4653strokeColor : "rgba(52,255,54,0.75)",
4654pointColor : "rgba(52,255,54,0.75)",
4655data : [0.336753,0.339324,0.345006,0.328688,0.347174,0.336277,0.336557,0.338221,0.341352,0.337679,0.338417,0.346053,0.339118,0.329463,0.325444,0.346352,0.334940,0.337015,0.328043,0.333809]
4656},
4657{
4658fillColor : "rgba(57,124,214,0.75)",
4659strokeColor : "rgba(57,124,214,0.75)",
4660pointColor : "rgba(57,124,214,0.75)",
4661data : [1.221653,1.241943,1.218727,1.251037,1.282908,1.303890,1.287721,1.301955,1.313395,1.345770,1.365491,1.384959,1.386660,1.386380,1.415175,1.443317,1.430681,1.438588,1.465346,1.501161]
4662},
4663{
4664fillColor : "rgba(251,220,60,0.75)",
4665strokeColor : "rgba(251,220,60,0.75)",
4666pointColor : "rgba(251,220,60,0.75)",
4667data : [1.229064,1.239074,1.359509,1.259832,1.305759,1.318171,1.314451,1.305348,1.355556,1.361136,1.397978,1.399436,1.383314,1.414755,1.440307,1.496394,1.458504,1.477739,1.510918,1.533106]
4668},
4669{
4670fillColor : "rgba(255,61,107,0.75)",
4671strokeColor : "rgba(255,61,107,0.75)",
4672pointColor : "rgba(255,61,107,0.75)",
4673data : [1.206119,1.231027,1.261346,1.295656,1.315900,1.308909,1.337807,1.378034,1.407867,1.439373,1.426578,1.452439,1.503170,1.527956,1.556284,1.543387,1.564883,1.615773,1.644784,1.677598]
4674}
4675]
4676}
4677var pieData26 = [
4678{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4679var Chartopt = {datasetFill : false}
4680var myLine = new Chart(document.getElementById("canvas26").getContext("2d")).Bar(ChartData26);
4681</script>
4682<div style="float: left;width=705px">
4683<canvas id="canvas27" height="250" width="705px"></canvas>
4684</div><div class="chart-legend" style="float: left;width: 235px">
4685<ul><style>#id65563:before { background-color: rgba(52,255,54,0.75);}</style>
4686<li id="id65563">A</li><style>#id131099:before { background-color: rgba(57,124,214,0.75);}</style>
4687<li id="id131099">C</li><style>#id196635:before { background-color: rgba(251,220,60,0.75);}</style>
4688<li id="id196635">G</li><style>#id262171:before { background-color: rgba(255,61,107,0.75);}</style>
4689<li id="id262171">T</li></ul></div><div style="clear:both;"></div><script>
4690var ChartData27 = {
4691labels : ["101nt","102nt","103nt","104nt","105nt","106nt","107nt","108nt","109nt","110nt","111nt","112nt","113nt","114nt","115nt","116nt","117nt","118nt","119nt","120nt"],
4692datasets : [
4693{
4694fillColor : "rgba(52,255,54,0.75)",
4695strokeColor : "rgba(52,255,54,0.75)",
4696pointColor : "rgba(52,255,54,0.75)",
4697data : [0.341305,0.334510,0.339137,0.331903,0.338436,0.327033,0.325744,0.334725,0.330772,0.335950,0.321183,0.322846,0.324893,0.321295,0.323454,0.326052,0.324566,0.318594,0.321360,0.326762]
4698},
4699{
4700fillColor : "rgba(57,124,214,0.75)",
4701strokeColor : "rgba(57,124,214,0.75)",
4702pointColor : "rgba(57,124,214,0.75)",
4703data : [1.525377,1.520918,1.520965,1.541153,1.568650,1.582061,1.579314,1.582071,1.636045,1.644961,1.673598,1.680916,1.690907,1.698852,1.754779,1.785902,1.795239,1.788762,1.835250,1.871439]
4704},
4705{
4706fillColor : "rgba(251,220,60,0.75)",
4707strokeColor : "rgba(251,220,60,0.75)",
4708pointColor : "rgba(251,220,60,0.75)",
4709data : [1.580753,1.570033,1.564902,1.589436,1.634017,1.642802,1.653831,1.633802,1.683823,1.713450,1.756677,1.718703,1.725797,1.777117,1.793809,1.846139,1.830512,1.831372,1.852185,1.889150]
4710},
4711{
4712fillColor : "rgba(255,61,107,0.75)",
4713strokeColor : "rgba(255,61,107,0.75)",
4714pointColor : "rgba(255,61,107,0.75)",
4715data : [1.656719,1.705861,1.737227,1.768397,1.788893,1.757097,1.788314,1.844101,1.879738,1.927591,1.880234,1.938040,1.979789,2.016184,2.046250,2.015342,2.073494,2.120328,2.163330,2.207884]
4716}
4717]
4718}
4719var pieData27 = [
4720{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4721var Chartopt = {datasetFill : false}
4722var myLine = new Chart(document.getElementById("canvas27").getContext("2d")).Bar(ChartData27);
4723</script>
4724<div style="float: left;width=705px">
4725<canvas id="canvas28" height="250" width="705px"></canvas>
4726</div><div class="chart-legend" style="float: left;width: 235px">
4727<ul><style>#id65564:before { background-color: rgba(52,255,54,0.75);}</style>
4728<li id="id65564">A</li><style>#id131100:before { background-color: rgba(57,124,214,0.75);}</style>
4729<li id="id131100">C</li><style>#id196636:before { background-color: rgba(251,220,60,0.75);}</style>
4730<li id="id196636">G</li><style>#id262172:before { background-color: rgba(255,61,107,0.75);}</style>
4731<li id="id262172">T</li></ul></div><div style="clear:both;"></div><script>
4732var ChartData28 = {
4733labels : ["121nt","122nt","123nt","124nt","125nt","126nt","127nt","128nt","129nt","130nt","131nt","132nt","133nt","134nt","135nt","136nt","137nt","138nt","139nt","140nt"],
4734datasets : [
4735{
4736fillColor : "rgba(52,255,54,0.75)",
4737strokeColor : "rgba(52,255,54,0.75)",
4738pointColor : "rgba(52,255,54,0.75)",
4739data : [0.324267,0.333174,0.322902,0.325052,0.322650,0.310519,0.330239,0.325613,0.322295,0.307070,0.303584,0.318267,0.306088,0.304939,0.298817,0.290462,0.281863,0.293789,0.288770,0.277293]
4740},
4741{
4742fillColor : "rgba(57,124,214,0.75)",
4743strokeColor : "rgba(57,124,214,0.75)",
4744pointColor : "rgba(57,124,214,0.75)",
4745data : [1.913693,1.889262,1.880692,1.941330,1.966172,1.991407,2.010080,2.006043,2.064382,2.101505,2.143638,2.142656,2.146030,2.207080,2.241941,2.296925,2.297813,2.286364,2.388312,2.443240]
4746},
4747{
4748fillColor : "rgba(251,220,60,0.75)",
4749strokeColor : "rgba(251,220,60,0.75)",
4750pointColor : "rgba(251,220,60,0.75)",
4751data : [1.949489,1.940087,1.897309,1.969097,2.004800,2.045690,2.043586,2.025436,2.077196,2.124572,2.185378,2.165480,2.128329,2.213192,2.276999,2.322758,2.309505,2.311617,2.384695,2.427492]
4752},
4753{
4754fillColor : "rgba(255,61,107,0.75)",
4755strokeColor : "rgba(255,61,107,0.75)",
4756pointColor : "rgba(255,61,107,0.75)",
4757data : [2.178901,2.209772,2.278242,2.351797,2.381153,2.353114,2.388125,2.471858,2.537113,2.577760,2.523197,2.611332,2.695588,2.761020,2.833706,2.752104,2.858922,2.953188,3.048108,3.119495]
4758}
4759]
4760}
4761var pieData28 = [
4762{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4763var Chartopt = {datasetFill : false}
4764var myLine = new Chart(document.getElementById("canvas28").getContext("2d")).Bar(ChartData28);
4765</script>
4766<div style="float: left;width=352px">
4767<canvas id="canvas29" height="250" width="352px"></canvas>
4768</div><div class="chart-legend" style="float: left;width: 235px">
4769<ul><style>#id65565:before { background-color: rgba(52,255,54,0.75);}</style>
4770<li id="id65565">A</li><style>#id131101:before { background-color: rgba(57,124,214,0.75);}</style>
4771<li id="id131101">C</li><style>#id196637:before { background-color: rgba(251,220,60,0.75);}</style>
4772<li id="id196637">G</li><style>#id262173:before { background-color: rgba(255,61,107,0.75);}</style>
4773<li id="id262173">T</li></ul></div><div style="clear:both;"></div><script>
4774var ChartData29 = {
4775labels : ["141nt","142nt","143nt","144nt","145nt","146nt","147nt","148nt","149nt","150nt"],
4776datasets : [
4777{
4778fillColor : "rgba(52,255,54,0.75)",
4779strokeColor : "rgba(52,255,54,0.75)",
4780pointColor : "rgba(52,255,54,0.75)",
4781data : [0.272414,0.256918,0.270442,0.256198,0.237609,0.218356,0.199448,0.208766,0.198345,0.064732]
4782},
4783{
4784fillColor : "rgba(57,124,214,0.75)",
4785strokeColor : "rgba(57,124,214,0.75)",
4786pointColor : "rgba(57,124,214,0.75)",
4787data : [2.502794,2.513636,2.523440,2.659231,2.733945,2.819780,2.812397,2.770722,2.778404,2.504495]
4788},
4789{
4790fillColor : "rgba(251,220,60,0.75)",
4791strokeColor : "rgba(251,220,60,0.75)",
4792pointColor : "rgba(251,220,60,0.75)",
4793data : [2.569274,2.518776,2.539786,2.597350,2.689887,2.789928,2.803013,2.750207,2.700522,2.240558]
4794},
4795{
4796fillColor : "rgba(255,61,107,0.75)",
4797strokeColor : "rgba(255,61,107,0.75)",
4798pointColor : "rgba(255,61,107,0.75)",
4799data : [3.050117,3.187189,3.322821,3.447322,3.536943,3.529438,3.756168,3.897754,4.006908,3.456640]
4800}
4801]
4802}
4803var pieData29 = [
4804{ value: 0.367811, color:"rgba(52,255,54,0.75)"},{ value: 0.344772, color:"rgba(57,124,214,0.75)"},{ value: 0.439664, color:"rgba(251,220,60,0.75)"},{ value: 0.187242, color:"rgba(255,61,107,0.75)"}];
4805var Chartopt = {datasetFill : false}
4806var myLine = new Chart(document.getElementById("canvas29").getContext("2d")).Bar(ChartData29);
4807</script>
4808<p>Distribution of Mismatches in MAPQ < 30 reads.</p>
4809<section>
4810<h2>Distribution of Mismatches (MAPQ < 20):</h2>
4811<div style="float: left;width=705px">
4812<canvas id="canvas30" height="250" width="705px"></canvas>
4813</div><div class="chart-legend" style="float: left;width: 235px">
4814<ul><style>#id65566:before { background-color: rgba(52,255,54,0.75);}</style>
4815<li id="id65566">A</li><style>#id131102:before { background-color: rgba(57,124,214,0.75);}</style>
4816<li id="id131102">C</li><style>#id196638:before { background-color: rgba(251,220,60,0.75);}</style>
4817<li id="id196638">G</li><style>#id262174:before { background-color: rgba(255,61,107,0.75);}</style>
4818<li id="id262174">T</li></ul></div><div style="clear:both;"></div><script>
4819var ChartData30 = {
4820labels : ["1nt","2nt","3nt","4nt","5nt","6nt","7nt","8nt","9nt","10nt","11nt","12nt","13nt","14nt","15nt","16nt","17nt","18nt","19nt","20nt"],
4821datasets : [
4822{
4823fillColor : "rgba(52,255,54,0.75)",
4824strokeColor : "rgba(52,255,54,0.75)",
4825pointColor : "rgba(52,255,54,0.75)",
4826data : [0.758477,0.601591,0.407095,0.366626,0.371027,0.627996,0.613750,0.630877,0.612934,0.602930,0.625365,0.637047,0.645917,0.640518,0.636480,0.631784,0.643489,0.650431,0.644329,0.625115]
4827},
4828{
4829fillColor : "rgba(57,124,214,0.75)",
4830strokeColor : "rgba(57,124,214,0.75)",
4831pointColor : "rgba(57,124,214,0.75)",
4832data : [0.665312,0.622302,0.397976,0.382006,0.362134,0.652495,0.642514,0.612571,0.601750,0.596306,0.654968,0.649093,0.636571,0.618764,0.637274,0.658938,0.656646,0.626363,0.619807,0.649841]
4833},
4834{
4835fillColor : "rgba(251,220,60,0.75)",
4836strokeColor : "rgba(251,220,60,0.75)",
4837pointColor : "rgba(251,220,60,0.75)",
4838data : [0.776148,0.624820,0.418256,0.385204,0.382437,0.697932,0.670507,0.646575,0.618469,0.622098,0.665675,0.678741,0.662499,0.630900,0.662136,0.652246,0.648616,0.646847,0.631603,0.667286]
4839},
4840{
4841fillColor : "rgba(255,61,107,0.75)",
4842strokeColor : "rgba(255,61,107,0.75)",
4843pointColor : "rgba(255,61,107,0.75)",
4844data : [0.440237,0.517659,0.379851,0.340562,0.316992,0.583035,0.562914,0.560487,0.578794,0.561054,0.607693,0.590136,0.597848,0.624094,0.603383,0.621531,0.600661,0.612049,0.615746,0.627996]
4845}
4846]
4847}
4848var pieData30 = [
4849{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
4850var Chartopt = {datasetFill : false}
4851var myLine = new Chart(document.getElementById("canvas30").getContext("2d")).Bar(ChartData30);
4852</script>
4853<div style="float: left;width=705px">
4854<canvas id="canvas31" height="250" width="705px"></canvas>
4855</div><div class="chart-legend" style="float: left;width: 235px">
4856<ul><style>#id65567:before { background-color: rgba(52,255,54,0.75);}</style>
4857<li id="id65567">A</li><style>#id131103:before { background-color: rgba(57,124,214,0.75);}</style>
4858<li id="id131103">C</li><style>#id196639:before { background-color: rgba(251,220,60,0.75);}</style>
4859<li id="id196639">G</li><style>#id262175:before { background-color: rgba(255,61,107,0.75);}</style>
4860<li id="id262175">T</li></ul></div><div style="clear:both;"></div><script>
4861var ChartData31 = {
4862labels : ["21nt","22nt","23nt","24nt","25nt","26nt","27nt","28nt","29nt","30nt","31nt","32nt","33nt","34nt","35nt","36nt","37nt","38nt","39nt","40nt"],
4863datasets : [
4864{
4865fillColor : "rgba(52,255,54,0.75)",
4866strokeColor : "rgba(52,255,54,0.75)",
4867pointColor : "rgba(52,255,54,0.75)",
4868data : [0.617697,0.614272,0.649864,0.625750,0.640087,0.613070,0.625297,0.635505,0.639928,0.634098,0.620397,0.616382,0.646552,0.632556,0.613773,0.608397,0.622824,0.640858,0.620306,0.610756]
4869},
4870{
4871fillColor : "rgba(57,124,214,0.75)",
4872strokeColor : "rgba(57,124,214,0.75)",
4873pointColor : "rgba(57,124,214,0.75)",
4874data : [0.673478,0.668079,0.684684,0.678083,0.704579,0.720163,0.753577,0.730189,0.736632,0.788398,0.801396,0.803256,0.853253,0.861714,0.911914,0.943990,0.990130,0.990176,1.036157,1.074948]
4875},
4876{
4877fillColor : "rgba(251,220,60,0.75)",
4878strokeColor : "rgba(251,220,60,0.75)",
4879pointColor : "rgba(251,220,60,0.75)",
4880data : [0.658144,0.670960,0.684344,0.686272,0.729010,0.732549,0.764080,0.750401,0.777078,0.837986,0.806386,0.823128,0.857336,0.891703,0.904361,0.911461,0.945215,1.005760,1.015923,1.085972]
4881},
4882{
4883fillColor : "rgba(255,61,107,0.75)",
4884strokeColor : "rgba(255,61,107,0.75)",
4885pointColor : "rgba(255,61,107,0.75)",
4886data : [0.622801,0.659028,0.671732,0.718552,0.724586,0.719256,0.774152,0.775490,0.815778,0.851460,0.829706,0.866409,0.916973,0.990085,1.042713,0.994123,1.050267,1.098176,1.160876,1.224597]
4887}
4888]
4889}
4890var pieData31 = [
4891{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
4892var Chartopt = {datasetFill : false}
4893var myLine = new Chart(document.getElementById("canvas31").getContext("2d")).Bar(ChartData31);
4894</script>
4895<div style="float: left;width=705px">
4896<canvas id="canvas32" height="250" width="705px"></canvas>
4897</div><div class="chart-legend" style="float: left;width: 235px">
4898<ul><style>#id65568:before { background-color: rgba(52,255,54,0.75);}</style>
4899<li id="id65568">A</li><style>#id131104:before { background-color: rgba(57,124,214,0.75);}</style>
4900<li id="id131104">C</li><style>#id196640:before { background-color: rgba(251,220,60,0.75);}</style>
4901<li id="id196640">G</li><style>#id262176:before { background-color: rgba(255,61,107,0.75);}</style>
4902<li id="id262176">T</li></ul></div><div style="clear:both;"></div><script>
4903var ChartData32 = {
4904labels : ["41nt","42nt","43nt","44nt","45nt","46nt","47nt","48nt","49nt","50nt","51nt","52nt","53nt","54nt","55nt","56nt","57nt","58nt","59nt","60nt"],
4905datasets : [
4906{
4907fillColor : "rgba(52,255,54,0.75)",
4908strokeColor : "rgba(52,255,54,0.75)",
4909pointColor : "rgba(52,255,54,0.75)",
4910data : [0.621077,0.606423,0.628903,0.589773,0.602862,0.598937,0.607217,0.617765,0.600797,0.588366,0.578385,0.579633,0.598597,0.576661,0.595013,0.579088,0.586234,0.599504,0.589455,0.569039]
4911},
4912{
4913fillColor : "rgba(57,124,214,0.75)",
4914strokeColor : "rgba(57,124,214,0.75)",
4915pointColor : "rgba(57,124,214,0.75)",
4916data : [1.137058,1.147787,1.149965,1.209716,1.250253,1.332371,1.342737,1.353626,1.420772,1.457203,1.516364,1.529907,1.540977,1.594716,1.686475,1.723224,1.757817,1.780366,1.843474,1.913501]
4917},
4918{
4919fillColor : "rgba(251,220,60,0.75)",
4920strokeColor : "rgba(251,220,60,0.75)",
4921pointColor : "rgba(251,220,60,0.75)",
4922data : [1.156816,1.164778,1.203795,1.231425,1.319486,1.344915,1.399086,1.437490,1.497627,1.559533,1.620780,1.622391,1.669892,1.745500,1.809288,1.848691,1.910030,1.917720,1.991648,2.024518]
4923},
4924{
4925fillColor : "rgba(255,61,107,0.75)",
4926strokeColor : "rgba(255,61,107,0.75)",
4927pointColor : "rgba(255,61,107,0.75)",
4928data : [1.212166,1.284484,1.323932,1.395728,1.458519,1.460016,1.494587,1.570444,1.618467,1.682323,1.648229,1.705167,1.772971,1.835080,1.887141,1.863890,1.917062,2.003966,2.068140,2.121358]
4929}
4930]
4931}
4932var pieData32 = [
4933{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
4934var Chartopt = {datasetFill : false}
4935var myLine = new Chart(document.getElementById("canvas32").getContext("2d")).Bar(ChartData32);
4936</script>
4937<div style="float: left;width=705px">
4938<canvas id="canvas33" height="250" width="705px"></canvas>
4939</div><div class="chart-legend" style="float: left;width: 235px">
4940<ul><style>#id65569:before { background-color: rgba(52,255,54,0.75);}</style>
4941<li id="id65569">A</li><style>#id131105:before { background-color: rgba(57,124,214,0.75);}</style>
4942<li id="id131105">C</li><style>#id196641:before { background-color: rgba(251,220,60,0.75);}</style>
4943<li id="id196641">G</li><style>#id262177:before { background-color: rgba(255,61,107,0.75);}</style>
4944<li id="id262177">T</li></ul></div><div style="clear:both;"></div><script>
4945var ChartData33 = {
4946labels : ["61nt","62nt","63nt","64nt","65nt","66nt","67nt","68nt","69nt","70nt","71nt","72nt","73nt","74nt","75nt","76nt","77nt","78nt","79nt","80nt"],
4947datasets : [
4948{
4949fillColor : "rgba(52,255,54,0.75)",
4950strokeColor : "rgba(52,255,54,0.75)",
4951pointColor : "rgba(52,255,54,0.75)",
4952data : [0.574483,0.580359,0.590862,0.564956,0.561077,0.570310,0.558491,0.563300,0.566499,0.550801,0.566045,0.560306,0.572397,0.557584,0.541319,0.558446,0.554317,0.550824,0.538506,0.546627]
4953},
4954{
4955fillColor : "rgba(57,124,214,0.75)",
4956strokeColor : "rgba(57,124,214,0.75)",
4957pointColor : "rgba(57,124,214,0.75)",
4958data : [1.978333,2.000632,2.020934,2.095226,2.169177,2.223007,2.244444,2.265631,2.355121,2.409178,2.491886,2.513028,2.534578,2.605784,2.667032,2.718050,2.732795,2.680802,2.772152,2.826209]
4959},
4960{
4961fillColor : "rgba(251,220,60,0.75)",
4962strokeColor : "rgba(251,220,60,0.75)",
4963pointColor : "rgba(251,220,60,0.75)",
4964data : [2.085222,2.091551,2.135831,2.194833,2.228973,2.322388,2.318554,2.338289,2.425330,2.479886,2.566563,2.538230,2.557240,2.638110,2.678057,2.747698,2.725989,2.717800,2.794814,2.815684]
4965},
4966{
4967fillColor : "rgba(255,61,107,0.75)",
4968strokeColor : "rgba(255,61,107,0.75)",
4969pointColor : "rgba(255,61,107,0.75)",
4970data : [2.096950,2.155544,2.219037,2.293397,2.342917,2.293873,2.359794,2.442343,2.480521,2.519175,2.481201,2.569625,2.616877,2.700469,2.769725,2.698201,2.786080,2.866837,2.900092,2.995934]
4971}
4972]
4973}
4974var pieData33 = [
4975{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
4976var Chartopt = {datasetFill : false}
4977var myLine = new Chart(document.getElementById("canvas33").getContext("2d")).Bar(ChartData33);
4978</script>
4979<div style="float: left;width=705px">
4980<canvas id="canvas34" height="250" width="705px"></canvas>
4981</div><div class="chart-legend" style="float: left;width: 235px">
4982<ul><style>#id65570:before { background-color: rgba(52,255,54,0.75);}</style>
4983<li id="id65570">A</li><style>#id131106:before { background-color: rgba(57,124,214,0.75);}</style>
4984<li id="id131106">C</li><style>#id196642:before { background-color: rgba(251,220,60,0.75);}</style>
4985<li id="id196642">G</li><style>#id262178:before { background-color: rgba(255,61,107,0.75);}</style>
4986<li id="id262178">T</li></ul></div><div style="clear:both;"></div><script>
4987var ChartData34 = {
4988labels : ["81nt","82nt","83nt","84nt","85nt","86nt","87nt","88nt","89nt","90nt","91nt","92nt","93nt","94nt","95nt","96nt","97nt","98nt","99nt","100nt"],
4989datasets : [
4990{
4991fillColor : "rgba(52,255,54,0.75)",
4992strokeColor : "rgba(52,255,54,0.75)",
4993pointColor : "rgba(52,255,54,0.75)",
4994data : [0.547013,0.537576,0.549871,0.529092,0.529659,0.524464,0.535194,0.534899,0.526211,0.508767,0.518067,0.524555,0.524736,0.511738,0.499602,0.523353,0.517568,0.516910,0.505886,0.505114]
4995},
4996{
4997fillColor : "rgba(57,124,214,0.75)",
4998strokeColor : "rgba(57,124,214,0.75)",
4999pointColor : "rgba(57,124,214,0.75)",
5000data : [2.864115,2.877113,2.817339,2.907056,2.959934,2.998203,3.005212,2.994301,3.055503,3.129114,3.168676,3.185984,3.125303,3.214975,3.242128,3.307777,3.296662,3.238635,3.339059,3.381411]
5001},
5002{
5003fillColor : "rgba(251,220,60,0.75)",
5004strokeColor : "rgba(251,220,60,0.75)",
5005pointColor : "rgba(251,220,60,0.75)",
5006data : [2.891087,2.863253,2.885121,2.939382,3.015420,3.041711,3.019957,3.004327,3.102029,3.138279,3.220465,3.194468,3.167428,3.242151,3.334023,3.388761,3.339376,3.299293,3.441660,3.491249]
5007},
5008{
5009fillColor : "rgba(255,61,107,0.75)",
5010strokeColor : "rgba(255,61,107,0.75)",
5011pointColor : "rgba(255,61,107,0.75)",
5012data : [2.920168,3.007208,3.078007,3.173893,3.192313,3.156789,3.223278,3.328738,3.403324,3.489434,3.431974,3.548686,3.668890,3.747606,3.805088,3.725897,3.777912,3.935093,3.977149,4.073037]
5013}
5014]
5015}
5016var pieData34 = [
5017{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
5018var Chartopt = {datasetFill : false}
5019var myLine = new Chart(document.getElementById("canvas34").getContext("2d")).Bar(ChartData34);
5020</script>
5021<div style="float: left;width=705px">
5022<canvas id="canvas35" height="250" width="705px"></canvas>
5023</div><div class="chart-legend" style="float: left;width: 235px">
5024<ul><style>#id65571:before { background-color: rgba(52,255,54,0.75);}</style>
5025<li id="id65571">A</li><style>#id131107:before { background-color: rgba(57,124,214,0.75);}</style>
5026<li id="id131107">C</li><style>#id196643:before { background-color: rgba(251,220,60,0.75);}</style>
5027<li id="id196643">G</li><style>#id262179:before { background-color: rgba(255,61,107,0.75);}</style>
5028<li id="id262179">T</li></ul></div><div style="clear:both;"></div><script>
5029var ChartData35 = {
5030labels : ["101nt","102nt","103nt","104nt","105nt","106nt","107nt","108nt","109nt","110nt","111nt","112nt","113nt","114nt","115nt","116nt","117nt","118nt","119nt","120nt"],
5031datasets : [
5032{
5033fillColor : "rgba(52,255,54,0.75)",
5034strokeColor : "rgba(52,255,54,0.75)",
5035pointColor : "rgba(52,255,54,0.75)",
5036data : [0.514982,0.516026,0.519020,0.494362,0.498423,0.494838,0.494022,0.500305,0.484721,0.486559,0.480207,0.484404,0.482861,0.470748,0.466755,0.488804,0.473719,0.482022,0.473991,0.465575]
5037},
5038{
5039fillColor : "rgba(57,124,214,0.75)",
5040strokeColor : "rgba(57,124,214,0.75)",
5041pointColor : "rgba(57,124,214,0.75)",
5042data : [3.449918,3.425918,3.378575,3.462122,3.521170,3.558054,3.555945,3.496512,3.625677,3.676535,3.738305,3.725806,3.720656,3.740324,3.864703,3.906669,3.921323,3.855334,3.997407,4.054572]
5043},
5044{
5045fillColor : "rgba(251,220,60,0.75)",
5046strokeColor : "rgba(251,220,60,0.75)",
5047pointColor : "rgba(251,220,60,0.75)",
5048data : [3.589835,3.523461,3.497895,3.586002,3.684361,3.750464,3.719477,3.633911,3.774940,3.839296,3.917308,3.820899,3.807629,3.953036,4.003418,4.090685,4.020295,4.017823,4.063033,4.141453]
5049},
5050{
5051fillColor : "rgba(255,61,107,0.75)",
5052strokeColor : "rgba(255,61,107,0.75)",
5053pointColor : "rgba(255,61,107,0.75)",
5054data : [3.920007,4.074987,4.144152,4.272932,4.302603,4.161733,4.242716,4.408993,4.481538,4.574068,4.411670,4.560956,4.637425,4.778908,4.821692,4.639331,4.810371,4.932936,5.074554,5.143697]
5055}
5056]
5057}
5058var pieData35 = [
5059{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
5060var Chartopt = {datasetFill : false}
5061var myLine = new Chart(document.getElementById("canvas35").getContext("2d")).Bar(ChartData35);
5062</script>
5063<div style="float: left;width=705px">
5064<canvas id="canvas36" height="250" width="705px"></canvas>
5065</div><div class="chart-legend" style="float: left;width: 235px">
5066<ul><style>#id65572:before { background-color: rgba(52,255,54,0.75);}</style>
5067<li id="id65572">A</li><style>#id131108:before { background-color: rgba(57,124,214,0.75);}</style>
5068<li id="id131108">C</li><style>#id196644:before { background-color: rgba(251,220,60,0.75);}</style>
5069<li id="id196644">G</li><style>#id262180:before { background-color: rgba(255,61,107,0.75);}</style>
5070<li id="id262180">T</li></ul></div><div style="clear:both;"></div><script>
5071var ChartData36 = {
5072labels : ["121nt","122nt","123nt","124nt","125nt","126nt","127nt","128nt","129nt","130nt","131nt","132nt","133nt","134nt","135nt","136nt","137nt","138nt","139nt","140nt"],
5073datasets : [
5074{
5075fillColor : "rgba(52,255,54,0.75)",
5076strokeColor : "rgba(52,255,54,0.75)",
5077pointColor : "rgba(52,255,54,0.75)",
5078data : [0.471473,0.464237,0.465621,0.461061,0.464736,0.459337,0.457250,0.444865,0.453689,0.431072,0.438604,0.436993,0.422656,0.433137,0.417575,0.404305,0.404736,0.414830,0.408138,0.392963]
5079},
5080{
5081fillColor : "rgba(57,124,214,0.75)",
5082strokeColor : "rgba(57,124,214,0.75)",
5083pointColor : "rgba(57,124,214,0.75)",
5084data : [4.124576,4.111328,4.035471,4.185506,4.238633,4.309726,4.324199,4.257869,4.380819,4.476434,4.553108,4.549410,4.507013,4.660314,4.733721,4.856784,4.843400,4.752254,4.976898,5.103432]
5085},
5086{
5087fillColor : "rgba(251,220,60,0.75)",
5088strokeColor : "rgba(251,220,60,0.75)",
5089pointColor : "rgba(251,220,60,0.75)",
5090data : [4.298701,4.194920,4.152205,4.297704,4.392615,4.516767,4.460668,4.357363,4.519285,4.615467,4.753161,4.663626,4.580488,4.801456,4.886546,5.038168,4.969095,4.904263,5.130018,5.183440]
5091},
5092{
5093fillColor : "rgba(255,61,107,0.75)",
5094strokeColor : "rgba(255,61,107,0.75)",
5095pointColor : "rgba(255,61,107,0.75)",
5096data : [4.958161,5.062260,5.255054,5.393884,5.450572,5.302964,5.370995,5.586951,5.736214,5.818468,5.611700,5.800321,6.015800,6.146689,6.331749,6.014757,6.270638,6.531645,6.673195,6.873794]
5097}
5098]
5099}
5100var pieData36 = [
5101{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
5102var Chartopt = {datasetFill : false}
5103var myLine = new Chart(document.getElementById("canvas36").getContext("2d")).Bar(ChartData36);
5104</script>
5105<div style="float: left;width=352px">
5106<canvas id="canvas37" height="250" width="352px"></canvas>
5107</div><div class="chart-legend" style="float: left;width: 235px">
5108<ul><style>#id65573:before { background-color: rgba(52,255,54,0.75);}</style>
5109<li id="id65573">A</li><style>#id131109:before { background-color: rgba(57,124,214,0.75);}</style>
5110<li id="id131109">C</li><style>#id196645:before { background-color: rgba(251,220,60,0.75);}</style>
5111<li id="id196645">G</li><style>#id262181:before { background-color: rgba(255,61,107,0.75);}</style>
5112<li id="id262181">T</li></ul></div><div style="clear:both;"></div><script>
5113var ChartData37 = {
5114labels : ["141nt","142nt","143nt","144nt","145nt","146nt","147nt","148nt","149nt","150nt"],
5115datasets : [
5116{
5117fillColor : "rgba(52,255,54,0.75)",
5118strokeColor : "rgba(52,255,54,0.75)",
5119pointColor : "rgba(52,255,54,0.75)",
5120data : [0.380600,0.377582,0.376380,0.366739,0.339495,0.306353,0.327246,0.368418,0.431345,0.152507]
5121},
5122{
5123fillColor : "rgba(57,124,214,0.75)",
5124strokeColor : "rgba(57,124,214,0.75)",
5125pointColor : "rgba(57,124,214,0.75)",
5126data : [5.237996,5.253580,5.191402,5.493627,5.671587,5.830582,5.860866,5.767179,5.878378,5.343388]
5127},
5128{
5129fillColor : "rgba(251,220,60,0.75)",
5130strokeColor : "rgba(251,220,60,0.75)",
5131pointColor : "rgba(251,220,60,0.75)",
5132data : [5.495033,5.366050,5.365369,5.504243,5.698241,5.884911,5.910862,5.798846,5.851066,4.872323]
5133},
5134{
5135fillColor : "rgba(255,61,107,0.75)",
5136strokeColor : "rgba(255,61,107,0.75)",
5137pointColor : "rgba(255,61,107,0.75)",
5138data : [6.553013,6.907979,7.185342,7.552694,7.654615,7.483801,7.964280,8.363640,8.811135,7.501586]
5139}
5140]
5141}
5142var pieData37 = [
5143{ value: 0.758477, color:"rgba(52,255,54,0.75)"},{ value: 0.665312, color:"rgba(57,124,214,0.75)"},{ value: 0.776148, color:"rgba(251,220,60,0.75)"},{ value: 0.440237, color:"rgba(255,61,107,0.75)"}];
5144var Chartopt = {datasetFill : false}
5145var myLine = new Chart(document.getElementById("canvas37").getContext("2d")).Bar(ChartData37);
5146</script>
5147<p>Distribution of Mismatches in MAPQ < 20 reads.</p>
5148<section>
5149<h2>Distribution of Mismatches (MAPQ < 10):</h2>
5150<div style="float: left;width=705px">
5151<canvas id="canvas38" height="250" width="705px"></canvas>
5152</div><div class="chart-legend" style="float: left;width: 235px">
5153<ul><style>#id65574:before { background-color: rgba(52,255,54,0.75);}</style>
5154<li id="id65574">A</li><style>#id131110:before { background-color: rgba(57,124,214,0.75);}</style>
5155<li id="id131110">C</li><style>#id196646:before { background-color: rgba(251,220,60,0.75);}</style>
5156<li id="id196646">G</li><style>#id262182:before { background-color: rgba(255,61,107,0.75);}</style>
5157<li id="id262182">T</li></ul></div><div style="clear:both;"></div><script>
5158var ChartData38 = {
5159labels : ["1nt","2nt","3nt","4nt","5nt","6nt","7nt","8nt","9nt","10nt","11nt","12nt","13nt","14nt","15nt","16nt","17nt","18nt","19nt","20nt"],
5160datasets : [
5161{
5162fillColor : "rgba(52,255,54,0.75)",
5163strokeColor : "rgba(52,255,54,0.75)",
5164pointColor : "rgba(52,255,54,0.75)",
5165data : [0.623371,0.514293,0.573360,0.458506,0.389841,0.646955,0.641634,0.666282,0.643697,0.679680,0.674599,0.674273,0.680484,0.684762,0.676401,0.654903,0.655120,0.666607,0.665044,0.679550]
5166},
5167{
5168fillColor : "rgba(57,124,214,0.75)",
5169strokeColor : "rgba(57,124,214,0.75)",
5170pointColor : "rgba(57,124,214,0.75)",
5171data : [0.533229,0.521351,0.526693,0.437854,0.381849,0.662308,0.662090,0.632275,0.627041,0.624305,0.681287,0.680484,0.652449,0.638333,0.643437,0.686217,0.673600,0.651102,0.647063,0.661895]
5172},
5173{
5174fillColor : "rgba(251,220,60,0.75)",
5175strokeColor : "rgba(251,220,60,0.75)",
5176pointColor : "rgba(251,220,60,0.75)",
5177data : [0.642981,0.503609,0.573946,0.448256,0.410036,0.714534,0.711255,0.670972,0.649973,0.690516,0.715142,0.736119,0.709843,0.681743,0.702069,0.754556,0.703090,0.731733,0.688562,0.714490]
5178},
5179{
5180fillColor : "rgba(255,61,107,0.75)",
5181strokeColor : "rgba(255,61,107,0.75)",
5182pointColor : "rgba(255,61,107,0.75)",
5183data : [0.332294,0.420503,0.527279,0.399243,0.332663,0.586324,0.593121,0.585391,0.581829,0.607475,0.609321,0.596770,0.607888,0.628474,0.626737,0.622872,0.613187,0.636640,0.620765,0.674164]
5184}
5185]
5186}
5187var pieData38 = [
5188{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5189var Chartopt = {datasetFill : false}
5190var myLine = new Chart(document.getElementById("canvas38").getContext("2d")).Bar(ChartData38);
5191</script>
5192<div style="float: left;width=705px">
5193<canvas id="canvas39" height="250" width="705px"></canvas>
5194</div><div class="chart-legend" style="float: left;width: 235px">
5195<ul><style>#id65575:before { background-color: rgba(52,255,54,0.75);}</style>
5196<li id="id65575">A</li><style>#id131111:before { background-color: rgba(57,124,214,0.75);}</style>
5197<li id="id131111">C</li><style>#id196647:before { background-color: rgba(251,220,60,0.75);}</style>
5198<li id="id196647">G</li><style>#id262183:before { background-color: rgba(255,61,107,0.75);}</style>
5199<li id="id262183">T</li></ul></div><div style="clear:both;"></div><script>
5200var ChartData39 = {
5201labels : ["21nt","22nt","23nt","24nt","25nt","26nt","27nt","28nt","29nt","30nt","31nt","32nt","33nt","34nt","35nt","36nt","37nt","38nt","39nt","40nt"],
5202datasets : [
5203{
5204fillColor : "rgba(52,255,54,0.75)",
5205strokeColor : "rgba(52,255,54,0.75)",
5206pointColor : "rgba(52,255,54,0.75)",
5207data : [0.660288,0.669778,0.688432,0.660657,0.665912,0.645478,0.665435,0.662308,0.691993,0.670755,0.653165,0.653426,0.670256,0.672970,0.651993,0.645283,0.657443,0.654447,0.644588,0.627497]
5208},
5209{
5210fillColor : "rgba(57,124,214,0.75)",
5211strokeColor : "rgba(57,124,214,0.75)",
5212pointColor : "rgba(57,124,214,0.75)",
5213data : [0.711494,0.699420,0.698486,0.707954,0.719615,0.742004,0.741570,0.728258,0.747563,0.778226,0.804806,0.813167,0.839443,0.840029,0.901810,0.937837,0.979922,0.964656,1.004200,1.063723]
5214},
5215{
5216fillColor : "rgba(251,220,60,0.75)",
5217strokeColor : "rgba(251,220,60,0.75)",
5218pointColor : "rgba(251,220,60,0.75)",
5219data : [0.726890,0.738790,0.721852,0.717357,0.769931,0.759442,0.785371,0.773644,0.796315,0.855729,0.823199,0.850518,0.850843,0.925741,0.929498,0.943331,0.968000,1.004200,1.029390,1.090042]
5220},
5221{
5222fillColor : "rgba(255,61,107,0.75)",
5223strokeColor : "rgba(255,61,107,0.75)",
5224pointColor : "rgba(255,61,107,0.75)",
5225data : [0.653795,0.682004,0.690885,0.716553,0.739051,0.716423,0.746630,0.752124,0.768910,0.817314,0.792298,0.834709,0.869280,0.932299,0.987327,0.952343,1.006306,1.051736,1.113169,1.190238]
5226}
5227]
5228}
5229var pieData39 = [
5230{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5231var Chartopt = {datasetFill : false}
5232var myLine = new Chart(document.getElementById("canvas39").getContext("2d")).Bar(ChartData39);
5233</script>
5234<div style="float: left;width=705px">
5235<canvas id="canvas40" height="250" width="705px"></canvas>
5236</div><div class="chart-legend" style="float: left;width: 235px">
5237<ul><style>#id65576:before { background-color: rgba(52,255,54,0.75);}</style>
5238<li id="id65576">A</li><style>#id131112:before { background-color: rgba(57,124,214,0.75);}</style>
5239<li id="id131112">C</li><style>#id196648:before { background-color: rgba(251,220,60,0.75);}</style>
5240<li id="id196648">G</li><style>#id262184:before { background-color: rgba(255,61,107,0.75);}</style>
5241<li id="id262184">T</li></ul></div><div style="clear:both;"></div><script>
5242var ChartData40 = {
5243labels : ["41nt","42nt","43nt","44nt","45nt","46nt","47nt","48nt","49nt","50nt","51nt","52nt","53nt","54nt","55nt","56nt","57nt","58nt","59nt","60nt"],
5244datasets : [
5245{
5246fillColor : "rgba(52,255,54,0.75)",
5247strokeColor : "rgba(52,255,54,0.75)",
5248pointColor : "rgba(52,255,54,0.75)",
5249data : [0.641678,0.625304,0.647280,0.602698,0.624088,0.606715,0.632600,0.638008,0.619919,0.597964,0.596661,0.596292,0.610581,0.594142,0.597247,0.609473,0.609061,0.611580,0.603241,0.594576]
5250},
5251{
5252fillColor : "rgba(57,124,214,0.75)",
5253strokeColor : "rgba(57,124,214,0.75)",
5254pointColor : "rgba(57,124,214,0.75)",
5255data : [1.127089,1.153083,1.133169,1.198099,1.259685,1.329762,1.341141,1.343551,1.411760,1.459383,1.531001,1.529481,1.533043,1.614781,1.674825,1.715520,1.747507,1.762534,1.840385,1.908116]
5256},
5257{
5258fillColor : "rgba(251,220,60,0.75)",
5259strokeColor : "rgba(251,220,60,0.75)",
5260pointColor : "rgba(251,220,60,0.75)",
5261data : [1.171693,1.183485,1.186894,1.226721,1.316819,1.351673,1.397471,1.457646,1.493976,1.581577,1.609395,1.622381,1.634129,1.736475,1.818669,1.845119,1.907747,1.896281,1.988139,2.031874]
5262},
5263{
5264fillColor : "rgba(255,61,107,0.75)",
5265strokeColor : "rgba(255,61,107,0.75)",
5266pointColor : "rgba(255,61,107,0.75)",
5267data : [1.158664,1.232454,1.265570,1.334865,1.386201,1.398427,1.429350,1.517624,1.574954,1.618928,1.574281,1.632783,1.715585,1.778669,1.823621,1.767507,1.855673,1.935500,1.991027,2.060561]
5268}
5269]
5270}
5271var pieData40 = [
5272{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5273var Chartopt = {datasetFill : false}
5274var myLine = new Chart(document.getElementById("canvas40").getContext("2d")).Bar(ChartData40);
5275</script>
5276<div style="float: left;width=705px">
5277<canvas id="canvas41" height="250" width="705px"></canvas>
5278</div><div class="chart-legend" style="float: left;width: 235px">
5279<ul><style>#id65577:before { background-color: rgba(52,255,54,0.75);}</style>
5280<li id="id65577">A</li><style>#id131113:before { background-color: rgba(57,124,214,0.75);}</style>
5281<li id="id131113">C</li><style>#id196649:before { background-color: rgba(251,220,60,0.75);}</style>
5282<li id="id196649">G</li><style>#id262185:before { background-color: rgba(255,61,107,0.75);}</style>
5283<li id="id262185">T</li></ul></div><div style="clear:both;"></div><script>
5284var ChartData41 = {
5285labels : ["61nt","62nt","63nt","64nt","65nt","66nt","67nt","68nt","69nt","70nt","71nt","72nt","73nt","74nt","75nt","76nt","77nt","78nt","79nt","80nt"],
5286datasets : [
5287{
5288fillColor : "rgba(52,255,54,0.75)",
5289strokeColor : "rgba(52,255,54,0.75)",
5290pointColor : "rgba(52,255,54,0.75)",
5291data : [0.592209,0.573013,0.586455,0.556074,0.561221,0.572101,0.563935,0.578811,0.580135,0.570168,0.588539,0.551297,0.593990,0.572274,0.557204,0.579527,0.550841,0.575532,0.580439,0.544304]
5292},
5293{
5294fillColor : "rgba(57,124,214,0.75)",
5295strokeColor : "rgba(57,124,214,0.75)",
5296pointColor : "rgba(57,124,214,0.75)",
5297data : [1.987357,1.990984,1.979713,2.050941,2.134177,2.225470,2.233201,2.216110,2.308402,2.373007,2.469207,2.479783,2.460347,2.566320,2.613052,2.687081,2.662716,2.619784,2.713531,2.745952]
5298},
5299{
5300fillColor : "rgba(251,220,60,0.75)",
5301strokeColor : "rgba(251,220,60,0.75)",
5302pointColor : "rgba(251,220,60,0.75)",
5303data : [2.126338,2.061256,2.135675,2.188879,2.238413,2.352637,2.320454,2.313028,2.414983,2.464408,2.567536,2.553725,2.533464,2.625604,2.696592,2.780046,2.745279,2.712032,2.849471,2.857093]
5304},
5305{
5306fillColor : "rgba(255,61,107,0.75)",
5307strokeColor : "rgba(255,61,107,0.75)",
5308pointColor : "rgba(255,61,107,0.75)",
5309data : [1.980365,2.072417,2.148184,2.207229,2.271247,2.179672,2.218130,2.345428,2.375373,2.439913,2.340107,2.451596,2.532226,2.601521,2.659437,2.524669,2.676896,2.768819,2.826127,2.901545]
5310}
5311]
5312}
5313var pieData41 = [
5314{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5315var Chartopt = {datasetFill : false}
5316var myLine = new Chart(document.getElementById("canvas41").getContext("2d")).Bar(ChartData41);
5317</script>
5318<div style="float: left;width=705px">
5319<canvas id="canvas42" height="250" width="705px"></canvas>
5320</div><div class="chart-legend" style="float: left;width: 235px">
5321<ul><style>#id65578:before { background-color: rgba(52,255,54,0.75);}</style>
5322<li id="id65578">A</li><style>#id131114:before { background-color: rgba(57,124,214,0.75);}</style>
5323<li id="id131114">C</li><style>#id196650:before { background-color: rgba(251,220,60,0.75);}</style>
5324<li id="id196650">G</li><style>#id262186:before { background-color: rgba(255,61,107,0.75);}</style>
5325<li id="id262186">T</li></ul></div><div style="clear:both;"></div><script>
5326var ChartData42 = {
5327labels : ["81nt","82nt","83nt","84nt","85nt","86nt","87nt","88nt","89nt","90nt","91nt","92nt","93nt","94nt","95nt","96nt","97nt","98nt","99nt","100nt"],
5328datasets : [
5329{
5330fillColor : "rgba(52,255,54,0.75)",
5331strokeColor : "rgba(52,255,54,0.75)",
5332pointColor : "rgba(52,255,54,0.75)",
5333data : [0.547084,0.566302,0.556899,0.521568,0.546519,0.544847,0.546519,0.535444,0.538202,0.539483,0.545673,0.542589,0.536465,0.519570,0.524065,0.547801,0.530211,0.536682,0.521915,0.522719]
5334},
5335{
5336fillColor : "rgba(57,124,214,0.75)",
5337strokeColor : "rgba(57,124,214,0.75)",
5338pointColor : "rgba(57,124,214,0.75)",
5339data : [2.805649,2.791664,2.752641,2.858440,2.913663,2.977203,2.951166,2.909298,3.012969,3.069560,3.130798,3.128952,3.062437,3.162416,3.209452,3.301027,3.260311,3.209626,3.310170,3.388890]
5340},
5341{
5342fillColor : "rgba(251,220,60,0.75)",
5343strokeColor : "rgba(251,220,60,0.75)",
5344pointColor : "rgba(251,220,60,0.75)",
5345data : [2.935053,2.921676,2.929559,2.982740,3.060743,3.136379,3.091145,3.048018,3.168192,3.221222,3.313471,3.267672,3.200028,3.324958,3.421333,3.498814,3.420334,3.382049,3.532430,3.604896]
5346},
5347{
5348fillColor : "rgba(255,61,107,0.75)",
5349strokeColor : "rgba(255,61,107,0.75)",
5350pointColor : "rgba(255,61,107,0.75)",
5351data : [2.774965,2.882197,2.980330,3.092839,3.145999,3.036378,3.126802,3.256423,3.358770,3.416577,3.286891,3.411452,3.562181,3.626698,3.688175,3.555145,3.664158,3.816950,3.905289,3.958189]
5352}
5353]
5354}
5355var pieData42 = [
5356{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5357var Chartopt = {datasetFill : false}
5358var myLine = new Chart(document.getElementById("canvas42").getContext("2d")).Bar(ChartData42);
5359</script>
5360<div style="float: left;width=705px">
5361<canvas id="canvas43" height="250" width="705px"></canvas>
5362</div><div class="chart-legend" style="float: left;width: 235px">
5363<ul><style>#id65579:before { background-color: rgba(52,255,54,0.75);}</style>
5364<li id="id65579">A</li><style>#id131115:before { background-color: rgba(57,124,214,0.75);}</style>
5365<li id="id131115">C</li><style>#id196651:before { background-color: rgba(251,220,60,0.75);}</style>
5366<li id="id196651">G</li><style>#id262187:before { background-color: rgba(255,61,107,0.75);}</style>
5367<li id="id262187">T</li></ul></div><div style="clear:both;"></div><script>
5368var ChartData43 = {
5369labels : ["101nt","102nt","103nt","104nt","105nt","106nt","107nt","108nt","109nt","110nt","111nt","112nt","113nt","114nt","115nt","116nt","117nt","118nt","119nt","120nt"],
5370datasets : [
5371{
5372fillColor : "rgba(52,255,54,0.75)",
5373strokeColor : "rgba(52,255,54,0.75)",
5374pointColor : "rgba(52,255,54,0.75)",
5375data : [0.517811,0.528604,0.519809,0.511036,0.529494,0.513859,0.500482,0.517637,0.494793,0.508560,0.505216,0.496052,0.522893,0.501481,0.493663,0.511818,0.503761,0.513729,0.485216,0.484521]
5376},
5377{
5378fillColor : "rgba(57,124,214,0.75)",
5379strokeColor : "rgba(57,124,214,0.75)",
5380pointColor : "rgba(57,124,214,0.75)",
5381data : [3.441268,3.433819,3.363091,3.459140,3.536665,3.599640,3.565264,3.512691,3.662942,3.718143,3.795994,3.754256,3.719663,3.817188,3.927005,4.005572,3.955539,3.863074,4.045833,4.122251]
5382},
5383{
5384fillColor : "rgba(251,220,60,0.75)",
5385strokeColor : "rgba(251,220,60,0.75)",
5386pointColor : "rgba(251,220,60,0.75)",
5387data : [3.722682,3.655776,3.598099,3.728567,3.813757,3.911695,3.865245,3.757036,3.917624,4.000599,4.134716,4.024660,3.967852,4.132066,4.217453,4.349484,4.263729,4.189200,4.322752,4.427074]
5388},
5389{
5390fillColor : "rgba(255,61,107,0.75)",
5391strokeColor : "rgba(255,61,107,0.75)",
5392pointColor : "rgba(255,61,107,0.75)",
5393data : [3.772823,3.938275,4.050198,4.153239,4.220449,4.002553,4.126659,4.320515,4.414848,4.520995,4.274673,4.469746,4.595762,4.731507,4.800541,4.552092,4.744905,4.940412,5.064257,5.172944]
5394}
5395]
5396}
5397var pieData43 = [
5398{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5399var Chartopt = {datasetFill : false}
5400var myLine = new Chart(document.getElementById("canvas43").getContext("2d")).Bar(ChartData43);
5401</script>
5402<div style="float: left;width=705px">
5403<canvas id="canvas44" height="250" width="705px"></canvas>
5404</div><div class="chart-legend" style="float: left;width: 235px">
5405<ul><style>#id65580:before { background-color: rgba(52,255,54,0.75);}</style>
5406<li id="id65580">A</li><style>#id131116:before { background-color: rgba(57,124,214,0.75);}</style>
5407<li id="id131116">C</li><style>#id196652:before { background-color: rgba(251,220,60,0.75);}</style>
5408<li id="id196652">G</li><style>#id262188:before { background-color: rgba(255,61,107,0.75);}</style>
5409<li id="id262188">T</li></ul></div><div style="clear:both;"></div><script>
5410var ChartData44 = {
5411labels : ["121nt","122nt","123nt","124nt","125nt","126nt","127nt","128nt","129nt","130nt","131nt","132nt","133nt","134nt","135nt","136nt","137nt","138nt","139nt","140nt"],
5412datasets : [
5413{
5414fillColor : "rgba(52,255,54,0.75)",
5415strokeColor : "rgba(52,255,54,0.75)",
5416pointColor : "rgba(52,255,54,0.75)",
5417data : [0.490971,0.495183,0.480721,0.475205,0.478984,0.469255,0.479939,0.471730,0.475357,0.470297,0.468082,0.464108,0.456464,0.453837,0.447409,0.434097,0.433989,0.439895,0.429081,0.407713]
5418},
5419{
5420fillColor : "rgba(57,124,214,0.75)",
5421strokeColor : "rgba(57,124,214,0.75)",
5422pointColor : "rgba(57,124,214,0.75)",
5423data : [4.228289,4.179124,4.076821,4.265379,4.351460,4.431895,4.431591,4.314153,4.481928,4.604731,4.733874,4.680627,4.592548,4.803929,4.941693,5.061173,5.017655,4.873810,5.160262,5.319178]
5424},
5425{
5426fillColor : "rgba(251,220,60,0.75)",
5427strokeColor : "rgba(251,220,60,0.75)",
5428pointColor : "rgba(251,220,60,0.75)",
5429data : [4.590854,4.468117,4.355956,4.560105,4.676305,4.854787,4.744384,4.621734,4.845710,4.951118,5.140848,5.058915,4.875308,5.148905,5.267538,5.471839,5.357115,5.238960,5.486519,5.581178]
5430},
5431{
5432fillColor : "rgba(255,61,107,0.75)",
5433strokeColor : "rgba(255,61,107,0.75)",
5434pointColor : "rgba(255,61,107,0.75)",
5435data : [4.898219,5.061130,5.284432,5.461806,5.518463,5.290404,5.398874,5.675620,5.823786,5.942180,5.608149,5.859052,6.143072,6.304572,6.499340,6.055579,6.329870,6.646747,6.865315,7.036131]
5436}
5437]
5438}
5439var pieData44 = [
5440{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5441var Chartopt = {datasetFill : false}
5442var myLine = new Chart(document.getElementById("canvas44").getContext("2d")).Bar(ChartData44);
5443</script>
5444<div style="float: left;width=352px">
5445<canvas id="canvas45" height="250" width="352px"></canvas>
5446</div><div class="chart-legend" style="float: left;width: 235px">
5447<ul><style>#id65581:before { background-color: rgba(52,255,54,0.75);}</style>
5448<li id="id65581">A</li><style>#id131117:before { background-color: rgba(57,124,214,0.75);}</style>
5449<li id="id131117">C</li><style>#id196653:before { background-color: rgba(251,220,60,0.75);}</style>
5450<li id="id196653">G</li><style>#id262189:before { background-color: rgba(255,61,107,0.75);}</style>
5451<li id="id262189">T</li></ul></div><div style="clear:both;"></div><script>
5452var ChartData45 = {
5453labels : ["141nt","142nt","143nt","144nt","145nt","146nt","147nt","148nt","149nt","150nt"],
5454datasets : [
5455{
5456fillColor : "rgba(52,255,54,0.75)",
5457strokeColor : "rgba(52,255,54,0.75)",
5458pointColor : "rgba(52,255,54,0.75)",
5459data : [0.395660,0.402501,0.390166,0.392794,0.347104,0.338244,0.389862,0.427322,0.339634,0.112075]
5460},
5461{
5462fillColor : "rgba(57,124,214,0.75)",
5463strokeColor : "rgba(57,124,214,0.75)",
5464pointColor : "rgba(57,124,214,0.75)",
5465data : [5.488278,5.458528,5.377180,5.703350,5.883786,6.133712,6.121204,5.982245,5.978727,5.431187]
5466},
5467{
5468fillColor : "rgba(251,220,60,0.75)",
5469strokeColor : "rgba(251,220,60,0.75)",
5470pointColor : "rgba(251,220,60,0.75)",
5471data : [5.922505,5.782070,5.683241,5.920421,6.165396,6.373432,6.410371,6.189934,6.099705,5.091619]
5472},
5473{
5474fillColor : "rgba(255,61,107,0.75)",
5475strokeColor : "rgba(255,61,107,0.75)",
5476pointColor : "rgba(255,61,107,0.75)",
5477data : [6.618146,7.023883,7.352159,7.695138,7.842891,7.592010,8.230929,8.655341,8.927591,7.635072]
5478}
5479]
5480}
5481var pieData45 = [
5482{ value: 0.623371, color:"rgba(52,255,54,0.75)"},{ value: 0.533229, color:"rgba(57,124,214,0.75)"},{ value: 0.642981, color:"rgba(251,220,60,0.75)"},{ value: 0.332294, color:"rgba(255,61,107,0.75)"}];
5483var Chartopt = {datasetFill : false}
5484var myLine = new Chart(document.getElementById("canvas45").getContext("2d")).Bar(ChartData45);
5485</script>
5486<p>Distribution of Mismatches in MAPQ < 10 reads.</p>
5487<section>
5488<h2>Distribution of Mismatches(MAPQ < 3):</h2>
5489<div style="float: left;width=705px">
5490<canvas id="canvas46" height="250" width="705px"></canvas>
5491</div><div class="chart-legend" style="float: left;width: 235px">
5492<ul><style>#id65582:before { background-color: rgba(52,255,54,0.75);}</style>
5493<li id="id65582">A</li><style>#id131118:before { background-color: rgba(57,124,214,0.75);}</style>
5494<li id="id131118">C</li><style>#id196654:before { background-color: rgba(251,220,60,0.75);}</style>
5495<li id="id196654">G</li><style>#id262190:before { background-color: rgba(255,61,107,0.75);}</style>
5496<li id="id262190">T</li></ul></div><div style="clear:both;"></div><script>
5497var ChartData46 = {
5498labels : ["1nt","2nt","3nt","4nt","5nt","6nt","7nt","8nt","9nt","10nt","11nt","12nt","13nt","14nt","15nt","16nt","17nt","18nt","19nt","20nt"],
5499datasets : [
5500{
5501fillColor : "rgba(52,255,54,0.75)",
5502strokeColor : "rgba(52,255,54,0.75)",
5503pointColor : "rgba(52,255,54,0.75)",
5504data : [0.785373,0.573700,0.599809,0.613413,0.424348,0.745259,0.735456,0.751361,0.727353,0.743859,0.718850,0.779971,0.728354,0.759064,0.732355,0.732055,0.745860,0.758364,0.738057,0.802479]
5505},
5506{
5507fillColor : "rgba(57,124,214,0.75)",
5508strokeColor : "rgba(57,124,214,0.75)",
5509pointColor : "rgba(57,124,214,0.75)",
5510data : [0.650126,0.602810,0.546690,0.601509,0.399939,0.745860,0.737857,0.682437,0.711848,0.696642,0.749961,0.753862,0.730254,0.686339,0.702244,0.768668,0.729754,0.698443,0.705145,0.756263]
5511},
5512{
5513fillColor : "rgba(251,220,60,0.75)",
5514strokeColor : "rgba(251,220,60,0.75)",
5515pointColor : "rgba(251,220,60,0.75)",
5516data : [0.808581,0.572999,0.569498,0.568598,0.417445,0.825587,0.847195,0.812883,0.777471,0.734155,0.788274,0.787974,0.802279,0.756863,0.765666,0.788975,0.757263,0.777771,0.715949,0.756463]
5517},
5518{
5519fillColor : "rgba(255,61,107,0.75)",
5520strokeColor : "rgba(255,61,107,0.75)",
5521pointColor : "rgba(255,61,107,0.75)",
5522data : [0.423747,0.498073,0.589705,0.551292,0.370129,0.696642,0.707446,0.670933,0.676836,0.668933,0.686739,0.676635,0.696943,0.703945,0.701744,0.695942,0.696342,0.706146,0.731555,0.802979]
5523}
5524]
5525}
5526var pieData46 = [
5527{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5528var Chartopt = {datasetFill : false}
5529var myLine = new Chart(document.getElementById("canvas46").getContext("2d")).Bar(ChartData46);
5530</script>
5531<div style="float: left;width=705px">
5532<canvas id="canvas47" height="250" width="705px"></canvas>
5533</div><div class="chart-legend" style="float: left;width: 235px">
5534<ul><style>#id65583:before { background-color: rgba(52,255,54,0.75);}</style>
5535<li id="id65583">A</li><style>#id131119:before { background-color: rgba(57,124,214,0.75);}</style>
5536<li id="id131119">C</li><style>#id196655:before { background-color: rgba(251,220,60,0.75);}</style>
5537<li id="id196655">G</li><style>#id262191:before { background-color: rgba(255,61,107,0.75);}</style>
5538<li id="id262191">T</li></ul></div><div style="clear:both;"></div><script>
5539var ChartData47 = {
5540labels : ["21nt","22nt","23nt","24nt","25nt","26nt","27nt","28nt","29nt","30nt","31nt","32nt","33nt","34nt","35nt","36nt","37nt","38nt","39nt","40nt"],
5541datasets : [
5542{
5543fillColor : "rgba(52,255,54,0.75)",
5544strokeColor : "rgba(52,255,54,0.75)",
5545pointColor : "rgba(52,255,54,0.75)",
5546data : [0.724352,0.710347,0.738257,0.720251,0.746260,0.719951,0.723752,0.743759,0.775070,0.743159,0.743859,0.745059,0.756463,0.743059,0.733055,0.730654,0.743359,0.769468,0.760265,0.723852]
5547},
5548{
5549fillColor : "rgba(57,124,214,0.75)",
5550strokeColor : "rgba(57,124,214,0.75)",
5551pointColor : "rgba(57,124,214,0.75)",
5552data : [0.736256,0.752262,0.767667,0.766567,0.814283,0.825287,0.898013,0.795577,0.837491,0.877705,0.918220,0.930024,1.022656,0.994746,1.076475,1.107485,1.186913,1.178410,1.241932,1.327562]
5553},
5554{
5555fillColor : "rgba(251,220,60,0.75)",
5556strokeColor : "rgba(251,220,60,0.75)",
5557pointColor : "rgba(251,220,60,0.75)",
5558data : [0.781372,0.809582,0.791776,0.784873,0.832590,0.854197,0.845594,0.870003,0.857298,0.913218,0.897112,0.941928,0.978941,1.039462,1.105085,1.145699,1.186713,1.255037,1.313157,1.374378]
5559},
5560{
5561fillColor : "rgba(255,61,107,0.75)",
5562strokeColor : "rgba(255,61,107,0.75)",
5563pointColor : "rgba(255,61,107,0.75)",
5564data : [0.723252,0.791976,0.748460,0.799678,0.787974,0.761365,0.845694,0.804180,0.851296,0.905615,0.857798,0.912718,1.009151,1.085878,1.139897,1.127692,1.186813,1.286648,1.384182,1.474113]
5565}
5566]
5567}
5568var pieData47 = [
5569{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5570var Chartopt = {datasetFill : false}
5571var myLine = new Chart(document.getElementById("canvas47").getContext("2d")).Bar(ChartData47);
5572</script>
5573<div style="float: left;width=705px">
5574<canvas id="canvas48" height="250" width="705px"></canvas>
5575</div><div class="chart-legend" style="float: left;width: 235px">
5576<ul><style>#id65584:before { background-color: rgba(52,255,54,0.75);}</style>
5577<li id="id65584">A</li><style>#id131120:before { background-color: rgba(57,124,214,0.75);}</style>
5578<li id="id131120">C</li><style>#id196656:before { background-color: rgba(251,220,60,0.75);}</style>
5579<li id="id196656">G</li><style>#id262192:before { background-color: rgba(255,61,107,0.75);}</style>
5580<li id="id262192">T</li></ul></div><div style="clear:both;"></div><script>
5581var ChartData48 = {
5582labels : ["41nt","42nt","43nt","44nt","45nt","46nt","47nt","48nt","49nt","50nt","51nt","52nt","53nt","54nt","55nt","56nt","57nt","58nt","59nt","60nt"],
5583datasets : [
5584{
5585fillColor : "rgba(52,255,54,0.75)",
5586strokeColor : "rgba(52,255,54,0.75)",
5587pointColor : "rgba(52,255,54,0.75)",
5588data : [0.745259,0.707346,0.751261,0.728554,0.731054,0.722051,0.701844,0.728153,0.714849,0.711047,0.687439,0.707846,0.743759,0.727853,0.681337,0.695142,0.697043,0.741258,0.686439,0.692641]
5589},
5590{
5591fillColor : "rgba(57,124,214,0.75)",
5592strokeColor : "rgba(57,124,214,0.75)",
5593pointColor : "rgba(57,124,214,0.75)",
5594data : [1.396086,1.446103,1.426497,1.496121,1.585752,1.700692,1.728402,1.739905,1.861248,1.880955,1.994294,1.996295,1.996595,2.078223,2.227875,2.262588,2.334612,2.340615,2.431246,2.503571]
5595},
5596{
5597fillColor : "rgba(251,220,60,0.75)",
5598strokeColor : "rgba(251,220,60,0.75)",
5599pointColor : "rgba(251,220,60,0.75)",
5600data : [1.516128,1.503923,1.559843,1.612761,1.747908,1.785421,1.828936,1.878254,1.995995,2.121138,2.158851,2.199565,2.222874,2.406938,2.441450,2.528380,2.599304,2.572395,2.716245,2.805376]
5601},
5602{
5603fillColor : "rgba(255,61,107,0.75)",
5604strokeColor : "rgba(255,61,107,0.75)",
5605pointColor : "rgba(255,61,107,0.75)",
5606data : [1.435500,1.579450,1.652775,1.765914,1.836539,1.844042,1.917267,2.056216,2.133343,2.227175,2.118137,2.225775,2.318707,2.487666,2.475562,2.394433,2.496869,2.624513,2.724448,2.810778]
5607}
5608]
5609}
5610var pieData48 = [
5611{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5612var Chartopt = {datasetFill : false}
5613var myLine = new Chart(document.getElementById("canvas48").getContext("2d")).Bar(ChartData48);
5614</script>
5615<div style="float: left;width=705px">
5616<canvas id="canvas49" height="250" width="705px"></canvas>
5617</div><div class="chart-legend" style="float: left;width: 235px">
5618<ul><style>#id65585:before { background-color: rgba(52,255,54,0.75);}</style>
5619<li id="id65585">A</li><style>#id131121:before { background-color: rgba(57,124,214,0.75);}</style>
5620<li id="id131121">C</li><style>#id196657:before { background-color: rgba(251,220,60,0.75);}</style>
5621<li id="id196657">G</li><style>#id262193:before { background-color: rgba(255,61,107,0.75);}</style>
5622<li id="id262193">T</li></ul></div><div style="clear:both;"></div><script>
5623var ChartData49 = {
5624labels : ["61nt","62nt","63nt","64nt","65nt","66nt","67nt","68nt","69nt","70nt","71nt","72nt","73nt","74nt","75nt","76nt","77nt","78nt","79nt","80nt"],
5625datasets : [
5626{
5627fillColor : "rgba(52,255,54,0.75)",
5628strokeColor : "rgba(52,255,54,0.75)",
5629pointColor : "rgba(52,255,54,0.75)",
5630data : [0.693841,0.654328,0.668533,0.653627,0.631320,0.657229,0.631620,0.692341,0.679236,0.625618,0.653027,0.622917,0.650626,0.642023,0.634021,0.654028,0.635121,0.663931,0.651327,0.633020]
5631},
5632{
5633fillColor : "rgba(57,124,214,0.75)",
5634strokeColor : "rgba(57,124,214,0.75)",
5635pointColor : "rgba(57,124,214,0.75)",
5636data : [2.612309,2.616410,2.576597,2.718246,2.861396,2.938423,2.969934,2.933521,3.113384,3.147896,3.256133,3.280542,3.189010,3.375975,3.458603,3.531329,3.552736,3.498218,3.598952,3.630663]
5637},
5638{
5639fillColor : "rgba(251,220,60,0.75)",
5640strokeColor : "rgba(251,220,60,0.75)",
5641pointColor : "rgba(251,220,60,0.75)",
5642data : [2.915615,2.878802,2.932020,3.075970,3.136192,3.236726,3.230824,3.205416,3.435796,3.440697,3.589749,3.524927,3.462605,3.645869,3.677180,3.840236,3.762810,3.686283,3.902558,3.941472]
5643},
5644{
5645fillColor : "rgba(255,61,107,0.75)",
5646strokeColor : "rgba(255,61,107,0.75)",
5647pointColor : "rgba(255,61,107,0.75)",
5648data : [2.715745,2.856594,2.953728,2.991941,3.074270,2.962631,3.074570,3.190210,3.259934,3.352967,3.185609,3.353467,3.474009,3.570243,3.678380,3.455602,3.638566,3.789819,3.828732,3.964179]
5649}
5650]
5651}
5652var pieData49 = [
5653{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5654var Chartopt = {datasetFill : false}
5655var myLine = new Chart(document.getElementById("canvas49").getContext("2d")).Bar(ChartData49);
5656</script>
5657<div style="float: left;width=705px">
5658<canvas id="canvas50" height="250" width="705px"></canvas>
5659</div><div class="chart-legend" style="float: left;width: 235px">
5660<ul><style>#id65586:before { background-color: rgba(52,255,54,0.75);}</style>
5661<li id="id65586">A</li><style>#id131122:before { background-color: rgba(57,124,214,0.75);}</style>
5662<li id="id131122">C</li><style>#id196658:before { background-color: rgba(251,220,60,0.75);}</style>
5663<li id="id196658">G</li><style>#id262194:before { background-color: rgba(255,61,107,0.75);}</style>
5664<li id="id262194">T</li></ul></div><div style="clear:both;"></div><script>
5665var ChartData50 = {
5666labels : ["81nt","82nt","83nt","84nt","85nt","86nt","87nt","88nt","89nt","90nt","91nt","92nt","93nt","94nt","95nt","96nt","97nt","98nt","99nt","100nt"],
5667datasets : [
5668{
5669fillColor : "rgba(52,255,54,0.75)",
5670strokeColor : "rgba(52,255,54,0.75)",
5671pointColor : "rgba(52,255,54,0.75)",
5672data : [0.629819,0.625918,0.648926,0.594507,0.614214,0.624017,0.614614,0.629419,0.617015,0.590906,0.612413,0.590005,0.613213,0.585604,0.599009,0.606411,0.598808,0.602210,0.560995,0.594807]
5673},
5674{
5675fillColor : "rgba(57,124,214,0.75)",
5676strokeColor : "rgba(57,124,214,0.75)",
5677pointColor : "rgba(57,124,214,0.75)",
5678data : [3.738501,3.745604,3.626462,3.746504,3.827132,3.876949,3.924566,3.818129,3.966380,4.072217,4.112831,4.119033,4.004293,4.148944,4.258282,4.341011,4.304798,4.180355,4.353515,4.447748]
5679},
5680{
5681fillColor : "rgba(251,220,60,0.75)",
5682strokeColor : "rgba(251,220,60,0.75)",
5683pointColor : "rgba(251,220,60,0.75)",
5684data : [4.061213,3.994390,3.988288,4.107129,4.248679,4.314102,4.207364,4.164449,4.348613,4.415436,4.543081,4.487062,4.397030,4.580994,4.732447,4.835783,4.712740,4.656920,4.859491,4.952123]
5685},
5686{
5687fillColor : "rgba(255,61,107,0.75)",
5688strokeColor : "rgba(255,61,107,0.75)",
5689pointColor : "rgba(255,61,107,0.75)",
5690data : [3.734600,3.932969,4.059113,4.208965,4.255981,4.106929,4.215067,4.384726,4.538379,4.646817,4.423739,4.644016,4.825379,4.945821,5.017346,4.750053,4.893503,5.122582,5.261631,5.393777]
5691}
5692]
5693}
5694var pieData50 = [
5695{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5696var Chartopt = {datasetFill : false}
5697var myLine = new Chart(document.getElementById("canvas50").getContext("2d")).Bar(ChartData50);
5698</script>
5699<div style="float: left;width=705px">
5700<canvas id="canvas51" height="250" width="705px"></canvas>
5701</div><div class="chart-legend" style="float: left;width: 235px">
5702<ul><style>#id65587:before { background-color: rgba(52,255,54,0.75);}</style>
5703<li id="id65587">A</li><style>#id131123:before { background-color: rgba(57,124,214,0.75);}</style>
5704<li id="id131123">C</li><style>#id196659:before { background-color: rgba(251,220,60,0.75);}</style>
5705<li id="id196659">G</li><style>#id262195:before { background-color: rgba(255,61,107,0.75);}</style>
5706<li id="id262195">T</li></ul></div><div style="clear:both;"></div><script>
5707var ChartData51 = {
5708labels : ["101nt","102nt","103nt","104nt","105nt","106nt","107nt","108nt","109nt","110nt","111nt","112nt","113nt","114nt","115nt","116nt","117nt","118nt","119nt","120nt"],
5709datasets : [
5710{
5711fillColor : "rgba(52,255,54,0.75)",
5712strokeColor : "rgba(52,255,54,0.75)",
5713pointColor : "rgba(52,255,54,0.75)",
5714data : [0.569798,0.606611,0.598008,0.587704,0.575200,0.589105,0.587104,0.578701,0.548791,0.566697,0.552692,0.564797,0.582403,0.542789,0.546590,0.565297,0.549491,0.541588,0.556994,0.537287]
5715},
5716{
5717fillColor : "rgba(57,124,214,0.75)",
5718strokeColor : "rgba(57,124,214,0.75)",
5719pointColor : "rgba(57,124,214,0.75)",
5720data : [4.559186,4.527876,4.420338,4.617107,4.638614,4.693233,4.644717,4.533578,4.749453,4.781764,4.917211,4.898105,4.759757,4.918312,5.060061,5.144290,5.137888,4.979333,5.239624,5.343060]
5721},
5722{
5723fillColor : "rgba(251,220,60,0.75)",
5724strokeColor : "rgba(251,220,60,0.75)",
5725pointColor : "rgba(251,220,60,0.75)",
5726data : [5.087871,4.927715,4.893103,5.098974,5.175901,5.344560,5.246626,5.072865,5.300445,5.486909,5.622056,5.429189,5.399479,5.610952,5.735796,5.848735,5.775110,5.603850,5.787114,5.976080]
5727},
5728{
5729fillColor : "rgba(255,61,107,0.75)",
5730strokeColor : "rgba(255,61,107,0.75)",
5731pointColor : "rgba(255,61,107,0.75)",
5732data : [5.064863,5.313549,5.451897,5.610753,5.710787,5.407382,5.600449,5.810322,5.971478,6.107825,5.725293,5.961875,6.148439,6.363214,6.491959,6.073013,6.334704,6.616302,6.814371,6.881694]
5733}
5734]
5735}
5736var pieData51 = [
5737{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5738var Chartopt = {datasetFill : false}
5739var myLine = new Chart(document.getElementById("canvas51").getContext("2d")).Bar(ChartData51);
5740</script>
5741<div style="float: left;width=705px">
5742<canvas id="canvas52" height="250" width="705px"></canvas>
5743</div><div class="chart-legend" style="float: left;width: 235px">
5744<ul><style>#id65588:before { background-color: rgba(52,255,54,0.75);}</style>
5745<li id="id65588">A</li><style>#id131124:before { background-color: rgba(57,124,214,0.75);}</style>
5746<li id="id131124">C</li><style>#id196660:before { background-color: rgba(251,220,60,0.75);}</style>
5747<li id="id196660">G</li><style>#id262196:before { background-color: rgba(255,61,107,0.75);}</style>
5748<li id="id262196">T</li></ul></div><div style="clear:both;"></div><script>
5749var ChartData52 = {
5750labels : ["121nt","122nt","123nt","124nt","125nt","126nt","127nt","128nt","129nt","130nt","131nt","132nt","133nt","134nt","135nt","136nt","137nt","138nt","139nt","140nt"],
5751datasets : [
5752{
5753fillColor : "rgba(52,255,54,0.75)",
5754strokeColor : "rgba(52,255,54,0.75)",
5755pointColor : "rgba(52,255,54,0.75)",
5756data : [0.542989,0.553593,0.548791,0.543389,0.541989,0.510678,0.544490,0.499474,0.523482,0.484869,0.496673,0.499174,0.509877,0.479367,0.493072,0.479667,0.462361,0.452958,0.445255,0.442654]
5757},
5758{
5759fillColor : "rgba(57,124,214,0.75)",
5760strokeColor : "rgba(57,124,214,0.75)",
5761pointColor : "rgba(57,124,214,0.75)",
5762data : [5.474005,5.399679,5.253728,5.561435,5.636562,5.759904,5.727393,5.574840,5.790715,5.959774,6.112827,6.009891,5.824827,6.151141,6.351610,6.468551,6.437340,6.259778,6.620104,6.888297]
5763},
5764{
5765fillColor : "rgba(251,220,60,0.75)",
5766strokeColor : "rgba(251,220,60,0.75)",
5767pointColor : "rgba(251,220,60,0.75)",
5768data : [6.204859,6.054407,5.831229,6.074514,6.234769,6.497761,6.336205,6.110426,6.488257,6.612101,6.892399,6.663119,6.524771,6.901802,7.054755,7.275932,7.106273,6.887897,7.298740,7.398475]
5769},
5770{
5771fillColor : "rgba(255,61,107,0.75)",
5772strokeColor : "rgba(255,61,107,0.75)",
5773pointColor : "rgba(255,61,107,0.75)",
5774data : [6.482556,6.693429,7.039250,7.264828,7.379768,6.946317,7.123079,7.506012,7.709183,7.829224,7.407978,7.738593,8.109922,8.373013,8.555377,7.953068,8.313693,8.729837,9.036244,9.229012]
5775}
5776]
5777}
5778var pieData52 = [
5779{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5780var Chartopt = {datasetFill : false}
5781var myLine = new Chart(document.getElementById("canvas52").getContext("2d")).Bar(ChartData52);
5782</script>
5783<div style="float: left;width=352px">
5784<canvas id="canvas53" height="250" width="352px"></canvas>
5785</div><div class="chart-legend" style="float: left;width: 235px">
5786<ul><style>#id65589:before { background-color: rgba(52,255,54,0.75);}</style>
5787<li id="id65589">A</li><style>#id131125:before { background-color: rgba(57,124,214,0.75);}</style>
5788<li id="id131125">C</li><style>#id196661:before { background-color: rgba(251,220,60,0.75);}</style>
5789<li id="id196661">G</li><style>#id262197:before { background-color: rgba(255,61,107,0.75);}</style>
5790<li id="id262197">T</li></ul></div><div style="clear:both;"></div><script>
5791var ChartData53 = {
5792labels : ["141nt","142nt","143nt","144nt","145nt","146nt","147nt","148nt","149nt","150nt"],
5793datasets : [
5794{
5795fillColor : "rgba(52,255,54,0.75)",
5796strokeColor : "rgba(52,255,54,0.75)",
5797pointColor : "rgba(52,255,54,0.75)",
5798data : [0.419346,0.452758,0.424248,0.434551,0.406041,0.408042,0.504976,0.473065,0.365127,0.139248]
5799},
5800{
5801fillColor : "rgba(57,124,214,0.75)",
5802strokeColor : "rgba(57,124,214,0.75)",
5803pointColor : "rgba(57,124,214,0.75)",
5804data : [7.081764,7.065359,6.834178,7.310844,7.576937,7.929660,7.883044,7.519117,7.616451,6.959322]
5805},
5806{
5807fillColor : "rgba(251,220,60,0.75)",
5808strokeColor : "rgba(251,220,60,0.75)",
5809pointColor : "rgba(251,220,60,0.75)",
5810data : [7.819921,7.629355,7.439389,7.795913,8.092317,8.366311,8.401624,8.068408,8.030495,6.744647]
5811},
5812{
5813fillColor : "rgba(255,61,107,0.75)",
5814strokeColor : "rgba(255,61,107,0.75)",
5815pointColor : "rgba(255,61,107,0.75)",
5816data : [8.651411,9.163189,9.642555,10.049798,10.268673,9.757195,10.629799,11.201798,11.551320,9.867435]
5817}
5818]
5819}
5820var pieData53 = [
5821{ value: 0.785373, color:"rgba(52,255,54,0.75)"},{ value: 0.650126, color:"rgba(57,124,214,0.75)"},{ value: 0.808581, color:"rgba(251,220,60,0.75)"},{ value: 0.423747, color:"rgba(255,61,107,0.75)"}];
5822var Chartopt = {datasetFill : false}
5823var myLine = new Chart(document.getElementById("canvas53").getContext("2d")).Bar(ChartData53);
5824</script>
5825<p>Distribution of Mismatches in MAPQ < 3 reads.</p>
5826<section>
5827<h2>Number of Errors Per Read (MAPQ >= 30):</h2>
5828<div style="float: left;width=705px">
5829<canvas id="canvas54" height="250" width="705px"></canvas>
5830</div><div class="chart-legend" style="float: left;width: 235px">
5831<ul><style>#id65590:before { background-color: rgba(52,255,54,0.75);}</style>
5832<li id="id65590">Errors</li></ul></div><div style="clear:both;"></div><script>
5833var ChartData54 = {
5834labels : ["0","1","2","3","4","5","6","7","8","9"],
5835datasets : [
5836{
5837fillColor : "rgba(52,255,54,0.75)",
5838strokeColor : "rgba(52,255,54,0.75)",
5839pointColor : "rgba(52,255,54,0.75)",
5840data : [2.383352,2.383352,2.383352,2.383352,1.847355,1.264293,0.936749,0.698145,0.540185,0.408164]
5841}
5842]
5843}
5844var pieData54 = [
5845{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5846var Chartopt = {datasetFill : false}
5847var myLine = new Chart(document.getElementById("canvas54").getContext("2d")).Bar(ChartData54);
5848</script>
5849<div style="float: left;width=705px">
5850<canvas id="canvas55" height="250" width="705px"></canvas>
5851</div><div class="chart-legend" style="float: left;width: 235px">
5852<ul><style>#id65591:before { background-color: rgba(52,255,54,0.75);}</style>
5853<li id="id65591">Errors</li></ul></div><div style="clear:both;"></div><script>
5854var ChartData55 = {
5855labels : ["10","11","12","13","14","15","16","17","18","19"],
5856datasets : [
5857{
5858fillColor : "rgba(52,255,54,0.75)",
5859strokeColor : "rgba(52,255,54,0.75)",
5860pointColor : "rgba(52,255,54,0.75)",
5861data : [0.318350,0.242775,0.195321,0.147929,0.116482,0.091826,0.073198,0.054875,0.044902,0.032729]
5862}
5863]
5864}
5865var pieData55 = [
5866{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5867var Chartopt = {datasetFill : false}
5868var myLine = new Chart(document.getElementById("canvas55").getContext("2d")).Bar(ChartData55);
5869</script>
5870<div style="float: left;width=705px">
5871<canvas id="canvas56" height="250" width="705px"></canvas>
5872</div><div class="chart-legend" style="float: left;width: 235px">
5873<ul><style>#id65592:before { background-color: rgba(52,255,54,0.75);}</style>
5874<li id="id65592">Errors</li></ul></div><div style="clear:both;"></div><script>
5875var ChartData56 = {
5876labels : ["20","21","22","23","24","25","26","27","28","29"],
5877datasets : [
5878{
5879fillColor : "rgba(52,255,54,0.75)",
5880strokeColor : "rgba(52,255,54,0.75)",
5881pointColor : "rgba(52,255,54,0.75)",
5882data : [0.027558,0.018986,0.014138,0.009595,0.007655,0.005523,0.004400,0.003320,0.002853,0.002164]
5883}
5884]
5885}
5886var pieData56 = [
5887{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5888var Chartopt = {datasetFill : false}
5889var myLine = new Chart(document.getElementById("canvas56").getContext("2d")).Bar(ChartData56);
5890</script>
5891<div style="float: left;width=705px">
5892<canvas id="canvas57" height="250" width="705px"></canvas>
5893</div><div class="chart-legend" style="float: left;width: 235px">
5894<ul><style>#id65593:before { background-color: rgba(52,255,54,0.75);}</style>
5895<li id="id65593">Errors</li></ul></div><div style="clear:both;"></div><script>
5896var ChartData57 = {
5897labels : ["30","31","32","33","34","35","36","37","38","39"],
5898datasets : [
5899{
5900fillColor : "rgba(52,255,54,0.75)",
5901strokeColor : "rgba(52,255,54,0.75)",
5902pointColor : "rgba(52,255,54,0.75)",
5903data : [0.001783,0.001345,0.001177,0.000863,0.000673,0.000541,0.000516,0.000373,0.000327,0.000247]
5904}
5905]
5906}
5907var pieData57 = [
5908{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5909var Chartopt = {datasetFill : false}
5910var myLine = new Chart(document.getElementById("canvas57").getContext("2d")).Bar(ChartData57);
5911</script>
5912<div style="float: left;width=705px">
5913<canvas id="canvas58" height="250" width="705px"></canvas>
5914</div><div class="chart-legend" style="float: left;width: 235px">
5915<ul><style>#id65594:before { background-color: rgba(52,255,54,0.75);}</style>
5916<li id="id65594">Errors</li></ul></div><div style="clear:both;"></div><script>
5917var ChartData58 = {
5918labels : ["40","41","42","43","44","45","46","47","48","49"],
5919datasets : [
5920{
5921fillColor : "rgba(52,255,54,0.75)",
5922strokeColor : "rgba(52,255,54,0.75)",
5923pointColor : "rgba(52,255,54,0.75)",
5924data : [0.000258,0.000182,0.000169,0.000153,0.000149,0.000114,0.000082,0.000068,0.000055,0.000047]
5925}
5926]
5927}
5928var pieData58 = [
5929{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5930var Chartopt = {datasetFill : false}
5931var myLine = new Chart(document.getElementById("canvas58").getContext("2d")).Bar(ChartData58);
5932</script>
5933<div style="float: left;width=705px">
5934<canvas id="canvas59" height="250" width="705px"></canvas>
5935</div><div class="chart-legend" style="float: left;width: 235px">
5936<ul><style>#id65595:before { background-color: rgba(52,255,54,0.75);}</style>
5937<li id="id65595">Errors</li></ul></div><div style="clear:both;"></div><script>
5938var ChartData59 = {
5939labels : ["50","51","52","53","54","55","56","57","58","59"],
5940datasets : [
5941{
5942fillColor : "rgba(52,255,54,0.75)",
5943strokeColor : "rgba(52,255,54,0.75)",
5944pointColor : "rgba(52,255,54,0.75)",
5945data : [0.000051,0.000039,0.000039,0.000028,0.000027,0.000018,0.000018,0.000013,0.000012,0.000007]
5946}
5947]
5948}
5949var pieData59 = [
5950{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5951var Chartopt = {datasetFill : false}
5952var myLine = new Chart(document.getElementById("canvas59").getContext("2d")).Bar(ChartData59);
5953</script>
5954<div style="float: left;width=705px">
5955<canvas id="canvas60" height="250" width="705px"></canvas>
5956</div><div class="chart-legend" style="float: left;width: 235px">
5957<ul><style>#id65596:before { background-color: rgba(52,255,54,0.75);}</style>
5958<li id="id65596">Errors</li></ul></div><div style="clear:both;"></div><script>
5959var ChartData60 = {
5960labels : ["60","61","62","63","64","65","66","67","68","69"],
5961datasets : [
5962{
5963fillColor : "rgba(52,255,54,0.75)",
5964strokeColor : "rgba(52,255,54,0.75)",
5965pointColor : "rgba(52,255,54,0.75)",
5966data : [0.000006,0.000007,0.000008,0.000006,0.000003,0.000003,0.000002,0.000001,0.000001,0.000000]
5967}
5968]
5969}
5970var pieData60 = [
5971{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5972var Chartopt = {datasetFill : false}
5973var myLine = new Chart(document.getElementById("canvas60").getContext("2d")).Bar(ChartData60);
5974</script>
5975<div style="float: left;width=705px">
5976<canvas id="canvas61" height="250" width="705px"></canvas>
5977</div><div class="chart-legend" style="float: left;width: 235px">
5978<ul><style>#id65597:before { background-color: rgba(52,255,54,0.75);}</style>
5979<li id="id65597">Errors</li></ul></div><div style="clear:both;"></div><script>
5980var ChartData61 = {
5981labels : ["70","71","72","73","74","75","76","77","78","79"],
5982datasets : [
5983{
5984fillColor : "rgba(52,255,54,0.75)",
5985strokeColor : "rgba(52,255,54,0.75)",
5986pointColor : "rgba(52,255,54,0.75)",
5987data : [0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
5988}
5989]
5990}
5991var pieData61 = [
5992{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
5993var Chartopt = {datasetFill : false}
5994var myLine = new Chart(document.getElementById("canvas61").getContext("2d")).Bar(ChartData61);
5995</script>
5996<div style="float: left;width=705px">
5997<canvas id="canvas62" height="250" width="705px"></canvas>
5998</div><div class="chart-legend" style="float: left;width: 235px">
5999<ul><style>#id65598:before { background-color: rgba(52,255,54,0.75);}</style>
6000<li id="id65598">Errors</li></ul></div><div style="clear:both;"></div><script>
6001var ChartData62 = {
6002labels : ["80","81","82","83","84","85","86","87","88","89"],
6003datasets : [
6004{
6005fillColor : "rgba(52,255,54,0.75)",
6006strokeColor : "rgba(52,255,54,0.75)",
6007pointColor : "rgba(52,255,54,0.75)",
6008data : [0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6009}
6010]
6011}
6012var pieData62 = [
6013{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
6014var Chartopt = {datasetFill : false}
6015var myLine = new Chart(document.getElementById("canvas62").getContext("2d")).Bar(ChartData62);
6016</script>
6017<div style="float: left;width=705px">
6018<canvas id="canvas63" height="250" width="705px"></canvas>
6019</div><div class="chart-legend" style="float: left;width: 235px">
6020<ul><style>#id65599:before { background-color: rgba(52,255,54,0.75);}</style>
6021<li id="id65599">Errors</li></ul></div><div style="clear:both;"></div><script>
6022var ChartData63 = {
6023labels : ["90","91","92","93","94","95","96","97","98","99"],
6024datasets : [
6025{
6026fillColor : "rgba(52,255,54,0.75)",
6027strokeColor : "rgba(52,255,54,0.75)",
6028pointColor : "rgba(52,255,54,0.75)",
6029data : [0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6030}
6031]
6032}
6033var pieData63 = [
6034{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
6035var Chartopt = {datasetFill : false}
6036var myLine = new Chart(document.getElementById("canvas63").getContext("2d")).Bar(ChartData63);
6037</script>
6038<div style="float: left;width=282px">
6039<canvas id="canvas64" height="250" width="282px"></canvas>
6040</div><div class="chart-legend" style="float: left;width: 235px">
6041<ul><style>#id65600:before { background-color: rgba(52,255,54,0.75);}</style>
6042<li id="id65600">Errors</li></ul></div><div style="clear:both;"></div><script>
6043var ChartData64 = {
6044labels : ["100","101","102","103"],
6045datasets : [
6046{
6047fillColor : "rgba(52,255,54,0.75)",
6048strokeColor : "rgba(52,255,54,0.75)",
6049pointColor : "rgba(52,255,54,0.75)",
6050data : [0.000000,0.000000,0.000000,0.000000]
6051}
6052]
6053}
6054var pieData64 = [
6055{ value: 2.383352, color:"rgba(52,255,54,0.75)"}];
6056var Chartopt = {datasetFill : false}
6057var myLine = new Chart(document.getElementById("canvas64").getContext("2d")).Bar(ChartData64);
6058</script>
6059<p>Barplot shows the percentage of reads (y-axis) with 0, 1, 2 ... errors (x axis) for MAPQ >= 30 reads.</p>
6060<section>
6061<h2>Number of Errors Per Read(MAPQ < 30):</h2>
6062<div style="float: left;width=705px">
6063<canvas id="canvas65" height="250" width="705px"></canvas>
6064</div><div class="chart-legend" style="float: left;width: 235px">
6065<ul><style>#id65601:before { background-color: rgba(52,255,54,0.75);}</style>
6066<li id="id65601">Errors</li></ul></div><div style="clear:both;"></div><script>
6067var ChartData65 = {
6068labels : ["0","1","2","3","4","5","6","7","8","9"],
6069datasets : [
6070{
6071fillColor : "rgba(52,255,54,0.75)",
6072strokeColor : "rgba(52,255,54,0.75)",
6073pointColor : "rgba(52,255,54,0.75)",
6074data : [34.435436,18.474573,13.467022,9.887853,6.787088,4.613916,3.164814,2.253063,1.639372,1.228111]
6075}
6076]
6077}
6078var pieData65 = [
6079{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6080var Chartopt = {datasetFill : false}
6081var myLine = new Chart(document.getElementById("canvas65").getContext("2d")).Bar(ChartData65);
6082</script>
6083<div style="float: left;width=705px">
6084<canvas id="canvas66" height="250" width="705px"></canvas>
6085</div><div class="chart-legend" style="float: left;width: 235px">
6086<ul><style>#id65602:before { background-color: rgba(52,255,54,0.75);}</style>
6087<li id="id65602">Errors</li></ul></div><div style="clear:both;"></div><script>
6088var ChartData66 = {
6089labels : ["10","11","12","13","14","15","16","17","18","19"],
6090datasets : [
6091{
6092fillColor : "rgba(52,255,54,0.75)",
6093strokeColor : "rgba(52,255,54,0.75)",
6094pointColor : "rgba(52,255,54,0.75)",
6095data : [0.917817,0.691713,0.537697,0.414121,0.322042,0.250273,0.204617,0.160194,0.122136,0.094892]
6096}
6097]
6098}
6099var pieData66 = [
6100{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6101var Chartopt = {datasetFill : false}
6102var myLine = new Chart(document.getElementById("canvas66").getContext("2d")).Bar(ChartData66);
6103</script>
6104<div style="float: left;width=705px">
6105<canvas id="canvas67" height="250" width="705px"></canvas>
6106</div><div class="chart-legend" style="float: left;width: 235px">
6107<ul><style>#id65603:before { background-color: rgba(52,255,54,0.75);}</style>
6108<li id="id65603">Errors</li></ul></div><div style="clear:both;"></div><script>
6109var ChartData67 = {
6110labels : ["20","21","22","23","24","25","26","27","28","29"],
6111datasets : [
6112{
6113fillColor : "rgba(52,255,54,0.75)",
6114strokeColor : "rgba(52,255,54,0.75)",
6115pointColor : "rgba(52,255,54,0.75)",
6116data : [0.071171,0.058320,0.044208,0.030861,0.024384,0.019898,0.018543,0.016982,0.011645,0.007692]
6117}
6118]
6119}
6120var pieData67 = [
6121{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6122var Chartopt = {datasetFill : false}
6123var myLine = new Chart(document.getElementById("canvas67").getContext("2d")).Bar(ChartData67);
6124</script>
6125<div style="float: left;width=705px">
6126<canvas id="canvas68" height="250" width="705px"></canvas>
6127</div><div class="chart-legend" style="float: left;width: 235px">
6128<ul><style>#id65604:before { background-color: rgba(52,255,54,0.75);}</style>
6129<li id="id65604">Errors</li></ul></div><div style="clear:both;"></div><script>
6130var ChartData68 = {
6131labels : ["30","31","32","33","34","35","36","37","38","39"],
6132datasets : [
6133{
6134fillColor : "rgba(52,255,54,0.75)",
6135strokeColor : "rgba(52,255,54,0.75)",
6136pointColor : "rgba(52,255,54,0.75)",
6137data : [0.005439,0.004327,0.003318,0.002813,0.002112,0.001467,0.001206,0.000925,0.000682,0.000860]
6138}
6139]
6140}
6141var pieData68 = [
6142{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6143var Chartopt = {datasetFill : false}
6144var myLine = new Chart(document.getElementById("canvas68").getContext("2d")).Bar(ChartData68);
6145</script>
6146<div style="float: left;width=705px">
6147<canvas id="canvas69" height="250" width="705px"></canvas>
6148</div><div class="chart-legend" style="float: left;width: 235px">
6149<ul><style>#id65605:before { background-color: rgba(52,255,54,0.75);}</style>
6150<li id="id65605">Errors</li></ul></div><div style="clear:both;"></div><script>
6151var ChartData69 = {
6152labels : ["40","41","42","43","44","45","46","47","48","49"],
6153datasets : [
6154{
6155fillColor : "rgba(52,255,54,0.75)",
6156strokeColor : "rgba(52,255,54,0.75)",
6157pointColor : "rgba(52,255,54,0.75)",
6158data : [0.000467,0.000617,0.000355,0.000664,0.000523,0.000411,0.000374,0.000159,0.000252,0.000561]
6159}
6160]
6161}
6162var pieData69 = [
6163{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6164var Chartopt = {datasetFill : false}
6165var myLine = new Chart(document.getElementById("canvas69").getContext("2d")).Bar(ChartData69);
6166</script>
6167<div style="float: left;width=705px">
6168<canvas id="canvas70" height="250" width="705px"></canvas>
6169</div><div class="chart-legend" style="float: left;width: 235px">
6170<ul><style>#id65606:before { background-color: rgba(52,255,54,0.75);}</style>
6171<li id="id65606">Errors</li></ul></div><div style="clear:both;"></div><script>
6172var ChartData70 = {
6173labels : ["50","51","52","53","54","55","56","57","58","59"],
6174datasets : [
6175{
6176fillColor : "rgba(52,255,54,0.75)",
6177strokeColor : "rgba(52,255,54,0.75)",
6178pointColor : "rgba(52,255,54,0.75)",
6179data : [0.000374,0.000299,0.000224,0.000299,0.000243,0.000093,0.000093,0.000084,0.000056,0.000009]
6180}
6181]
6182}
6183var pieData70 = [
6184{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6185var Chartopt = {datasetFill : false}
6186var myLine = new Chart(document.getElementById("canvas70").getContext("2d")).Bar(ChartData70);
6187</script>
6188<div style="float: left;width=705px">
6189<canvas id="canvas71" height="250" width="705px"></canvas>
6190</div><div class="chart-legend" style="float: left;width: 235px">
6191<ul><style>#id65607:before { background-color: rgba(52,255,54,0.75);}</style>
6192<li id="id65607">Errors</li></ul></div><div style="clear:both;"></div><script>
6193var ChartData71 = {
6194labels : ["60","61","62","63","64","65","66","67","68","69"],
6195datasets : [
6196{
6197fillColor : "rgba(52,255,54,0.75)",
6198strokeColor : "rgba(52,255,54,0.75)",
6199pointColor : "rgba(52,255,54,0.75)",
6200data : [0.000056,0.000009,0.000065,0.000028,0.000009,0.000000,0.000037,0.000009,0.000000,0.000000]
6201}
6202]
6203}
6204var pieData71 = [
6205{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6206var Chartopt = {datasetFill : false}
6207var myLine = new Chart(document.getElementById("canvas71").getContext("2d")).Bar(ChartData71);
6208</script>
6209<div style="float: left;width=705px">
6210<canvas id="canvas72" height="250" width="705px"></canvas>
6211</div><div class="chart-legend" style="float: left;width: 235px">
6212<ul><style>#id65608:before { background-color: rgba(52,255,54,0.75);}</style>
6213<li id="id65608">Errors</li></ul></div><div style="clear:both;"></div><script>
6214var ChartData72 = {
6215labels : ["70","71","72","73","74","75","76","77","78","79"],
6216datasets : [
6217{
6218fillColor : "rgba(52,255,54,0.75)",
6219strokeColor : "rgba(52,255,54,0.75)",
6220pointColor : "rgba(52,255,54,0.75)",
6221data : [0.000000,0.000000,0.000009,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6222}
6223]
6224}
6225var pieData72 = [
6226{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6227var Chartopt = {datasetFill : false}
6228var myLine = new Chart(document.getElementById("canvas72").getContext("2d")).Bar(ChartData72);
6229</script>
6230<div style="float: left;width=705px">
6231<canvas id="canvas73" height="250" width="705px"></canvas>
6232</div><div class="chart-legend" style="float: left;width: 235px">
6233<ul><style>#id65609:before { background-color: rgba(52,255,54,0.75);}</style>
6234<li id="id65609">Errors</li></ul></div><div style="clear:both;"></div><script>
6235var ChartData73 = {
6236labels : ["80","81","82","83","84","85","86","87","88","89"],
6237datasets : [
6238{
6239fillColor : "rgba(52,255,54,0.75)",
6240strokeColor : "rgba(52,255,54,0.75)",
6241pointColor : "rgba(52,255,54,0.75)",
6242data : [0.000009,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6243}
6244]
6245}
6246var pieData73 = [
6247{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6248var Chartopt = {datasetFill : false}
6249var myLine = new Chart(document.getElementById("canvas73").getContext("2d")).Bar(ChartData73);
6250</script>
6251<div style="float: left;width=705px">
6252<canvas id="canvas74" height="250" width="705px"></canvas>
6253</div><div class="chart-legend" style="float: left;width: 235px">
6254<ul><style>#id65610:before { background-color: rgba(52,255,54,0.75);}</style>
6255<li id="id65610">Errors</li></ul></div><div style="clear:both;"></div><script>
6256var ChartData74 = {
6257labels : ["90","91","92","93","94","95","96","97","98","99"],
6258datasets : [
6259{
6260fillColor : "rgba(52,255,54,0.75)",
6261strokeColor : "rgba(52,255,54,0.75)",
6262pointColor : "rgba(52,255,54,0.75)",
6263data : [0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6264}
6265]
6266}
6267var pieData74 = [
6268{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6269var Chartopt = {datasetFill : false}
6270var myLine = new Chart(document.getElementById("canvas74").getContext("2d")).Bar(ChartData74);
6271</script>
6272<div style="float: left;width=282px">
6273<canvas id="canvas75" height="250" width="282px"></canvas>
6274</div><div class="chart-legend" style="float: left;width: 235px">
6275<ul><style>#id65611:before { background-color: rgba(52,255,54,0.75);}</style>
6276<li id="id65611">Errors</li></ul></div><div style="clear:both;"></div><script>
6277var ChartData75 = {
6278labels : ["100","101","102","103"],
6279datasets : [
6280{
6281fillColor : "rgba(52,255,54,0.75)",
6282strokeColor : "rgba(52,255,54,0.75)",
6283pointColor : "rgba(52,255,54,0.75)",
6284data : [0.000000,0.000000,0.000000,0.000000]
6285}
6286]
6287}
6288var pieData75 = [
6289{ value: 34.435436, color:"rgba(52,255,54,0.75)"}];
6290var Chartopt = {datasetFill : false}
6291var myLine = new Chart(document.getElementById("canvas75").getContext("2d")).Bar(ChartData75);
6292</script>
6293<p>Barplot shows the percentage of reads (y-axis) with 0, 1, 2 ... errors (x axis) for MAPQ < 30 reads.</p>
6294<section>
6295<h2>Number of Errors Per Read(MAPQ < 20):</h2>
6296<div style="float: left;width=705px">
6297<canvas id="canvas76" height="250" width="705px"></canvas>
6298</div><div class="chart-legend" style="float: left;width: 235px">
6299<ul><style>#id65612:before { background-color: rgba(52,255,54,0.75);}</style>
6300<li id="id65612">Errors</li></ul></div><div style="clear:both;"></div><script>
6301var ChartData76 = {
6302labels : ["0","1","2","3","4","5","6","7","8","9"],
6303datasets : [
6304{
6305fillColor : "rgba(52,255,54,0.75)",
6306strokeColor : "rgba(52,255,54,0.75)",
6307pointColor : "rgba(52,255,54,0.75)",
6308data : [19.595501,16.081839,13.827868,11.142869,9.166284,6.938921,5.163818,3.903221,3.012947,2.340671]
6309}
6310]
6311}
6312var pieData76 = [
6313{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6314var Chartopt = {datasetFill : false}
6315var myLine = new Chart(document.getElementById("canvas76").getContext("2d")).Bar(ChartData76);
6316</script>
6317<div style="float: left;width=705px">
6318<canvas id="canvas77" height="250" width="705px"></canvas>
6319</div><div class="chart-legend" style="float: left;width: 235px">
6320<ul><style>#id65613:before { background-color: rgba(52,255,54,0.75);}</style>
6321<li id="id65613">Errors</li></ul></div><div style="clear:both;"></div><script>
6322var ChartData77 = {
6323labels : ["10","11","12","13","14","15","16","17","18","19"],
6324datasets : [
6325{
6326fillColor : "rgba(52,255,54,0.75)",
6327strokeColor : "rgba(52,255,54,0.75)",
6328pointColor : "rgba(52,255,54,0.75)",
6329data : [1.793001,1.428734,1.129027,0.892315,0.721479,0.573395,0.475557,0.388675,0.311117,0.238550]
6330}
6331]
6332}
6333var pieData77 = [
6334{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6335var Chartopt = {datasetFill : false}
6336var myLine = new Chart(document.getElementById("canvas77").getContext("2d")).Bar(ChartData77);
6337</script>
6338<div style="float: left;width=705px">
6339<canvas id="canvas78" height="250" width="705px"></canvas>
6340</div><div class="chart-legend" style="float: left;width: 235px">
6341<ul><style>#id65614:before { background-color: rgba(52,255,54,0.75);}</style>
6342<li id="id65614">Errors</li></ul></div><div style="clear:both;"></div><script>
6343var ChartData78 = {
6344labels : ["20","21","22","23","24","25","26","27","28","29"],
6345datasets : [
6346{
6347fillColor : "rgba(52,255,54,0.75)",
6348strokeColor : "rgba(52,255,54,0.75)",
6349pointColor : "rgba(52,255,54,0.75)",
6350data : [0.186012,0.145634,0.112606,0.090919,0.071501,0.053535,0.041853,0.038904,0.031259,0.021074]
6351}
6352]
6353}
6354var pieData78 = [
6355{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6356var Chartopt = {datasetFill : false}
6357var myLine = new Chart(document.getElementById("canvas78").getContext("2d")).Bar(ChartData78);
6358</script>
6359<div style="float: left;width=705px">
6360<canvas id="canvas79" height="250" width="705px"></canvas>
6361</div><div class="chart-legend" style="float: left;width: 235px">
6362<ul><style>#id65615:before { background-color: rgba(52,255,54,0.75);}</style>
6363<li id="id65615">Errors</li></ul></div><div style="clear:both;"></div><script>
6364var ChartData79 = {
6365labels : ["30","31","32","33","34","35","36","37","38","39"],
6366datasets : [
6367{
6368fillColor : "rgba(52,255,54,0.75)",
6369strokeColor : "rgba(52,255,54,0.75)",
6370pointColor : "rgba(52,255,54,0.75)",
6371data : [0.016129,0.012250,0.010480,0.007440,0.005217,0.004492,0.003811,0.002904,0.002405,0.001701]
6372}
6373]
6374}
6375var pieData79 = [
6376{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6377var Chartopt = {datasetFill : false}
6378var myLine = new Chart(document.getElementById("canvas79").getContext("2d")).Bar(ChartData79);
6379</script>
6380<div style="float: left;width=705px">
6381<canvas id="canvas80" height="250" width="705px"></canvas>
6382</div><div class="chart-legend" style="float: left;width: 235px">
6383<ul><style>#id65616:before { background-color: rgba(52,255,54,0.75);}</style>
6384<li id="id65616">Errors</li></ul></div><div style="clear:both;"></div><script>
6385var ChartData80 = {
6386labels : ["40","41","42","43","44","45","46","47","48","49"],
6387datasets : [
6388{
6389fillColor : "rgba(52,255,54,0.75)",
6390strokeColor : "rgba(52,255,54,0.75)",
6391pointColor : "rgba(52,255,54,0.75)",
6392data : [0.001656,0.001066,0.000612,0.001157,0.001429,0.001066,0.001112,0.000749,0.000386,0.000612]
6393}
6394]
6395}
6396var pieData80 = [
6397{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6398var Chartopt = {datasetFill : false}
6399var myLine = new Chart(document.getElementById("canvas80").getContext("2d")).Bar(ChartData80);
6400</script>
6401<div style="float: left;width=705px">
6402<canvas id="canvas81" height="250" width="705px"></canvas>
6403</div><div class="chart-legend" style="float: left;width: 235px">
6404<ul><style>#id65617:before { background-color: rgba(52,255,54,0.75);}</style>
6405<li id="id65617">Errors</li></ul></div><div style="clear:both;"></div><script>
6406var ChartData81 = {
6407labels : ["50","51","52","53","54","55","56","57","58","59"],
6408datasets : [
6409{
6410fillColor : "rgba(52,255,54,0.75)",
6411strokeColor : "rgba(52,255,54,0.75)",
6412pointColor : "rgba(52,255,54,0.75)",
6413data : [0.000408,0.000408,0.000681,0.000340,0.000318,0.000386,0.000227,0.000340,0.000408,0.000204]
6414}
6415]
6416}
6417var pieData81 = [
6418{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6419var Chartopt = {datasetFill : false}
6420var myLine = new Chart(document.getElementById("canvas81").getContext("2d")).Bar(ChartData81);
6421</script>
6422<div style="float: left;width=705px">
6423<canvas id="canvas82" height="250" width="705px"></canvas>
6424</div><div class="chart-legend" style="float: left;width: 235px">
6425<ul><style>#id65618:before { background-color: rgba(52,255,54,0.75);}</style>
6426<li id="id65618">Errors</li></ul></div><div style="clear:both;"></div><script>
6427var ChartData82 = {
6428labels : ["60","61","62","63","64","65","66","67","68","69"],
6429datasets : [
6430{
6431fillColor : "rgba(52,255,54,0.75)",
6432strokeColor : "rgba(52,255,54,0.75)",
6433pointColor : "rgba(52,255,54,0.75)",
6434data : [0.000159,0.000000,0.000091,0.000000,0.000000,0.000068,0.000023,0.000000,0.000000,0.000000]
6435}
6436]
6437}
6438var pieData82 = [
6439{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6440var Chartopt = {datasetFill : false}
6441var myLine = new Chart(document.getElementById("canvas82").getContext("2d")).Bar(ChartData82);
6442</script>
6443<div style="float: left;width=705px">
6444<canvas id="canvas83" height="250" width="705px"></canvas>
6445</div><div class="chart-legend" style="float: left;width: 235px">
6446<ul><style>#id65619:before { background-color: rgba(52,255,54,0.75);}</style>
6447<li id="id65619">Errors</li></ul></div><div style="clear:both;"></div><script>
6448var ChartData83 = {
6449labels : ["70","71","72","73","74","75","76","77","78","79"],
6450datasets : [
6451{
6452fillColor : "rgba(52,255,54,0.75)",
6453strokeColor : "rgba(52,255,54,0.75)",
6454pointColor : "rgba(52,255,54,0.75)",
6455data : [0.000023,0.000000,0.000045,0.000023,0.000000,0.000000,0.000000,0.000023,0.000000,0.000000]
6456}
6457]
6458}
6459var pieData83 = [
6460{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6461var Chartopt = {datasetFill : false}
6462var myLine = new Chart(document.getElementById("canvas83").getContext("2d")).Bar(ChartData83);
6463</script>
6464<div style="float: left;width=705px">
6465<canvas id="canvas84" height="250" width="705px"></canvas>
6466</div><div class="chart-legend" style="float: left;width: 235px">
6467<ul><style>#id65620:before { background-color: rgba(52,255,54,0.75);}</style>
6468<li id="id65620">Errors</li></ul></div><div style="clear:both;"></div><script>
6469var ChartData84 = {
6470labels : ["80","81","82","83","84","85","86","87","88","89"],
6471datasets : [
6472{
6473fillColor : "rgba(52,255,54,0.75)",
6474strokeColor : "rgba(52,255,54,0.75)",
6475pointColor : "rgba(52,255,54,0.75)",
6476data : [0.000000,0.000000,0.000000,0.000023,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6477}
6478]
6479}
6480var pieData84 = [
6481{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6482var Chartopt = {datasetFill : false}
6483var myLine = new Chart(document.getElementById("canvas84").getContext("2d")).Bar(ChartData84);
6484</script>
6485<div style="float: left;width=705px">
6486<canvas id="canvas85" height="250" width="705px"></canvas>
6487</div><div class="chart-legend" style="float: left;width: 235px">
6488<ul><style>#id65621:before { background-color: rgba(52,255,54,0.75);}</style>
6489<li id="id65621">Errors</li></ul></div><div style="clear:both;"></div><script>
6490var ChartData85 = {
6491labels : ["90","91","92","93","94","95","96","97","98","99"],
6492datasets : [
6493{
6494fillColor : "rgba(52,255,54,0.75)",
6495strokeColor : "rgba(52,255,54,0.75)",
6496pointColor : "rgba(52,255,54,0.75)",
6497data : [0.000023,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000023]
6498}
6499]
6500}
6501var pieData85 = [
6502{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6503var Chartopt = {datasetFill : false}
6504var myLine = new Chart(document.getElementById("canvas85").getContext("2d")).Bar(ChartData85);
6505</script>
6506<div style="float: left;width=282px">
6507<canvas id="canvas86" height="250" width="282px"></canvas>
6508</div><div class="chart-legend" style="float: left;width: 235px">
6509<ul><style>#id65622:before { background-color: rgba(52,255,54,0.75);}</style>
6510<li id="id65622">Errors</li></ul></div><div style="clear:both;"></div><script>
6511var ChartData86 = {
6512labels : ["100","101","102","103"],
6513datasets : [
6514{
6515fillColor : "rgba(52,255,54,0.75)",
6516strokeColor : "rgba(52,255,54,0.75)",
6517pointColor : "rgba(52,255,54,0.75)",
6518data : [0.000000,0.000000,0.000000,0.000000]
6519}
6520]
6521}
6522var pieData86 = [
6523{ value: 19.595501, color:"rgba(52,255,54,0.75)"}];
6524var Chartopt = {datasetFill : false}
6525var myLine = new Chart(document.getElementById("canvas86").getContext("2d")).Bar(ChartData86);
6526</script>
6527<p>Barplot shows the percentage of reads (y-axis) with 0, 1, 2 ... errors (x axis) for MAPQ < 20 reads.</p>
6528<section>
6529<h2>Number of Errors Per Read(MAPQ < 10):</h2>
6530<div style="float: left;width=705px">
6531<canvas id="canvas87" height="250" width="705px"></canvas>
6532</div><div class="chart-legend" style="float: left;width: 235px">
6533<ul><style>#id65623:before { background-color: rgba(52,255,54,0.75);}</style>
6534<li id="id65623">Errors</li></ul></div><div style="clear:both;"></div><script>
6535var ChartData87 = {
6536labels : ["0","1","2","3","4","5","6","7","8","9"],
6537datasets : [
6538{
6539fillColor : "rgba(52,255,54,0.75)",
6540strokeColor : "rgba(52,255,54,0.75)",
6541pointColor : "rgba(52,255,54,0.75)",
6542data : [16.452129,15.011422,13.883378,12.442758,10.163780,7.757396,5.745870,4.361080,3.320659,2.575202]
6543}
6544]
6545}
6546var pieData87 = [
6547{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6548var Chartopt = {datasetFill : false}
6549var myLine = new Chart(document.getElementById("canvas87").getContext("2d")).Bar(ChartData87);
6550</script>
6551<div style="float: left;width=705px">
6552<canvas id="canvas88" height="250" width="705px"></canvas>
6553</div><div class="chart-legend" style="float: left;width: 235px">
6554<ul><style>#id65624:before { background-color: rgba(52,255,54,0.75);}</style>
6555<li id="id65624">Errors</li></ul></div><div style="clear:both;"></div><script>
6556var ChartData88 = {
6557labels : ["10","11","12","13","14","15","16","17","18","19"],
6558datasets : [
6559{
6560fillColor : "rgba(52,255,54,0.75)",
6561strokeColor : "rgba(52,255,54,0.75)",
6562pointColor : "rgba(52,255,54,0.75)",
6563data : [1.932568,1.470936,1.115971,0.855121,0.645891,0.491427,0.398592,0.312402,0.236614,0.187711]
6564}
6565]
6566}
6567var pieData88 = [
6568{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6569var Chartopt = {datasetFill : false}
6570var myLine = new Chart(document.getElementById("canvas88").getContext("2d")).Bar(ChartData88);
6571</script>
6572<div style="float: left;width=705px">
6573<canvas id="canvas89" height="250" width="705px"></canvas>
6574</div><div class="chart-legend" style="float: left;width: 235px">
6575<ul><style>#id65625:before { background-color: rgba(52,255,54,0.75);}</style>
6576<li id="id65625">Errors</li></ul></div><div style="clear:both;"></div><script>
6577var ChartData89 = {
6578labels : ["20","21","22","23","24","25","26","27","28","29"],
6579datasets : [
6580{
6581fillColor : "rgba(52,255,54,0.75)",
6582strokeColor : "rgba(52,255,54,0.75)",
6583pointColor : "rgba(52,255,54,0.75)",
6584data : [0.141804,0.108535,0.081933,0.063301,0.048187,0.038263,0.031336,0.027014,0.022628,0.015614]
6585}
6586]
6587}
6588var pieData89 = [
6589{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6590var Chartopt = {datasetFill : false}
6591var myLine = new Chart(document.getElementById("canvas89").getContext("2d")).Bar(ChartData89);
6592</script>
6593<div style="float: left;width=705px">
6594<canvas id="canvas90" height="250" width="705px"></canvas>
6595</div><div class="chart-legend" style="float: left;width: 235px">
6596<ul><style>#id65626:before { background-color: rgba(52,255,54,0.75);}</style>
6597<li id="id65626">Errors</li></ul></div><div style="clear:both;"></div><script>
6598var ChartData90 = {
6599labels : ["30","31","32","33","34","35","36","37","38","39"],
6600datasets : [
6601{
6602fillColor : "rgba(52,255,54,0.75)",
6603strokeColor : "rgba(52,255,54,0.75)",
6604pointColor : "rgba(52,255,54,0.75)",
6605data : [0.011401,0.009121,0.007036,0.006450,0.004017,0.002888,0.002758,0.002128,0.001498,0.001650]
6606}
6607]
6608}
6609var pieData90 = [
6610{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6611var Chartopt = {datasetFill : false}
6612var myLine = new Chart(document.getElementById("canvas90").getContext("2d")).Bar(ChartData90);
6613</script>
6614<div style="float: left;width=705px">
6615<canvas id="canvas91" height="250" width="705px"></canvas>
6616</div><div class="chart-legend" style="float: left;width: 235px">
6617<ul><style>#id65627:before { background-color: rgba(52,255,54,0.75);}</style>
6618<li id="id65627">Errors</li></ul></div><div style="clear:both;"></div><script>
6619var ChartData91 = {
6620labels : ["40","41","42","43","44","45","46","47","48","49"],
6621datasets : [
6622{
6623fillColor : "rgba(52,255,54,0.75)",
6624strokeColor : "rgba(52,255,54,0.75)",
6625pointColor : "rgba(52,255,54,0.75)",
6626data : [0.001216,0.000912,0.000738,0.001151,0.001216,0.001281,0.000869,0.000369,0.000282,0.000760]
6627}
6628]
6629}
6630var pieData91 = [
6631{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6632var Chartopt = {datasetFill : false}
6633var myLine = new Chart(document.getElementById("canvas91").getContext("2d")).Bar(ChartData91);
6634</script>
6635<div style="float: left;width=705px">
6636<canvas id="canvas92" height="250" width="705px"></canvas>
6637</div><div class="chart-legend" style="float: left;width: 235px">
6638<ul><style>#id65628:before { background-color: rgba(52,255,54,0.75);}</style>
6639<li id="id65628">Errors</li></ul></div><div style="clear:both;"></div><script>
6640var ChartData92 = {
6641labels : ["50","51","52","53","54","55","56","57","58","59"],
6642datasets : [
6643{
6644fillColor : "rgba(52,255,54,0.75)",
6645strokeColor : "rgba(52,255,54,0.75)",
6646pointColor : "rgba(52,255,54,0.75)",
6647data : [0.000478,0.000391,0.000391,0.000326,0.000326,0.000087,0.000109,0.000022,0.000043,0.000109]
6648}
6649]
6650}
6651var pieData92 = [
6652{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6653var Chartopt = {datasetFill : false}
6654var myLine = new Chart(document.getElementById("canvas92").getContext("2d")).Bar(ChartData92);
6655</script>
6656<div style="float: left;width=705px">
6657<canvas id="canvas93" height="250" width="705px"></canvas>
6658</div><div class="chart-legend" style="float: left;width: 235px">
6659<ul><style>#id65629:before { background-color: rgba(52,255,54,0.75);}</style>
6660<li id="id65629">Errors</li></ul></div><div style="clear:both;"></div><script>
6661var ChartData93 = {
6662labels : ["60","61","62","63","64","65","66","67","68","69"],
6663datasets : [
6664{
6665fillColor : "rgba(52,255,54,0.75)",
6666strokeColor : "rgba(52,255,54,0.75)",
6667pointColor : "rgba(52,255,54,0.75)",
6668data : [0.000109,0.000043,0.000022,0.000065,0.000043,0.000022,0.000000,0.000000,0.000000,0.000022]
6669}
6670]
6671}
6672var pieData93 = [
6673{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6674var Chartopt = {datasetFill : false}
6675var myLine = new Chart(document.getElementById("canvas93").getContext("2d")).Bar(ChartData93);
6676</script>
6677<div style="float: left;width=705px">
6678<canvas id="canvas94" height="250" width="705px"></canvas>
6679</div><div class="chart-legend" style="float: left;width: 235px">
6680<ul><style>#id65630:before { background-color: rgba(52,255,54,0.75);}</style>
6681<li id="id65630">Errors</li></ul></div><div style="clear:both;"></div><script>
6682var ChartData94 = {
6683labels : ["70","71","72","73","74","75","76","77","78","79"],
6684datasets : [
6685{
6686fillColor : "rgba(52,255,54,0.75)",
6687strokeColor : "rgba(52,255,54,0.75)",
6688pointColor : "rgba(52,255,54,0.75)",
6689data : [0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000022,0.000022,0.000022,0.000022]
6690}
6691]
6692}
6693var pieData94 = [
6694{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6695var Chartopt = {datasetFill : false}
6696var myLine = new Chart(document.getElementById("canvas94").getContext("2d")).Bar(ChartData94);
6697</script>
6698<div style="float: left;width=705px">
6699<canvas id="canvas95" height="250" width="705px"></canvas>
6700</div><div class="chart-legend" style="float: left;width: 235px">
6701<ul><style>#id65631:before { background-color: rgba(52,255,54,0.75);}</style>
6702<li id="id65631">Errors</li></ul></div><div style="clear:both;"></div><script>
6703var ChartData95 = {
6704labels : ["80","81","82","83","84","85","86","87","88","89"],
6705datasets : [
6706{
6707fillColor : "rgba(52,255,54,0.75)",
6708strokeColor : "rgba(52,255,54,0.75)",
6709pointColor : "rgba(52,255,54,0.75)",
6710data : [0.000022,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6711}
6712]
6713}
6714var pieData95 = [
6715{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6716var Chartopt = {datasetFill : false}
6717var myLine = new Chart(document.getElementById("canvas95").getContext("2d")).Bar(ChartData95);
6718</script>
6719<div style="float: left;width=705px">
6720<canvas id="canvas96" height="250" width="705px"></canvas>
6721</div><div class="chart-legend" style="float: left;width: 235px">
6722<ul><style>#id65632:before { background-color: rgba(52,255,54,0.75);}</style>
6723<li id="id65632">Errors</li></ul></div><div style="clear:both;"></div><script>
6724var ChartData96 = {
6725labels : ["90","91","92","93","94","95","96","97","98","99"],
6726datasets : [
6727{
6728fillColor : "rgba(52,255,54,0.75)",
6729strokeColor : "rgba(52,255,54,0.75)",
6730pointColor : "rgba(52,255,54,0.75)",
6731data : [0.000000,0.000022,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6732}
6733]
6734}
6735var pieData96 = [
6736{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6737var Chartopt = {datasetFill : false}
6738var myLine = new Chart(document.getElementById("canvas96").getContext("2d")).Bar(ChartData96);
6739</script>
6740<div style="float: left;width=282px">
6741<canvas id="canvas97" height="250" width="282px"></canvas>
6742</div><div class="chart-legend" style="float: left;width: 235px">
6743<ul><style>#id65633:before { background-color: rgba(52,255,54,0.75);}</style>
6744<li id="id65633">Errors</li></ul></div><div style="clear:both;"></div><script>
6745var ChartData97 = {
6746labels : ["100","101","102","103"],
6747datasets : [
6748{
6749fillColor : "rgba(52,255,54,0.75)",
6750strokeColor : "rgba(52,255,54,0.75)",
6751pointColor : "rgba(52,255,54,0.75)",
6752data : [0.000000,0.000000,0.000000,0.000000]
6753}
6754]
6755}
6756var pieData97 = [
6757{ value: 16.452129, color:"rgba(52,255,54,0.75)"}];
6758var Chartopt = {datasetFill : false}
6759var myLine = new Chart(document.getElementById("canvas97").getContext("2d")).Bar(ChartData97);
6760</script>
6761<p>Barplot shows the percentage of reads (y-axis) with 0, 1, 2 ... errors (x axis) for MAPQ < 10 reads.</p>
6762<section>
6763<h2>Number of Errors Per Read(MAPQ < 3):</h2>
6764<div style="float: left;width=705px">
6765<canvas id="canvas98" height="250" width="705px"></canvas>
6766</div><div class="chart-legend" style="float: left;width: 235px">
6767<ul><style>#id65634:before { background-color: rgba(52,255,54,0.75);}</style>
6768<li id="id65634">Errors</li></ul></div><div style="clear:both;"></div><script>
6769var ChartData98 = {
6770labels : ["0","1","2","3","4","5","6","7","8","9"],
6771datasets : [
6772{
6773fillColor : "rgba(52,255,54,0.75)",
6774strokeColor : "rgba(52,255,54,0.75)",
6775pointColor : "rgba(52,255,54,0.75)",
6776data : [13.274019,13.237806,13.801903,12.264468,10.297383,8.171144,6.349610,4.992737,3.840036,2.990941]
6777}
6778]
6779}
6780var pieData98 = [
6781{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6782var Chartopt = {datasetFill : false}
6783var myLine = new Chart(document.getElementById("canvas98").getContext("2d")).Bar(ChartData98);
6784</script>
6785<div style="float: left;width=705px">
6786<canvas id="canvas99" height="250" width="705px"></canvas>
6787</div><div class="chart-legend" style="float: left;width: 235px">
6788<ul><style>#id65635:before { background-color: rgba(52,255,54,0.75);}</style>
6789<li id="id65635">Errors</li></ul></div><div style="clear:both;"></div><script>
6790var ChartData99 = {
6791labels : ["10","11","12","13","14","15","16","17","18","19"],
6792datasets : [
6793{
6794fillColor : "rgba(52,255,54,0.75)",
6795strokeColor : "rgba(52,255,54,0.75)",
6796pointColor : "rgba(52,255,54,0.75)",
6797data : [2.380628,1.768916,1.393385,1.053567,0.894611,0.688740,0.565897,0.463261,0.347921,0.287800]
6798}
6799]
6800}
6801var pieData99 = [
6802{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6803var Chartopt = {datasetFill : false}
6804var myLine = new Chart(document.getElementById("canvas99").getContext("2d")).Bar(ChartData99);
6805</script>
6806<div style="float: left;width=705px">
6807<canvas id="canvas100" height="250" width="705px"></canvas>
6808</div><div class="chart-legend" style="float: left;width: 235px">
6809<ul><style>#id65636:before { background-color: rgba(52,255,54,0.75);}</style>
6810<li id="id65636">Errors</li></ul></div><div style="clear:both;"></div><script>
6811var ChartData100 = {
6812labels : ["20","21","22","23","24","25","26","27","28","29"],
6813datasets : [
6814{
6815fillColor : "rgba(52,255,54,0.75)",
6816strokeColor : "rgba(52,255,54,0.75)",
6817pointColor : "rgba(52,255,54,0.75)",
6818data : [0.206772,0.154054,0.112939,0.086730,0.068724,0.058820,0.048917,0.044015,0.037413,0.028610]
6819}
6820]
6821}
6822var pieData100 = [
6823{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6824var Chartopt = {datasetFill : false}
6825var myLine = new Chart(document.getElementById("canvas100").getContext("2d")).Bar(ChartData100);
6826</script>
6827<div style="float: left;width=705px">
6828<canvas id="canvas101" height="250" width="705px"></canvas>
6829</div><div class="chart-legend" style="float: left;width: 235px">
6830<ul><style>#id65637:before { background-color: rgba(52,255,54,0.75);}</style>
6831<li id="id65637">Errors</li></ul></div><div style="clear:both;"></div><script>
6832var ChartData101 = {
6833labels : ["30","31","32","33","34","35","36","37","38","39"],
6834datasets : [
6835{
6836fillColor : "rgba(52,255,54,0.75)",
6837strokeColor : "rgba(52,255,54,0.75)",
6838pointColor : "rgba(52,255,54,0.75)",
6839data : [0.014205,0.014205,0.012604,0.009403,0.006002,0.004201,0.003001,0.003101,0.004402,0.002001]
6840}
6841]
6842}
6843var pieData101 = [
6844{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6845var Chartopt = {datasetFill : false}
6846var myLine = new Chart(document.getElementById("canvas101").getContext("2d")).Bar(ChartData101);
6847</script>
6848<div style="float: left;width=705px">
6849<canvas id="canvas102" height="250" width="705px"></canvas>
6850</div><div class="chart-legend" style="float: left;width: 235px">
6851<ul><style>#id65638:before { background-color: rgba(52,255,54,0.75);}</style>
6852<li id="id65638">Errors</li></ul></div><div style="clear:both;"></div><script>
6853var ChartData102 = {
6854labels : ["40","41","42","43","44","45","46","47","48","49"],
6855datasets : [
6856{
6857fillColor : "rgba(52,255,54,0.75)",
6858strokeColor : "rgba(52,255,54,0.75)",
6859pointColor : "rgba(52,255,54,0.75)",
6860data : [0.002701,0.001601,0.000700,0.001100,0.001100,0.001200,0.000900,0.000600,0.000300,0.001100]
6861}
6862]
6863}
6864var pieData102 = [
6865{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6866var Chartopt = {datasetFill : false}
6867var myLine = new Chart(document.getElementById("canvas102").getContext("2d")).Bar(ChartData102);
6868</script>
6869<div style="float: left;width=705px">
6870<canvas id="canvas103" height="250" width="705px"></canvas>
6871</div><div class="chart-legend" style="float: left;width: 235px">
6872<ul><style>#id65639:before { background-color: rgba(52,255,54,0.75);}</style>
6873<li id="id65639">Errors</li></ul></div><div style="clear:both;"></div><script>
6874var ChartData103 = {
6875labels : ["50","51","52","53","54","55","56","57","58","59"],
6876datasets : [
6877{
6878fillColor : "rgba(52,255,54,0.75)",
6879strokeColor : "rgba(52,255,54,0.75)",
6880pointColor : "rgba(52,255,54,0.75)",
6881data : [0.001200,0.000000,0.000700,0.000500,0.000300,0.000200,0.000000,0.000100,0.000100,0.000100]
6882}
6883]
6884}
6885var pieData103 = [
6886{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6887var Chartopt = {datasetFill : false}
6888var myLine = new Chart(document.getElementById("canvas103").getContext("2d")).Bar(ChartData103);
6889</script>
6890<div style="float: left;width=705px">
6891<canvas id="canvas104" height="250" width="705px"></canvas>
6892</div><div class="chart-legend" style="float: left;width: 235px">
6893<ul><style>#id65640:before { background-color: rgba(52,255,54,0.75);}</style>
6894<li id="id65640">Errors</li></ul></div><div style="clear:both;"></div><script>
6895var ChartData104 = {
6896labels : ["60","61","62","63","64","65","66","67","68","69"],
6897datasets : [
6898{
6899fillColor : "rgba(52,255,54,0.75)",
6900strokeColor : "rgba(52,255,54,0.75)",
6901pointColor : "rgba(52,255,54,0.75)",
6902data : [0.000000,0.000200,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000200]
6903}
6904]
6905}
6906var pieData104 = [
6907{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6908var Chartopt = {datasetFill : false}
6909var myLine = new Chart(document.getElementById("canvas104").getContext("2d")).Bar(ChartData104);
6910</script>
6911<div style="float: left;width=705px">
6912<canvas id="canvas105" height="250" width="705px"></canvas>
6913</div><div class="chart-legend" style="float: left;width: 235px">
6914<ul><style>#id65641:before { background-color: rgba(52,255,54,0.75);}</style>
6915<li id="id65641">Errors</li></ul></div><div style="clear:both;"></div><script>
6916var ChartData105 = {
6917labels : ["70","71","72","73","74","75","76","77","78","79"],
6918datasets : [
6919{
6920fillColor : "rgba(52,255,54,0.75)",
6921strokeColor : "rgba(52,255,54,0.75)",
6922pointColor : "rgba(52,255,54,0.75)",
6923data : [0.000000,0.000000,0.000000,0.000100,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6924}
6925]
6926}
6927var pieData105 = [
6928{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6929var Chartopt = {datasetFill : false}
6930var myLine = new Chart(document.getElementById("canvas105").getContext("2d")).Bar(ChartData105);
6931</script>
6932<div style="float: left;width=705px">
6933<canvas id="canvas106" height="250" width="705px"></canvas>
6934</div><div class="chart-legend" style="float: left;width: 235px">
6935<ul><style>#id65642:before { background-color: rgba(52,255,54,0.75);}</style>
6936<li id="id65642">Errors</li></ul></div><div style="clear:both;"></div><script>
6937var ChartData106 = {
6938labels : ["80","81","82","83","84","85","86","87","88","89"],
6939datasets : [
6940{
6941fillColor : "rgba(52,255,54,0.75)",
6942strokeColor : "rgba(52,255,54,0.75)",
6943pointColor : "rgba(52,255,54,0.75)",
6944data : [0.000000,0.000100,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6945}
6946]
6947}
6948var pieData106 = [
6949{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6950var Chartopt = {datasetFill : false}
6951var myLine = new Chart(document.getElementById("canvas106").getContext("2d")).Bar(ChartData106);
6952</script>
6953<div style="float: left;width=705px">
6954<canvas id="canvas107" height="250" width="705px"></canvas>
6955</div><div class="chart-legend" style="float: left;width: 235px">
6956<ul><style>#id65643:before { background-color: rgba(52,255,54,0.75);}</style>
6957<li id="id65643">Errors</li></ul></div><div style="clear:both;"></div><script>
6958var ChartData107 = {
6959labels : ["90","91","92","93","94","95","96","97","98","99"],
6960datasets : [
6961{
6962fillColor : "rgba(52,255,54,0.75)",
6963strokeColor : "rgba(52,255,54,0.75)",
6964pointColor : "rgba(52,255,54,0.75)",
6965data : [0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6966}
6967]
6968}
6969var pieData107 = [
6970{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6971var Chartopt = {datasetFill : false}
6972var myLine = new Chart(document.getElementById("canvas107").getContext("2d")).Bar(ChartData107);
6973</script>
6974<div style="float: left;width=282px">
6975<canvas id="canvas108" height="250" width="282px"></canvas>
6976</div><div class="chart-legend" style="float: left;width: 235px">
6977<ul><style>#id65644:before { background-color: rgba(52,255,54,0.75);}</style>
6978<li id="id65644">Errors</li></ul></div><div style="clear:both;"></div><script>
6979var ChartData108 = {
6980labels : ["100","101","102","103"],
6981datasets : [
6982{
6983fillColor : "rgba(52,255,54,0.75)",
6984strokeColor : "rgba(52,255,54,0.75)",
6985pointColor : "rgba(52,255,54,0.75)",
6986data : [0.000000,0.000000,0.000000,0.000000]
6987}
6988]
6989}
6990var pieData108 = [
6991{ value: 13.274019, color:"rgba(52,255,54,0.75)"}];
6992var Chartopt = {datasetFill : false}
6993var myLine = new Chart(document.getElementById("canvas108").getContext("2d")).Bar(ChartData108);
6994</script>
6995<p>Barplot shows the percentage of reads (y-axis) with 0, 1, 2 ... errors (x axis) for MAPQ < 3 reads.</p>
6996<footer>
6997<div>
6998<section id="about">
6999<h3>About</h3>
7000<p>The vast amount of data produced by next-generation sequencing machines necesitates the development of efficient visualization tools. SAMStat addresses the basic need to display information about the obtained reads both quickly and in a concise form.</p> <p>The plots on this page were draw using the excellent <a href="http://www.chartjs.org">Chartjs library</a>.</p>
7001</section>
7002<section id="contact">
7003<h3>Contact</h3>
7004<p>SAMStat was developed by Timo Lassmann (timolassmann at gmail dot com).</p>
7005<h3>Please cite:</h3>
7006<p>Lassmann et al. (2011) "SAMStat: monitoring biases in next generation sequencing data." Bioinformatics doi:10.1093/bioinformatics/btq614 [<a href ="http://www.ncbi.nlm.nih.gov/pubmed/21088025/">PMID: 21088025</a>] </p>
7007</section>
7008<section id="blogroll">
7009<h3>Links</h3>
7010<ul>
7011<li><a href="http://telethonkids.org.au/">Telethon Kids Institute</a></li>
7012<li><a href="http://samtools.sourceforge.net/">samtools</a></li>
7013<li><a href="http://code.google.com/p/bedtools/">BEDtools</a></li>
7014<li><a href="http://msa.sbc.su.se/">Kalign</a></li>
7015<li><a href="http://ngsview.sourceforge.net/">NGSview</a></li>
7016</ul>
7017</section>
7018</div>
7019</footer>
7020</body>
7021</html>