· 9 years ago · Jan 11, 2017, 04:38 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>CoriellIndex_S1__001_sorted_sorted_recal.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>CoriellIndex_S1__001_sorted_sorted_recal.bam</h1><p>758066680 reads, size:138546192941 bytes, created 2017-01-11 08:42:52 </p>
3428<section>
3429<h2>Mapping stats:</h2>
3430<div style="float: left;width=250px">
3431<canvas id="canvas109" height="250" width="250px"></canvas>
3432</div><div class="chart-legend" style="float: left;width: 235px">
3433<ul><style>#id65645:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3434<li id="id65645">MAPQ >= 30</li><style>#id131181:before { background-color: rgba(237,139,65,1.0);}</style>
3435<li id="id131181">MAPQ < 30</li><style>#id196717:before { background-color: rgba(254,209,65,1.0);}</style>
3436<li id="id196717">MAPQ < 20</li><style>#id262253:before { background-color: rgba(120,190,32,1.0);}</style>
3437<li id="id262253">MAPQ < 10</li><style>#id327789:before { background-color: rgba(66,109,169,1.0);}</style>
3438<li id="id327789">MAPQ < 3</li><style>#id393325:before { background-color: rgba(177,179,179 ,1.0);}</style>
3439<li id="id393325">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3440var ChartData109 = {
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 : [704683328.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 : [10739000.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 : [4471147.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 : [4799355.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 : [1017798.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 : [32356050.000000]
3478}
3479]
3480}
3481var pieData109 = [
3482{ value: 704683328.000000, color:"rgba(224 , 69 , 123,1.0)"},{ value: 10739000.000000, color:"rgba(237,139,65,1.0)"},{ value: 4471147.000000, color:"rgba(254,209,65,1.0)"},{ value: 4799355.000000, color:"rgba(120,190,32,1.0)"},{ value: 1017798.000000, color:"rgba(66,109,169,1.0)"},{ value: 32356050.000000, color:"rgba(177,179,179 ,1.0)"}];
3483var Chartopt = {datasetFill : false}
3484var myLine = new Chart(document.getElementById("canvas109").getContext("2d")).Pie(pieData109);
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>704683328.0</td>
3496<td>93.0</td>
3497</tr>
3498<tr>
3499<td style="background-color: rgba(237,139,65,1.0);" >MAPQ < 30</td>
3500<td>10739000.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>4471147.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>4799355.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>1017798.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>32356050.0</td>
3521<td>4.3</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="canvas110" height="250" width="705px"></canvas>
3534</div><div class="chart-legend" style="float: left;width: 235px">
3535<ul><style>#id65646:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3536<li id="id65646">MAPQ >= 30</li><style>#id131182:before { background-color: rgba(237,139,65,1.0);}</style>
3537<li id="id131182">MAPQ < 30</li><style>#id196718:before { background-color: rgba(254,209,65,1.0);}</style>
3538<li id="id196718">MAPQ < 20</li><style>#id262254:before { background-color: rgba(120,190,32,1.0);}</style>
3539<li id="id262254">MAPQ < 10</li><style>#id327790:before { background-color: rgba(66,109,169,1.0);}</style>
3540<li id="id327790">MAPQ < 3</li><style>#id393326:before { background-color: rgba(177,179,179 ,1.0);}</style>
3541<li id="id393326">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3542var ChartData110 = {
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,45940.000000,3819.000000,3728.000000,4120.000000,4191.000000,4295.000000,4365.000000,4579.000000,4513.000000,4941.000000,4848.000000,5141.000000,5126.000000,5463.000000,5678.000000,5582.000000,5599.000000,5972.000000,5991.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,10939.000000,1221.000000,1327.000000,1390.000000,1284.000000,1448.000000,1392.000000,1478.000000,1488.000000,1648.000000,1675.000000,1719.000000,1866.000000,1801.000000,1827.000000,1629.000000,1749.000000,1764.000000,1827.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,13535.000000,1268.000000,1389.000000,1384.000000,1479.000000,1566.000000,1590.000000,1639.000000,1737.000000,1790.000000,1778.000000,1841.000000,1917.000000,1975.000000,1973.000000,2093.000000,2177.000000,2120.000000,2182.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,11635.000000,1042.000000,1102.000000,1075.000000,1130.000000,1200.000000,1134.000000,1275.000000,1236.000000,1267.000000,1342.000000,1278.000000,1364.000000,1461.000000,1387.000000,1438.000000,1550.000000,1568.000000,1505.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,3509.000000,339.000000,327.000000,349.000000,322.000000,302.000000,338.000000,363.000000,367.000000,429.000000,388.000000,400.000000,402.000000,373.000000,443.000000,474.000000,475.000000,493.000000,472.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,2728348.000000,10507.000000,10622.000000,10963.000000,11146.000000,11476.000000,11296.000000,11665.000000,11753.000000,11997.000000,12134.000000,12211.000000,12092.000000,12177.000000,12362.000000,12660.000000,12619.000000,12917.000000,12871.000000]
3580}
3581]
3582}
3583var pieData110 = [
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("canvas110").getContext("2d")).Line(ChartData110,Chartopt);
3587</script>
3588<div style="float: left;width=705px">
3589<canvas id="canvas111" height="250" width="705px"></canvas>
3590</div><div class="chart-legend" style="float: left;width: 235px">
3591<ul><style>#id65647:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3592<li id="id65647">MAPQ >= 30</li><style>#id131183:before { background-color: rgba(237,139,65,1.0);}</style>
3593<li id="id131183">MAPQ < 30</li><style>#id196719:before { background-color: rgba(254,209,65,1.0);}</style>
3594<li id="id196719">MAPQ < 20</li><style>#id262255:before { background-color: rgba(120,190,32,1.0);}</style>
3595<li id="id262255">MAPQ < 10</li><style>#id327791:before { background-color: rgba(66,109,169,1.0);}</style>
3596<li id="id327791">MAPQ < 3</li><style>#id393327:before { background-color: rgba(177,179,179 ,1.0);}</style>
3597<li id="id393327">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3598var ChartData111 = {
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 : [6170.000000,6303.000000,6605.000000,6660.000000,6810.000000,6967.000000,7031.000000,7197.000000,7326.000000,7532.000000,7773.000000,7509.000000,7777.000000,8053.000000,8065.000000,8222.000000,8297.000000,8335.000000,8898.000000,8487.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 : [1746.000000,1827.000000,1821.000000,1871.000000,1919.000000,1895.000000,1879.000000,1921.000000,1934.000000,1983.000000,2025.000000,2097.000000,1971.000000,2053.000000,2054.000000,2069.000000,2081.000000,2052.000000,2102.000000,2052.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 : [2205.000000,2206.000000,2273.000000,2259.000000,2321.000000,2294.000000,2318.000000,2272.000000,2375.000000,2458.000000,2381.000000,2393.000000,2437.000000,2249.000000,2385.000000,2428.000000,2461.000000,2383.000000,2596.000000,2571.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 : [1663.000000,1591.000000,1601.000000,1640.000000,1721.000000,1824.000000,1768.000000,1768.000000,1775.000000,1746.000000,1753.000000,1765.000000,1895.000000,1870.000000,1905.000000,1918.000000,1866.000000,1827.000000,1907.000000,1871.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 : [464.000000,502.000000,487.000000,514.000000,507.000000,503.000000,486.000000,525.000000,544.000000,508.000000,518.000000,511.000000,502.000000,526.000000,506.000000,483.000000,582.000000,443.000000,531.000000,472.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 : [12719.000000,12738.000000,12902.000000,12756.000000,13348.000000,12979.000000,13197.000000,12990.000000,13025.000000,12872.000000,12908.000000,12569.000000,12563.000000,12478.000000,12670.000000,12601.000000,12652.000000,12685.000000,12537.000000,12155.000000]
3636}
3637]
3638}
3639var pieData111 = [
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("canvas111").getContext("2d")).Line(ChartData111,Chartopt);
3643</script>
3644<div style="float: left;width=705px">
3645<canvas id="canvas112" height="250" width="705px"></canvas>
3646</div><div class="chart-legend" style="float: left;width: 235px">
3647<ul><style>#id65648:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3648<li id="id65648">MAPQ >= 30</li><style>#id131184:before { background-color: rgba(237,139,65,1.0);}</style>
3649<li id="id131184">MAPQ < 30</li><style>#id196720:before { background-color: rgba(254,209,65,1.0);}</style>
3650<li id="id196720">MAPQ < 20</li><style>#id262256:before { background-color: rgba(120,190,32,1.0);}</style>
3651<li id="id262256">MAPQ < 10</li><style>#id327792:before { background-color: rgba(66,109,169,1.0);}</style>
3652<li id="id327792">MAPQ < 3</li><style>#id393328:before { background-color: rgba(177,179,179 ,1.0);}</style>
3653<li id="id393328">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3654var ChartData112 = {
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 : [8690.000000,8876.000000,9114.000000,9426.000000,9589.000000,9520.000000,9955.000000,9726.000000,9912.000000,10343.000000,10194.000000,10771.000000,10776.000000,10853.000000,11224.000000,10945.000000,11913.000000,11719.000000,12099.000000,12656.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 : [2117.000000,2134.000000,2009.000000,2045.000000,1952.000000,2051.000000,2112.000000,2029.000000,1963.000000,2008.000000,2116.000000,2047.000000,1930.000000,1875.000000,1994.000000,2033.000000,1896.000000,1936.000000,1871.000000,1875.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 : [2388.000000,2466.000000,2461.000000,2550.000000,2531.000000,2333.000000,2596.000000,2546.000000,2478.000000,2572.000000,2621.000000,2470.000000,2372.000000,2416.000000,2423.000000,2418.000000,2392.000000,2514.000000,2337.000000,2361.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 : [1854.000000,1936.000000,1878.000000,1997.000000,1877.000000,1926.000000,1873.000000,1800.000000,1835.000000,1753.000000,1863.000000,1834.000000,1933.000000,1753.000000,1835.000000,1847.000000,1752.000000,1706.000000,1846.000000,1745.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 : [474.000000,478.000000,526.000000,469.000000,455.000000,397.000000,448.000000,440.000000,456.000000,466.000000,468.000000,432.000000,394.000000,455.000000,432.000000,420.000000,459.000000,447.000000,418.000000,422.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 : [12459.000000,12156.000000,12155.000000,12104.000000,11965.000000,12225.000000,11965.000000,11784.000000,11911.000000,11682.000000,11613.000000,11648.000000,11398.000000,11478.000000,11142.000000,11279.000000,11220.000000,10794.000000,10786.000000,10561.000000]
3692}
3693]
3694}
3695var pieData112 = [
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("canvas112").getContext("2d")).Line(ChartData112,Chartopt);
3699</script>
3700<div style="float: left;width=705px">
3701<canvas id="canvas113" height="250" width="705px"></canvas>
3702</div><div class="chart-legend" style="float: left;width: 235px">
3703<ul><style>#id65649:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3704<li id="id65649">MAPQ >= 30</li><style>#id131185:before { background-color: rgba(237,139,65,1.0);}</style>
3705<li id="id131185">MAPQ < 30</li><style>#id196721:before { background-color: rgba(254,209,65,1.0);}</style>
3706<li id="id196721">MAPQ < 20</li><style>#id262257:before { background-color: rgba(120,190,32,1.0);}</style>
3707<li id="id262257">MAPQ < 10</li><style>#id327793:before { background-color: rgba(66,109,169,1.0);}</style>
3708<li id="id327793">MAPQ < 3</li><style>#id393329:before { background-color: rgba(177,179,179 ,1.0);}</style>
3709<li id="id393329">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3710var ChartData113 = {
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 : [12796.000000,13290.000000,13557.000000,13789.000000,14488.000000,14762.000000,14952.000000,15837.000000,16371.000000,16942.000000,17428.000000,18453.000000,18816.000000,20161.000000,20479.000000,21654.000000,22487.000000,23763.000000,24760.000000,25783.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,1854.000000,1833.000000,1774.000000,1806.000000,1757.000000,1730.000000,1720.000000,1746.000000,1793.000000,1770.000000,1588.000000,1585.000000,1666.000000,1487.000000,1601.000000,1475.000000,1565.000000,1517.000000,1441.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 : [2269.000000,2346.000000,2220.000000,2225.000000,2143.000000,2131.000000,2200.000000,2017.000000,2176.000000,2059.000000,2013.000000,1934.000000,1895.000000,1825.000000,1776.000000,1828.000000,1789.000000,1790.000000,1822.000000,1645.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 : [1749.000000,1883.000000,1808.000000,1737.000000,1734.000000,1684.000000,1758.000000,1757.000000,1857.000000,1762.000000,1733.000000,1718.000000,1680.000000,1645.000000,1735.000000,1691.000000,1637.000000,1792.000000,1732.000000,1709.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 : [404.000000,415.000000,343.000000,382.000000,370.000000,352.000000,388.000000,360.000000,373.000000,372.000000,373.000000,367.000000,365.000000,376.000000,379.000000,344.000000,407.000000,375.000000,351.000000,377.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 : [10682.000000,10416.000000,10391.000000,10171.000000,10145.000000,10312.000000,10274.000000,10302.000000,9914.000000,9683.000000,9799.000000,9651.000000,9760.000000,9504.000000,9613.000000,9802.000000,9291.000000,9622.000000,9512.000000,9476.000000]
3748}
3749]
3750}
3751var pieData113 = [
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("canvas113").getContext("2d")).Line(ChartData113,Chartopt);
3755</script>
3756<div style="float: left;width=705px">
3757<canvas id="canvas114" height="250" width="705px"></canvas>
3758</div><div class="chart-legend" style="float: left;width: 235px">
3759<ul><style>#id65650:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3760<li id="id65650">MAPQ >= 30</li><style>#id131186:before { background-color: rgba(237,139,65,1.0);}</style>
3761<li id="id131186">MAPQ < 30</li><style>#id196722:before { background-color: rgba(254,209,65,1.0);}</style>
3762<li id="id196722">MAPQ < 20</li><style>#id262258:before { background-color: rgba(120,190,32,1.0);}</style>
3763<li id="id262258">MAPQ < 10</li><style>#id327794:before { background-color: rgba(66,109,169,1.0);}</style>
3764<li id="id327794">MAPQ < 3</li><style>#id393330:before { background-color: rgba(177,179,179 ,1.0);}</style>
3765<li id="id393330">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3766var ChartData114 = {
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 : [27149.000000,28285.000000,30068.000000,30592.000000,32343.000000,34785.000000,36402.000000,36455.000000,38226.000000,40299.000000,42216.000000,43274.000000,46216.000000,49091.000000,51036.000000,52154.000000,55389.000000,55745.000000,58661.000000,61712.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 : [1459.000000,1425.000000,1378.000000,1368.000000,1522.000000,1441.000000,1436.000000,1249.000000,1294.000000,1267.000000,1277.000000,1241.000000,1382.000000,1399.000000,1269.000000,1354.000000,1383.000000,1131.000000,1182.000000,1213.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 : [1601.000000,1611.000000,1693.000000,1560.000000,1678.000000,1650.000000,1618.000000,1491.000000,1485.000000,1391.000000,1394.000000,1385.000000,1447.000000,1465.000000,1452.000000,1473.000000,1464.000000,1168.000000,1241.000000,1241.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 : [1653.000000,1738.000000,1668.000000,1667.000000,1676.000000,1749.000000,1744.000000,1482.000000,1612.000000,1483.000000,1592.000000,1608.000000,1627.000000,1654.000000,1636.000000,1598.000000,1680.000000,1431.000000,1475.000000,1465.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 : [363.000000,324.000000,338.000000,338.000000,351.000000,358.000000,374.000000,331.000000,292.000000,290.000000,305.000000,267.000000,317.000000,316.000000,342.000000,362.000000,344.000000,266.000000,258.000000,313.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 : [9531.000000,9497.000000,9263.000000,9412.000000,9137.000000,9558.000000,9675.000000,9086.000000,9033.000000,9180.000000,9424.000000,9294.000000,9926.000000,9952.000000,9816.000000,9789.000000,10090.000000,9017.000000,9212.000000,9712.000000]
3804}
3805]
3806}
3807var pieData114 = [
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("canvas114").getContext("2d")).Line(ChartData114,Chartopt);
3811</script>
3812<div style="float: left;width=599px">
3813<canvas id="canvas115" height="250" width="599px"></canvas>
3814</div><div class="chart-legend" style="float: left;width: 235px">
3815<ul><style>#id65651:before { background-color: rgba(224 , 69 , 123,1.0);}</style>
3816<li id="id65651">MAPQ >= 30</li><style>#id131187:before { background-color: rgba(237,139,65,1.0);}</style>
3817<li id="id131187">MAPQ < 30</li><style>#id196723:before { background-color: rgba(254,209,65,1.0);}</style>
3818<li id="id196723">MAPQ < 20</li><style>#id262259:before { background-color: rgba(120,190,32,1.0);}</style>
3819<li id="id262259">MAPQ < 10</li><style>#id327795:before { background-color: rgba(66,109,169,1.0);}</style>
3820<li id="id327795">MAPQ < 3</li><style>#id393331:before { background-color: rgba(177,179,179 ,1.0);}</style>
3821<li id="id393331">Unmapped</li></ul></div><div style="clear:both;"></div><script>
3822var ChartData115 = {
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 : [63431.000000,66036.000000,69546.000000,72747.000000,77401.000000,83727.000000,99652.000000,87124.000000,81582.000000,89173.000000,132013.000000,670021.000000,3459793.000000,15369648.000000,47812136.000000,191433808.000000,443312608.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 : [1198.000000,1228.000000,1361.000000,1273.000000,1393.000000,1391.000000,1986.000000,1522.000000,986.000000,1177.000000,1681.000000,6829.000000,47263.000000,222572.000000,628590.000000,2892035.000000,6747457.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 : [1136.000000,1203.000000,1290.000000,1147.000000,1295.000000,1270.000000,1517.000000,1056.000000,969.000000,1004.000000,1279.000000,3086.000000,16731.000000,84458.000000,233471.000000,1165710.000000,2742971.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 : [1429.000000,1452.000000,1520.000000,1570.000000,1692.000000,1570.000000,2032.000000,1357.000000,1251.000000,1357.000000,1622.000000,3575.000000,17987.000000,90966.000000,248735.000000,1282183.000000,2964512.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 : [247.000000,313.000000,367.000000,392.000000,389.000000,403.000000,506.000000,297.000000,307.000000,355.000000,431.000000,816.000000,3504.000000,18823.000000,50601.000000,257355.000000,639135.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 : [9162.000000,10146.000000,10215.000000,10544.000000,10903.000000,11529.000000,13174.000000,10557.000000,9376.000000,10064.000000,12471.000000,26558.000000,126454.000000,626751.000000,1713212.000000,7380096.000000,18547428.000000]
3860}
3861]
3862}
3863var pieData115 = [
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("canvas115").getContext("2d")).Line(ChartData115,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="canvas116" height="250" width="705px"></canvas>
3874</div><div class="chart-legend" style="float: left;width: 235px">
3875<ul><style>#id65652:before { background-color: rgba(52,255,54,0.75);}</style>
3876<li id="id65652">A</li><style>#id131188:before { background-color: rgba(57,124,214,0.75);}</style>
3877<li id="id131188">C</li><style>#id196724:before { background-color: rgba(251,220,60,0.75);}</style>
3878<li id="id196724">G</li><style>#id262260:before { background-color: rgba(255,61,107,0.75);}</style>
3879<li id="id262260">T</li></ul></div><div style="clear:both;"></div><script>
3880var ChartData116 = {
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.130063,-2.084265,-2.170320,-2.155295,-2.167858,-2.106387,-2.140602,-2.106138,-2.113180,-2.121540,-2.108239,-2.115779,-2.127137,-2.118645,-2.123411,-2.114563,-2.121295,-2.223154,-2.109411,-2.112023]
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.859972,-2.094432,-2.064910,-2.033768,-2.024140,-2.020511,-2.016680,-2.044362,-2.038234,-2.035830,-2.045316,-2.052798,-2.037242,-2.052126,-2.042049,-2.044900,-2.041572,-2.160064,-2.056355,-2.053974]
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 pieData116 = [
3910{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.130063, color:"rgba(57,124,214,0.75)"},{ value: -1.859972, 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("canvas116").getContext("2d")).Line(ChartData116,Chartopt);
3913</script>
3914<div style="float: left;width=528px">
3915<canvas id="canvas117" height="250" width="528px"></canvas>
3916</div><div class="chart-legend" style="float: left;width: 235px">
3917<ul><style>#id65653:before { background-color: rgba(52,255,54,0.75);}</style>
3918<li id="id65653">A</li><style>#id131189:before { background-color: rgba(57,124,214,0.75);}</style>
3919<li id="id131189">C</li><style>#id196725:before { background-color: rgba(251,220,60,0.75);}</style>
3920<li id="id196725">G</li><style>#id262261:before { background-color: rgba(255,61,107,0.75);}</style>
3921<li id="id262261">T</li></ul></div><div style="clear:both;"></div><script>
3922var ChartData117 = {
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.112486,-2.119359,-2.113242,-2.119191,-2.107002,-2.099683,-2.107404,-2.108839,-2.074598,-2.095872,-2.096247,-2.103772,-2.126866,-2.155781,-1.924874]
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.050524,-2.055652,-2.048247,-2.059534,-2.045694,-2.062709,-2.038993,-2.047628,-2.075374,-2.039603,-2.093025,-2.090144,-2.111926,-2.024868,-2.055949]
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 pieData117 = [
3952{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.130063, color:"rgba(57,124,214,0.75)"},{ value: -1.859972, 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("canvas117").getContext("2d")).Line(ChartData117,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="canvas118" height="250" width="705px"></canvas>
3961</div><div class="chart-legend" style="float: left;width: 235px">
3962<ul><style>#id65654:before { background-color: rgba(52,255,54,0.75);}</style>
3963<li id="id65654">A</li><style>#id131190:before { background-color: rgba(57,124,214,0.75);}</style>
3964<li id="id131190">C</li><style>#id196726:before { background-color: rgba(251,220,60,0.75);}</style>
3965<li id="id196726">G</li><style>#id262262:before { background-color: rgba(255,61,107,0.75);}</style>
3966<li id="id262262">T</li></ul></div><div style="clear:both;"></div><script>
3967var ChartData118 = {
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.035526,-1.995209,-2.065790,-2.060464,-2.068081,-2.044372,-2.085839,-2.032308,-2.037823,-2.043332,-2.054828,-1.991050,-2.052529,-2.048276,-2.025811,-2.043048,-1.997994,-2.030964,-2.089543,-2.063148]
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.158934,-2.356966,-2.284494,-2.226752,-2.247000,-2.254581,-2.214330,-2.236857,-2.241974,-2.271199,-2.278483,-2.320869,-2.297492,-2.220917,-2.269608,-2.252999,-2.346342,-2.247429,-2.224769,-2.234462]
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 pieData118 = [
3997{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.035526, color:"rgba(57,124,214,0.75)"},{ value: -2.158934, 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("canvas118").getContext("2d")).Line(ChartData118,Chartopt);
4000</script>
4001<div style="float: left;width=528px">
4002<canvas id="canvas119" height="250" width="528px"></canvas>
4003</div><div class="chart-legend" style="float: left;width: 235px">
4004<ul><style>#id65655:before { background-color: rgba(52,255,54,0.75);}</style>
4005<li id="id65655">A</li><style>#id131191:before { background-color: rgba(57,124,214,0.75);}</style>
4006<li id="id131191">C</li><style>#id196727:before { background-color: rgba(251,220,60,0.75);}</style>
4007<li id="id196727">G</li><style>#id262263:before { background-color: rgba(255,61,107,0.75);}</style>
4008<li id="id262263">T</li></ul></div><div style="clear:both;"></div><script>
4009var ChartData119 = {
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.060495,-2.072112,-2.085796,-2.116800,-2.033884,-2.051885,-2.075118,-2.062433,-2.022940,-2.051572,-2.027142,-2.013658,-2.041110,-2.117136,-1.911915]
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.283667,-2.219786,-2.197885,-2.207107,-2.193737,-2.236029,-2.194906,-2.249388,-2.268022,-2.217832,-2.308900,-2.303189,-2.306081,-2.238396,-2.203624]
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 pieData119 = [
4039{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.035526, color:"rgba(57,124,214,0.75)"},{ value: -2.158934, 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("canvas119").getContext("2d")).Line(ChartData119,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="canvas120" height="250" width="705px"></canvas>
4048</div><div class="chart-legend" style="float: left;width: 235px">
4049<ul><style>#id65656:before { background-color: rgba(52,255,54,0.75);}</style>
4050<li id="id65656">A</li><style>#id131192:before { background-color: rgba(57,124,214,0.75);}</style>
4051<li id="id131192">C</li><style>#id196728:before { background-color: rgba(251,220,60,0.75);}</style>
4052<li id="id196728">G</li><style>#id262264:before { background-color: rgba(255,61,107,0.75);}</style>
4053<li id="id262264">T</li></ul></div><div style="clear:both;"></div><script>
4054var ChartData120 = {
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.314718,-2.268586,-2.317718,-2.306440,-2.313124,-2.261820,-2.302408,-2.273528,-2.283092,-2.268077,-2.261744,-2.263315,-2.292768,-2.265512,-2.295696,-2.280994,-2.268414,-2.284640,-2.273325,-2.269721]
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.224238,-2.437248,-2.431440,-2.405037,-2.385120,-2.376671,-2.383234,-2.388871,-2.388561,-2.386401,-2.384204,-2.396567,-2.396393,-2.403097,-2.388706,-2.398067,-2.374240,-2.351500,-2.387578,-2.399726]
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 pieData120 = [
4084{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.314718, color:"rgba(57,124,214,0.75)"},{ value: -2.224238, 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("canvas120").getContext("2d")).Line(ChartData120,Chartopt);
4087</script>
4088<div style="float: left;width=528px">
4089<canvas id="canvas121" height="250" width="528px"></canvas>
4090</div><div class="chart-legend" style="float: left;width: 235px">
4091<ul><style>#id65657:before { background-color: rgba(52,255,54,0.75);}</style>
4092<li id="id65657">A</li><style>#id131193:before { background-color: rgba(57,124,214,0.75);}</style>
4093<li id="id131193">C</li><style>#id196729:before { background-color: rgba(251,220,60,0.75);}</style>
4094<li id="id196729">G</li><style>#id262265:before { background-color: rgba(255,61,107,0.75);}</style>
4095<li id="id262265">T</li></ul></div><div style="clear:both;"></div><script>
4096var ChartData121 = {
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.272114,-2.281830,-2.265675,-2.279953,-2.274560,-2.268284,-2.281499,-2.261982,-2.224052,-2.244810,-2.248166,-2.264320,-2.291456,-2.317738,-2.099159]
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.387052,-2.373194,-2.385587,-2.380949,-2.356868,-2.406732,-2.359705,-2.404666,-2.399900,-2.370886,-2.414459,-2.433161,-2.458565,-2.353330,-2.391152]
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 pieData121 = [
4126{ value: nan, color:"rgba(52,255,54,0.75)"},{ value: -2.314718, color:"rgba(57,124,214,0.75)"},{ value: -2.224238, 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("canvas121").getContext("2d")).Line(ChartData121,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="canvas122" height="250" width="705px"></canvas>
4135</div><div class="chart-legend" style="float: left;width: 235px">
4136<ul><style>#id65658:before { background-color: rgba(52,255,54,0.75);}</style>
4137<li id="id65658">A</li><style>#id131194:before { background-color: rgba(57,124,214,0.75);}</style>
4138<li id="id131194">C</li><style>#id196730:before { background-color: rgba(251,220,60,0.75);}</style>
4139<li id="id196730">G</li><style>#id262266:before { background-color: rgba(255,61,107,0.75);}</style>
4140<li id="id262266">T</li></ul></div><div style="clear:both;"></div><script>
4141var ChartData122 = {
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.149521,0.112611,0.107947,0.111420,0.117039,0.157019,0.148626,0.151355,0.148761,0.137870,0.145953,0.159601,0.142792,0.136237,0.135115,0.140606,0.142862,0.136416,0.135729,0.130939]
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.154953,0.157950,0.131930,0.127010,0.129113,0.165929,0.173948,0.167293,0.154668,0.158411,0.159850,0.169626,0.164674,0.148665,0.155426,0.171132,0.158642,0.151514,0.154337,0.157279]
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.242354,0.188104,0.172975,0.166610,0.167398,0.213842,0.208196,0.203888,0.201981,0.192650,0.199882,0.214800,0.195737,0.184423,0.189881,0.193362,0.191664,0.194499,0.187532,0.194289]
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.049828,0.075320,0.078706,0.072541,0.078288,0.107746,0.108649,0.112311,0.104936,0.109796,0.114998,0.121299,0.116856,0.113799,0.114265,0.124855,0.123669,0.121942,0.126528,0.138732]
4167}
4168]
4169}
4170var pieData122 = [
4171{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4172var Chartopt = {datasetFill : false}
4173var myLine = new Chart(document.getElementById("canvas122").getContext("2d")).Bar(ChartData122);
4174</script>
4175<div style="float: left;width=705px">
4176<canvas id="canvas123" height="250" width="705px"></canvas>
4177</div><div class="chart-legend" style="float: left;width: 235px">
4178<ul><style>#id65659:before { background-color: rgba(52,255,54,0.75);}</style>
4179<li id="id65659">A</li><style>#id131195:before { background-color: rgba(57,124,214,0.75);}</style>
4180<li id="id131195">C</li><style>#id196731:before { background-color: rgba(251,220,60,0.75);}</style>
4181<li id="id196731">G</li><style>#id262267:before { background-color: rgba(255,61,107,0.75);}</style>
4182<li id="id262267">T</li></ul></div><div style="clear:both;"></div><script>
4183var ChartData123 = {
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.131684,0.135734,0.133318,0.126848,0.129515,0.131830,0.132127,0.122620,0.126754,0.131020,0.121530,0.118514,0.128007,0.121410,0.116918,0.114980,0.116128,0.118116,0.112106,0.116865]
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.164779,0.168464,0.160661,0.157550,0.168447,0.159281,0.170512,0.159196,0.163344,0.176341,0.165140,0.153478,0.175995,0.161391,0.157824,0.167233,0.167717,0.175568,0.155238,0.168751]
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.188061,0.193648,0.198041,0.173458,0.188672,0.191199,0.195671,0.183103,0.181975,0.195224,0.181395,0.179627,0.189069,0.178598,0.171946,0.166343,0.181889,0.183035,0.177320,0.186931]
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.132204,0.144975,0.139719,0.149801,0.142583,0.159555,0.148607,0.147728,0.156660,0.153406,0.149811,0.153002,0.157425,0.165954,0.166711,0.157974,0.166463,0.162006,0.155215,0.161712]
4209}
4210]
4211}
4212var pieData123 = [
4213{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4214var Chartopt = {datasetFill : false}
4215var myLine = new Chart(document.getElementById("canvas123").getContext("2d")).Bar(ChartData123);
4216</script>
4217<div style="float: left;width=705px">
4218<canvas id="canvas124" height="250" width="705px"></canvas>
4219</div><div class="chart-legend" style="float: left;width: 235px">
4220<ul><style>#id65660:before { background-color: rgba(52,255,54,0.75);}</style>
4221<li id="id65660">A</li><style>#id131196:before { background-color: rgba(57,124,214,0.75);}</style>
4222<li id="id131196">C</li><style>#id196732:before { background-color: rgba(251,220,60,0.75);}</style>
4223<li id="id196732">G</li><style>#id262268:before { background-color: rgba(255,61,107,0.75);}</style>
4224<li id="id262268">T</li></ul></div><div style="clear:both;"></div><script>
4225var ChartData124 = {
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.128207,0.116010,0.112973,0.106525,0.113965,0.120325,0.118588,0.123817,0.116442,0.120973,0.117964,0.113942,0.110061,0.110746,0.118486,0.109666,0.115059,0.119428,0.121839,0.112586]
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.191080,0.177557,0.167317,0.167864,0.179477,0.183782,0.193205,0.200471,0.194098,0.195081,0.198668,0.193804,0.190982,0.191827,0.206440,0.203845,0.210950,0.216287,0.225073,0.226743]
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.198629,0.184197,0.183346,0.175521,0.193370,0.195452,0.192719,0.210518,0.198135,0.218477,0.202286,0.207999,0.201625,0.205922,0.209922,0.199961,0.214439,0.219311,0.230835,0.221200]
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.176615,0.167711,0.171499,0.160669,0.169333,0.181811,0.185549,0.188051,0.194314,0.187144,0.189481,0.184487,0.182511,0.191232,0.201065,0.192169,0.197318,0.218241,0.215233,0.217821]
4251}
4252]
4253}
4254var pieData124 = [
4255{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4256var Chartopt = {datasetFill : false}
4257var myLine = new Chart(document.getElementById("canvas124").getContext("2d")).Bar(ChartData124);
4258</script>
4259<div style="float: left;width=705px">
4260<canvas id="canvas125" height="250" width="705px"></canvas>
4261</div><div class="chart-legend" style="float: left;width: 235px">
4262<ul><style>#id65661:before { background-color: rgba(52,255,54,0.75);}</style>
4263<li id="id65661">A</li><style>#id131197:before { background-color: rgba(57,124,214,0.75);}</style>
4264<li id="id131197">C</li><style>#id196733:before { background-color: rgba(251,220,60,0.75);}</style>
4265<li id="id196733">G</li><style>#id262269:before { background-color: rgba(255,61,107,0.75);}</style>
4266<li id="id262269">T</li></ul></div><div style="clear:both;"></div><script>
4267var ChartData125 = {
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.118885,0.109889,0.114236,0.110870,0.109868,0.126259,0.107668,0.111587,0.111989,0.108088,0.118621,0.110387,0.116693,0.121138,0.122316,0.123251,0.118625,0.111029,0.111109,0.115008]
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.235001,0.234428,0.231909,0.238005,0.239556,0.257427,0.242341,0.253303,0.254934,0.260125,0.269685,0.271085,0.284750,0.288601,0.297912,0.296196,0.294585,0.288351,0.295547,0.306489]
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.244373,0.217187,0.231336,0.233493,0.237467,0.257885,0.231841,0.242044,0.264302,0.253361,0.272942,0.263018,0.266727,0.281342,0.289305,0.294996,0.300092,0.287602,0.290450,0.297157]
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.217603,0.216289,0.226331,0.219918,0.224786,0.242255,0.236194,0.235555,0.243501,0.245964,0.255697,0.258253,0.267340,0.271969,0.274914,0.287112,0.283315,0.282933,0.288812,0.294101]
4293}
4294]
4295}
4296var pieData125 = [
4297{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4298var Chartopt = {datasetFill : false}
4299var myLine = new Chart(document.getElementById("canvas125").getContext("2d")).Bar(ChartData125);
4300</script>
4301<div style="float: left;width=705px">
4302<canvas id="canvas126" height="250" width="705px"></canvas>
4303</div><div class="chart-legend" style="float: left;width: 235px">
4304<ul><style>#id65662:before { background-color: rgba(52,255,54,0.75);}</style>
4305<li id="id65662">A</li><style>#id131198:before { background-color: rgba(57,124,214,0.75);}</style>
4306<li id="id131198">C</li><style>#id196734:before { background-color: rgba(251,220,60,0.75);}</style>
4307<li id="id196734">G</li><style>#id262270:before { background-color: rgba(255,61,107,0.75);}</style>
4308<li id="id262270">T</li></ul></div><div style="clear:both;"></div><script>
4309var ChartData126 = {
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.110758,0.113677,0.113644,0.112020,0.119987,0.113441,0.111939,0.112503,0.114897,0.121106,0.117935,0.117326,0.117892,0.112470,0.108332,0.123136,0.111041,0.113116,0.117716,0.121232]
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.300767,0.300366,0.301636,0.303096,0.323925,0.316122,0.315246,0.330989,0.340823,0.346689,0.350374,0.361695,0.357195,0.354975,0.360162,0.385498,0.378261,0.376575,0.401774,0.414597]
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.286922,0.297524,0.313447,0.298028,0.321808,0.320175,0.319924,0.326928,0.330349,0.338984,0.346847,0.343634,0.347814,0.345126,0.339889,0.369967,0.360426,0.364010,0.377117,0.385815]
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.295896,0.310019,0.310653,0.320421,0.331894,0.329022,0.339454,0.340328,0.350860,0.370005,0.364479,0.375573,0.391169,0.389576,0.394859,0.412917,0.405707,0.430707,0.430515,0.448737]
4335}
4336]
4337}
4338var pieData126 = [
4339{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4340var Chartopt = {datasetFill : false}
4341var myLine = new Chart(document.getElementById("canvas126").getContext("2d")).Bar(ChartData126);
4342</script>
4343<div style="float: left;width=705px">
4344<canvas id="canvas127" height="250" width="705px"></canvas>
4345</div><div class="chart-legend" style="float: left;width: 235px">
4346<ul><style>#id65663:before { background-color: rgba(52,255,54,0.75);}</style>
4347<li id="id65663">A</li><style>#id131199:before { background-color: rgba(57,124,214,0.75);}</style>
4348<li id="id131199">C</li><style>#id196735:before { background-color: rgba(251,220,60,0.75);}</style>
4349<li id="id196735">G</li><style>#id262271:before { background-color: rgba(255,61,107,0.75);}</style>
4350<li id="id262271">T</li></ul></div><div style="clear:both;"></div><script>
4351var ChartData127 = {
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.123125,0.123493,0.124024,0.120716,0.122044,0.113298,0.111572,0.119317,0.123476,0.124606,0.114432,0.114131,0.119545,0.117694,0.117248,0.126651,0.119123,0.120736,0.118287,0.124073]
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.414603,0.419164,0.437114,0.434052,0.440683,0.446758,0.443946,0.464928,0.472275,0.499648,0.483355,0.486175,0.507755,0.512346,0.518669,0.541339,0.547313,0.557166,0.566185,0.584403]
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.395705,0.415794,0.408576,0.408202,0.421534,0.413529,0.420200,0.434506,0.446302,0.453371,0.446650,0.460003,0.473968,0.473367,0.487676,0.500946,0.507438,0.521581,0.511140,0.535740]
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.460844,0.465486,0.473497,0.483477,0.497763,0.488235,0.504993,0.514288,0.537182,0.548328,0.541829,0.558016,0.575114,0.581222,0.594197,0.613640,0.618100,0.637066,0.649810,0.663231]
4377}
4378]
4379}
4380var pieData127 = [
4381{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4382var Chartopt = {datasetFill : false}
4383var myLine = new Chart(document.getElementById("canvas127").getContext("2d")).Bar(ChartData127);
4384</script>
4385<div style="float: left;width=705px">
4386<canvas id="canvas128" height="250" width="705px"></canvas>
4387</div><div class="chart-legend" style="float: left;width: 235px">
4388<ul><style>#id65664:before { background-color: rgba(52,255,54,0.75);}</style>
4389<li id="id65664">A</li><style>#id131200:before { background-color: rgba(57,124,214,0.75);}</style>
4390<li id="id131200">C</li><style>#id196736:before { background-color: rgba(251,220,60,0.75);}</style>
4391<li id="id196736">G</li><style>#id262272:before { background-color: rgba(255,61,107,0.75);}</style>
4392<li id="id262272">T</li></ul></div><div style="clear:both;"></div><script>
4393var ChartData128 = {
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.127184,0.126251,0.119678,0.126282,0.124391,0.115159,0.121355,0.120745,0.123348,0.114180,0.110072,0.114116,0.104049,0.109698,0.108950,0.098204,0.097392,0.104728,0.102135,0.095915]
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.605509,0.603628,0.616078,0.634825,0.651799,0.653634,0.662611,0.690715,0.700228,0.708500,0.732499,0.746069,0.754380,0.781600,0.795010,0.808220,0.831819,0.856596,0.886039,0.893263]
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.546626,0.552362,0.557589,0.581322,0.580146,0.595301,0.612094,0.618936,0.637868,0.641429,0.644227,0.681763,0.675089,0.696476,0.726324,0.723941,0.736747,0.773989,0.786744,0.790435]
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.681126,0.696734,0.697720,0.724597,0.744847,0.741797,0.770805,0.784208,0.809861,0.820377,0.833781,0.854527,0.876795,0.900492,0.928408,0.942230,0.963512,1.006320,1.027498,1.040197]
4419}
4420]
4421}
4422var pieData128 = [
4423{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4424var Chartopt = {datasetFill : false}
4425var myLine = new Chart(document.getElementById("canvas128").getContext("2d")).Bar(ChartData128);
4426</script>
4427<div style="float: left;width=352px">
4428<canvas id="canvas129" height="250" width="352px"></canvas>
4429</div><div class="chart-legend" style="float: left;width: 235px">
4430<ul><style>#id65665:before { background-color: rgba(52,255,54,0.75);}</style>
4431<li id="id65665">A</li><style>#id131201:before { background-color: rgba(57,124,214,0.75);}</style>
4432<li id="id131201">C</li><style>#id196737:before { background-color: rgba(251,220,60,0.75);}</style>
4433<li id="id196737">G</li><style>#id262273:before { background-color: rgba(255,61,107,0.75);}</style>
4434<li id="id262273">T</li></ul></div><div style="clear:both;"></div><script>
4435var ChartData129 = {
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.096693,0.087893,0.103917,0.089848,0.085328,0.079898,0.077213,0.078174,0.072698,0.018840]
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.920073,0.936045,0.974551,1.002073,1.026430,1.060717,1.082219,1.086928,1.074823,0.956429]
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.842265,0.847533,0.895270,0.888911,0.899889,0.922316,0.950379,0.957895,0.941984,0.762749]
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.065641,1.102119,1.139977,1.165870,1.198740,1.233295,1.283618,1.311415,1.312646,1.175601]
4461}
4462]
4463}
4464var pieData129 = [
4465{ value: 0.149521, color:"rgba(52,255,54,0.75)"},{ value: 0.154953, color:"rgba(57,124,214,0.75)"},{ value: 0.242354, color:"rgba(251,220,60,0.75)"},{ value: 0.049828, color:"rgba(255,61,107,0.75)"}];
4466var Chartopt = {datasetFill : false}
4467var myLine = new Chart(document.getElementById("canvas129").getContext("2d")).Bar(ChartData129);
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="canvas130" height="250" width="705px"></canvas>
4474</div><div class="chart-legend" style="float: left;width: 235px">
4475<ul><style>#id65666:before { background-color: rgba(52,255,54,0.75);}</style>
4476<li id="id65666">A</li><style>#id131202:before { background-color: rgba(57,124,214,0.75);}</style>
4477<li id="id131202">C</li><style>#id196738:before { background-color: rgba(251,220,60,0.75);}</style>
4478<li id="id196738">G</li><style>#id262274:before { background-color: rgba(255,61,107,0.75);}</style>
4479<li id="id262274">T</li></ul></div><div style="clear:both;"></div><script>
4480var ChartData130 = {
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.367530,0.279933,0.253385,0.248356,0.268191,0.382615,0.364997,0.374048,0.373638,0.384608,0.384365,0.398212,0.386898,0.387112,0.390232,0.385343,0.388723,0.387736,0.380855,0.387140]
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.344678,0.326744,0.283565,0.271804,0.285939,0.429537,0.426287,0.412422,0.402533,0.412143,0.438588,0.438318,0.424183,0.410057,0.420402,0.439063,0.435869,0.416333,0.417748,0.425189]
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.439948,0.326250,0.307887,0.288854,0.311491,0.456318,0.450545,0.433560,0.423112,0.436968,0.440665,0.462650,0.442052,0.423512,0.441037,0.444567,0.443570,0.446122,0.431185,0.452966]
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.187420,0.222460,0.227479,0.215430,0.226166,0.347854,0.346308,0.340767,0.344632,0.357799,0.377912,0.363525,0.365081,0.371804,0.362753,0.378201,0.370174,0.374253,0.385706,0.399600]
4506}
4507]
4508}
4509var pieData130 = [
4510{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4511var Chartopt = {datasetFill : false}
4512var myLine = new Chart(document.getElementById("canvas130").getContext("2d")).Bar(ChartData130);
4513</script>
4514<div style="float: left;width=705px">
4515<canvas id="canvas131" height="250" width="705px"></canvas>
4516</div><div class="chart-legend" style="float: left;width: 235px">
4517<ul><style>#id65667:before { background-color: rgba(52,255,54,0.75);}</style>
4518<li id="id65667">A</li><style>#id131203:before { background-color: rgba(57,124,214,0.75);}</style>
4519<li id="id131203">C</li><style>#id196739:before { background-color: rgba(251,220,60,0.75);}</style>
4520<li id="id196739">G</li><style>#id262275:before { background-color: rgba(255,61,107,0.75);}</style>
4521<li id="id262275">T</li></ul></div><div style="clear:both;"></div><script>
4522var ChartData131 = {
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.377577,0.380566,0.393389,0.375985,0.390949,0.365658,0.375072,0.369615,0.376283,0.376990,0.361607,0.365034,0.372120,0.372381,0.361374,0.360518,0.361505,0.362315,0.360220,0.363488]
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.449930,0.450833,0.445777,0.446690,0.460108,0.464485,0.469215,0.459251,0.468116,0.499814,0.501667,0.498594,0.508064,0.511016,0.519089,0.534137,0.541792,0.535487,0.539333,0.565900]
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.449902,0.454670,0.459642,0.449939,0.478257,0.485995,0.487075,0.480734,0.489785,0.513968,0.506276,0.513307,0.524202,0.530031,0.526976,0.528308,0.538346,0.669504,0.539436,0.554251]
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.389766,0.413195,0.418866,0.426204,0.438951,0.443309,0.456616,0.457631,0.478052,0.499637,0.480315,0.496974,0.509079,0.527191,0.545535,0.517460,0.533653,0.543067,0.557873,0.582047]
4548}
4549]
4550}
4551var pieData131 = [
4552{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4553var Chartopt = {datasetFill : false}
4554var myLine = new Chart(document.getElementById("canvas131").getContext("2d")).Bar(ChartData131);
4555</script>
4556<div style="float: left;width=705px">
4557<canvas id="canvas132" height="250" width="705px"></canvas>
4558</div><div class="chart-legend" style="float: left;width: 235px">
4559<ul><style>#id65668:before { background-color: rgba(52,255,54,0.75);}</style>
4560<li id="id65668">A</li><style>#id131204:before { background-color: rgba(57,124,214,0.75);}</style>
4561<li id="id131204">C</li><style>#id196740:before { background-color: rgba(251,220,60,0.75);}</style>
4562<li id="id196740">G</li><style>#id262276:before { background-color: rgba(255,61,107,0.75);}</style>
4563<li id="id262276">T</li></ul></div><div style="clear:both;"></div><script>
4564var ChartData132 = {
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.380082,0.358683,0.368861,0.347351,0.360071,0.358516,0.370602,0.371422,0.363255,0.365490,0.354567,0.360089,0.350284,0.355890,0.360639,0.342266,0.349725,0.358553,0.352361,0.339128]
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.588379,0.590064,0.585306,0.599432,0.608464,0.644129,0.648627,0.654139,0.677745,0.691731,0.710262,0.703324,0.709861,0.731530,0.764783,0.774895,0.791517,0.797653,0.830608,0.847127]
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.604190,0.583360,0.595642,0.596871,0.643272,0.648189,0.661849,0.696108,0.698808,0.729174,0.742415,0.742611,0.749362,0.770183,0.804023,0.798147,0.829416,0.841298,0.864745,0.875575]
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.577633,0.602691,0.603948,0.622656,0.637694,0.653068,0.647723,0.676935,0.692765,0.713726,0.705382,0.717003,0.734733,0.756393,0.774672,0.756458,0.784328,0.824136,0.835627,0.860164]
4590}
4591]
4592}
4593var pieData132 = [
4594{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4595var Chartopt = {datasetFill : false}
4596var myLine = new Chart(document.getElementById("canvas132").getContext("2d")).Bar(ChartData132);
4597</script>
4598<div style="float: left;width=705px">
4599<canvas id="canvas133" height="250" width="705px"></canvas>
4600</div><div class="chart-legend" style="float: left;width: 235px">
4601<ul><style>#id65669:before { background-color: rgba(52,255,54,0.75);}</style>
4602<li id="id65669">A</li><style>#id131205:before { background-color: rgba(57,124,214,0.75);}</style>
4603<li id="id131205">C</li><style>#id196741:before { background-color: rgba(251,220,60,0.75);}</style>
4604<li id="id196741">G</li><style>#id262277:before { background-color: rgba(255,61,107,0.75);}</style>
4605<li id="id262277">T</li></ul></div><div style="clear:both;"></div><script>
4606var ChartData133 = {
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.347863,0.344967,0.351606,0.339492,0.340767,0.348720,0.338067,0.345293,0.340479,0.341000,0.348077,0.342835,0.345172,0.349642,0.344073,0.357566,0.347565,0.340730,0.336549,0.335441]
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.877791,0.879346,0.894134,0.922954,0.954288,0.986274,0.984095,0.995595,1.016063,1.035469,1.075659,1.089114,1.096014,1.132154,1.150619,1.171245,1.175137,1.169951,1.194459,1.207868]
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.893863,0.885585,0.916584,0.934165,0.942220,0.994487,0.985595,0.995540,1.040572,1.156141,1.095409,1.076106,1.092811,1.131753,1.147667,1.178434,1.168191,1.173033,1.204302,1.207487]
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.860639,0.883155,0.890548,0.916324,0.939790,0.932731,0.944241,0.971534,0.982522,1.003408,1.018391,1.036260,1.050480,1.079402,1.108027,1.097002,1.138076,1.158944,1.181283,1.209479]
4632}
4633]
4634}
4635var pieData133 = [
4636{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4637var Chartopt = {datasetFill : false}
4638var myLine = new Chart(document.getElementById("canvas133").getContext("2d")).Bar(ChartData133);
4639</script>
4640<div style="float: left;width=705px">
4641<canvas id="canvas134" height="250" width="705px"></canvas>
4642</div><div class="chart-legend" style="float: left;width: 235px">
4643<ul><style>#id65670:before { background-color: rgba(52,255,54,0.75);}</style>
4644<li id="id65670">A</li><style>#id131206:before { background-color: rgba(57,124,214,0.75);}</style>
4645<li id="id131206">C</li><style>#id196742:before { background-color: rgba(251,220,60,0.75);}</style>
4646<li id="id196742">G</li><style>#id262278:before { background-color: rgba(255,61,107,0.75);}</style>
4647<li id="id262278">T</li></ul></div><div style="clear:both;"></div><script>
4648var ChartData134 = {
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.336279,0.339296,0.344604,0.327675,0.346624,0.335217,0.335711,0.337145,0.340385,0.336884,0.337285,0.345237,0.337918,0.328410,0.323885,0.344920,0.333532,0.335925,0.326529,0.331874]
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.222740,1.243170,1.224425,1.255936,1.288388,1.310746,1.297737,1.310755,1.324369,1.354493,1.375352,1.395819,1.397197,1.400549,1.427070,1.458432,1.445786,1.454512,1.483173,1.517841]
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.236046,1.245628,1.364587,1.267930,1.313810,1.326269,1.322516,1.314731,1.366049,1.375016,1.412152,1.416519,1.401779,1.433029,1.458022,1.516519,1.480222,1.498603,1.536447,1.558032]
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.204647,1.230599,1.261021,1.296713,1.317525,1.314163,1.341335,1.383537,1.414815,1.447304,1.435357,1.465015,1.516817,1.543784,1.576143,1.563023,1.587457,1.640376,1.670202,1.704591]
4674}
4675]
4676}
4677var pieData134 = [
4678{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4679var Chartopt = {datasetFill : false}
4680var myLine = new Chart(document.getElementById("canvas134").getContext("2d")).Bar(ChartData134);
4681</script>
4682<div style="float: left;width=705px">
4683<canvas id="canvas135" height="250" width="705px"></canvas>
4684</div><div class="chart-legend" style="float: left;width: 235px">
4685<ul><style>#id65671:before { background-color: rgba(52,255,54,0.75);}</style>
4686<li id="id65671">A</li><style>#id131207:before { background-color: rgba(57,124,214,0.75);}</style>
4687<li id="id131207">C</li><style>#id196743:before { background-color: rgba(251,220,60,0.75);}</style>
4688<li id="id196743">G</li><style>#id262279:before { background-color: rgba(255,61,107,0.75);}</style>
4689<li id="id262279">T</li></ul></div><div style="clear:both;"></div><script>
4690var ChartData135 = {
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.339957,0.332154,0.337117,0.329314,0.336428,0.325002,0.323168,0.332284,0.328019,0.332983,0.318465,0.319620,0.321566,0.317907,0.320160,0.323010,0.320374,0.315476,0.317432,0.323345]
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.544008,1.539464,1.539538,1.564485,1.590111,1.604414,1.604572,1.603324,1.663637,1.671133,1.703948,1.708418,1.720281,1.728280,1.786945,1.822749,1.828820,1.817451,1.870910,1.906509]
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.607766,1.597011,1.591889,1.620905,1.665257,1.677726,1.687299,1.668032,1.719937,1.749567,1.795642,1.756299,1.762212,1.818642,1.835050,1.889049,1.873266,1.872791,1.897123,1.933700]
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.683360,1.736661,1.770332,1.802393,1.825272,1.792681,1.826902,1.887690,1.923093,1.975352,1.922423,1.985809,2.031446,2.071571,2.105093,2.065630,2.132005,2.181646,2.225580,2.274346]
4716}
4717]
4718}
4719var pieData135 = [
4720{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4721var Chartopt = {datasetFill : false}
4722var myLine = new Chart(document.getElementById("canvas135").getContext("2d")).Bar(ChartData135);
4723</script>
4724<div style="float: left;width=705px">
4725<canvas id="canvas136" height="250" width="705px"></canvas>
4726</div><div class="chart-legend" style="float: left;width: 235px">
4727<ul><style>#id65672:before { background-color: rgba(52,255,54,0.75);}</style>
4728<li id="id65672">A</li><style>#id131208:before { background-color: rgba(57,124,214,0.75);}</style>
4729<li id="id131208">C</li><style>#id196744:before { background-color: rgba(251,220,60,0.75);}</style>
4730<li id="id196744">G</li><style>#id262280:before { background-color: rgba(255,61,107,0.75);}</style>
4731<li id="id262280">T</li></ul></div><div style="clear:both;"></div><script>
4732var ChartData136 = {
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.320095,0.329528,0.319201,0.321119,0.318819,0.305745,0.326213,0.320607,0.318400,0.302766,0.299125,0.314294,0.301397,0.300847,0.293994,0.286377,0.277326,0.289105,0.284235,0.273033]
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.953888,1.925775,1.914582,1.979532,2.006416,2.032843,2.051299,2.039687,2.102654,2.143980,2.187699,2.182391,2.183769,2.247006,2.283462,2.340358,2.339836,2.324276,2.429425,2.483322]
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.998259,1.986051,1.941931,2.016510,2.051746,2.100149,2.092783,2.072083,2.130338,2.176692,2.238644,2.217804,2.178052,2.264987,2.329398,2.377158,2.361821,2.360695,2.437517,2.480883]
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.237583,2.276031,2.348105,2.424863,2.453757,2.416305,2.455331,2.547192,2.612981,2.653497,2.592020,2.685604,2.772558,2.841587,2.911593,2.820915,2.930198,3.031483,3.127358,3.199423]
4758}
4759]
4760}
4761var pieData136 = [
4762{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4763var Chartopt = {datasetFill : false}
4764var myLine = new Chart(document.getElementById("canvas136").getContext("2d")).Bar(ChartData136);
4765</script>
4766<div style="float: left;width=352px">
4767<canvas id="canvas137" height="250" width="352px"></canvas>
4768</div><div class="chart-legend" style="float: left;width: 235px">
4769<ul><style>#id65673:before { background-color: rgba(52,255,54,0.75);}</style>
4770<li id="id65673">A</li><style>#id131209:before { background-color: rgba(57,124,214,0.75);}</style>
4771<li id="id131209">C</li><style>#id196745:before { background-color: rgba(251,220,60,0.75);}</style>
4772<li id="id196745">G</li><style>#id262281:before { background-color: rgba(255,61,107,0.75);}</style>
4773<li id="id262281">T</li></ul></div><div style="clear:both;"></div><script>
4774var ChartData137 = {
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.268275,0.252528,0.266207,0.251662,0.233132,0.214135,0.195279,0.205261,0.194627,0.063470]
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.546634,2.554223,2.559959,2.700847,2.774756,2.863647,2.853971,2.806984,2.816026,2.538169]
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.627964,2.570332,2.590651,2.654018,2.747742,2.846327,2.858125,2.801099,2.753199,2.286321]
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.116110,3.261775,3.399786,3.525692,3.615253,3.597979,3.828336,3.969466,4.079504,3.510085]
4800}
4801]
4802}
4803var pieData137 = [
4804{ value: 0.367530, color:"rgba(52,255,54,0.75)"},{ value: 0.344678, color:"rgba(57,124,214,0.75)"},{ value: 0.439948, color:"rgba(251,220,60,0.75)"},{ value: 0.187420, color:"rgba(255,61,107,0.75)"}];
4805var Chartopt = {datasetFill : false}
4806var myLine = new Chart(document.getElementById("canvas137").getContext("2d")).Bar(ChartData137);
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="canvas138" height="250" width="705px"></canvas>
4813</div><div class="chart-legend" style="float: left;width: 235px">
4814<ul><style>#id65674:before { background-color: rgba(52,255,54,0.75);}</style>
4815<li id="id65674">A</li><style>#id131210:before { background-color: rgba(57,124,214,0.75);}</style>
4816<li id="id131210">C</li><style>#id196746:before { background-color: rgba(251,220,60,0.75);}</style>
4817<li id="id196746">G</li><style>#id262282:before { background-color: rgba(255,61,107,0.75);}</style>
4818<li id="id262282">T</li></ul></div><div style="clear:both;"></div><script>
4819var ChartData138 = {
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.750546,0.596268,0.403386,0.362860,0.367355,0.626864,0.612259,0.628519,0.610470,0.599622,0.622301,0.633887,0.644130,0.638695,0.634446,0.629950,0.641290,0.649587,0.641357,0.622614]
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.659272,0.616397,0.394776,0.378874,0.358387,0.648939,0.638024,0.609888,0.598034,0.592130,0.651667,0.646769,0.631985,0.616822,0.634066,0.655760,0.653524,0.622816,0.616866,0.653568]
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.770809,0.620042,0.415441,0.383347,0.378740,0.689040,0.665646,0.641468,0.616687,0.621764,0.661776,0.674234,0.659406,0.627222,0.658802,0.648089,0.644846,0.642900,0.627669,0.669090]
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.436912,0.512598,0.376570,0.337139,0.313410,0.580723,0.559968,0.557508,0.575669,0.557441,0.604476,0.587031,0.596156,0.622413,0.602038,0.619282,0.600182,0.609933,0.614988,0.640104]
4845}
4846]
4847}
4848var pieData138 = [
4849{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
4850var Chartopt = {datasetFill : false}
4851var myLine = new Chart(document.getElementById("canvas138").getContext("2d")).Bar(ChartData138);
4852</script>
4853<div style="float: left;width=705px">
4854<canvas id="canvas139" height="250" width="705px"></canvas>
4855</div><div class="chart-legend" style="float: left;width: 235px">
4856<ul><style>#id65675:before { background-color: rgba(52,255,54,0.75);}</style>
4857<li id="id65675">A</li><style>#id131211:before { background-color: rgba(57,124,214,0.75);}</style>
4858<li id="id131211">C</li><style>#id196747:before { background-color: rgba(251,220,60,0.75);}</style>
4859<li id="id196747">G</li><style>#id262283:before { background-color: rgba(255,61,107,0.75);}</style>
4860<li id="id262283">T</li></ul></div><div style="clear:both;"></div><script>
4861var ChartData139 = {
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.614630,0.612326,0.647709,0.620847,0.635542,0.607115,0.621563,0.631225,0.631672,0.627222,0.613444,0.610582,0.639813,0.625522,0.606533,0.603089,0.615681,0.635027,0.613019,0.603961]
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.685350,0.801360,0.819678,0.749427,0.790781,0.992162,0.957629,0.849670,0.860674,1.005178,0.942890,1.028483,1.094864,1.000549,1.045593,1.169968,1.110274,1.103453,1.219374,1.357482]
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.669783,0.782104,0.840590,0.757703,0.893462,0.830592,0.956511,0.877582,0.993817,0.995315,0.962527,1.087618,1.094216,1.039241,1.149973,1.041590,1.165316,1.121837,1.224272,1.189203]
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.724602,0.708901,0.751888,0.914687,0.939043,0.848977,0.920748,0.934078,0.990842,1.036468,1.190299,1.064179,1.102335,1.243305,1.215594,1.223936,1.201258,1.240487,1.297318,1.349475]
4887}
4888]
4889}
4890var pieData139 = [
4891{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
4892var Chartopt = {datasetFill : false}
4893var myLine = new Chart(document.getElementById("canvas139").getContext("2d")).Bar(ChartData139);
4894</script>
4895<div style="float: left;width=705px">
4896<canvas id="canvas140" height="250" width="705px"></canvas>
4897</div><div class="chart-legend" style="float: left;width: 235px">
4898<ul><style>#id65676:before { background-color: rgba(52,255,54,0.75);}</style>
4899<li id="id65676">A</li><style>#id131212:before { background-color: rgba(57,124,214,0.75);}</style>
4900<li id="id131212">C</li><style>#id196748:before { background-color: rgba(251,220,60,0.75);}</style>
4901<li id="id196748">G</li><style>#id262284:before { background-color: rgba(255,61,107,0.75);}</style>
4902<li id="id262284">T</li></ul></div><div style="clear:both;"></div><script>
4903var ChartData140 = {
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.614675,0.600114,0.623352,0.582401,0.597050,0.593874,0.600114,0.612617,0.593517,0.583005,0.571419,0.573186,0.593248,0.570435,0.590766,0.573544,0.581775,0.593919,0.584347,0.563390]
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.313623,1.338560,1.244491,1.294679,1.329994,1.406686,1.411606,1.428917,1.593305,1.624192,1.683483,1.590531,1.690998,1.656644,1.823022,1.774176,1.812220,1.839215,1.898752,1.967034]
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.254868,1.257373,1.403130,1.314584,1.399328,1.426972,1.554433,1.519498,1.653692,1.634189,1.692384,1.782183,1.743400,1.824319,1.886764,1.926530,2.088144,2.004005,2.172999,2.100490]
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.432697,1.478144,1.506593,1.677690,1.558817,1.660312,1.596391,1.659865,1.706519,1.846260,1.816379,1.884617,1.950305,2.088413,1.958759,2.021316,2.068239,2.144125,2.203685,2.357069]
4929}
4930]
4931}
4932var pieData140 = [
4933{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
4934var Chartopt = {datasetFill : false}
4935var myLine = new Chart(document.getElementById("canvas140").getContext("2d")).Bar(ChartData140);
4936</script>
4937<div style="float: left;width=705px">
4938<canvas id="canvas141" height="250" width="705px"></canvas>
4939</div><div class="chart-legend" style="float: left;width: 235px">
4940<ul><style>#id65677:before { background-color: rgba(52,255,54,0.75);}</style>
4941<li id="id65677">A</li><style>#id131213:before { background-color: rgba(57,124,214,0.75);}</style>
4942<li id="id131213">C</li><style>#id196749:before { background-color: rgba(251,220,60,0.75);}</style>
4943<li id="id196749">G</li><style>#id262285:before { background-color: rgba(255,61,107,0.75);}</style>
4944<li id="id262285">T</li></ul></div><div style="clear:both;"></div><script>
4945var ChartData141 = {
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.569876,0.575512,0.586404,0.559923,0.555294,0.564889,0.553191,0.558134,0.561892,0.543283,0.562048,0.555115,0.566879,0.551984,0.533532,0.553974,0.544961,0.545677,0.530803,0.540063]
4953},
4954{
4955fillColor : "rgba(57,124,214,0.75)",
4956strokeColor : "rgba(57,124,214,0.75)",
4957pointColor : "rgba(57,124,214,0.75)",
4958data : [2.023418,2.048736,2.169578,2.148844,2.312091,2.273891,2.291314,2.317526,2.404171,2.451854,2.535815,2.555675,2.582111,2.728181,2.715903,2.760768,2.777028,2.731066,2.891048,2.876108]
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.243205,2.265437,2.217261,2.272124,2.378741,2.471670,2.391266,2.414190,2.492984,2.626284,2.726727,2.605349,2.696243,2.700895,2.830683,2.902723,2.787361,2.785728,2.867296,3.054697]
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.259957,2.295496,2.348860,2.509490,2.392384,2.440179,2.584929,2.575827,2.609912,2.649790,2.595128,2.781233,2.746163,2.825002,2.794137,2.725006,2.914040,2.960739,2.919877,3.014461]
4971}
4972]
4973}
4974var pieData141 = [
4975{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
4976var Chartopt = {datasetFill : false}
4977var myLine = new Chart(document.getElementById("canvas141").getContext("2d")).Bar(ChartData141);
4978</script>
4979<div style="float: left;width=705px">
4980<canvas id="canvas142" height="250" width="705px"></canvas>
4981</div><div class="chart-legend" style="float: left;width: 235px">
4982<ul><style>#id65678:before { background-color: rgba(52,255,54,0.75);}</style>
4983<li id="id65678">A</li><style>#id131214:before { background-color: rgba(57,124,214,0.75);}</style>
4984<li id="id131214">C</li><style>#id196750:before { background-color: rgba(251,220,60,0.75);}</style>
4985<li id="id196750">G</li><style>#id262286:before { background-color: rgba(255,61,107,0.75);}</style>
4986<li id="id262286">T</li></ul></div><div style="clear:both;"></div><script>
4987var ChartData142 = {
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.539437,0.531363,0.545252,0.520739,0.523289,0.516959,0.527091,0.526397,0.517160,0.501616,0.508594,0.516624,0.515304,0.503003,0.490255,0.513090,0.508304,0.506224,0.496181,0.493028]
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.906726,2.931574,2.872708,3.062078,3.015401,3.057202,3.064158,3.054317,3.215394,3.191418,3.230469,3.250419,3.194818,3.281350,3.309129,3.379133,3.362314,3.381683,3.407000,3.450569]
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.955282,2.934683,3.133022,3.016631,3.087686,3.115644,3.097840,3.089207,3.268244,3.317426,3.309151,3.292377,3.437686,3.346636,3.509279,3.490670,3.451061,3.417334,3.656646,3.606770]
5007},
5008{
5009fillColor : "rgba(255,61,107,0.75)",
5010strokeColor : "rgba(255,61,107,0.75)",
5011pointColor : "rgba(255,61,107,0.75)",
5012data : [3.046780,3.133223,3.102336,3.276184,3.301904,3.267417,3.342744,3.457860,3.440593,3.534373,3.615515,3.747204,3.789050,3.966477,4.032992,4.032880,4.091523,4.075174,4.193286,4.216368]
5013}
5014]
5015}
5016var pieData142 = [
5017{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
5018var Chartopt = {datasetFill : false}
5019var myLine = new Chart(document.getElementById("canvas142").getContext("2d")).Bar(ChartData142);
5020</script>
5021<div style="float: left;width=705px">
5022<canvas id="canvas143" height="250" width="705px"></canvas>
5023</div><div class="chart-legend" style="float: left;width: 235px">
5024<ul><style>#id65679:before { background-color: rgba(52,255,54,0.75);}</style>
5025<li id="id65679">A</li><style>#id131215:before { background-color: rgba(57,124,214,0.75);}</style>
5026<li id="id131215">C</li><style>#id196751:before { background-color: rgba(251,220,60,0.75);}</style>
5027<li id="id196751">G</li><style>#id262287:before { background-color: rgba(255,61,107,0.75);}</style>
5028<li id="id262287">T</li></ul></div><div style="clear:both;"></div><script>
5029var ChartData143 = {
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.503629,0.504412,0.505955,0.483008,0.483970,0.483858,0.481107,0.487280,0.472362,0.472183,0.465809,0.468806,0.468694,0.456460,0.452143,0.473458,0.456214,0.468314,0.456236,0.450399]
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.599323,3.492169,3.440907,3.613860,3.594671,3.630858,3.630769,3.754764,3.703546,3.757045,3.994769,3.891574,3.799920,4.001300,3.948830,3.998616,4.016867,4.041916,4.084880,4.233209]
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.706611,3.724190,3.724547,3.718576,3.989804,3.888756,3.937111,3.766528,3.993539,4.054284,4.063096,4.064952,4.029346,4.118048,4.336360,4.254658,4.280915,4.176758,4.329628,4.405223]
5049},
5050{
5051fillColor : "rgba(255,61,107,0.75)",
5052strokeColor : "rgba(255,61,107,0.75)",
5053pointColor : "rgba(255,61,107,0.75)",
5054data : [4.165039,4.324394,4.382298,4.427320,4.469144,4.420476,4.510408,4.581978,4.753724,4.765623,4.589851,4.746612,4.929496,4.976643,5.036650,4.840883,5.088470,5.139844,5.372425,5.363814]
5055}
5056]
5057}
5058var pieData143 = [
5059{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
5060var Chartopt = {datasetFill : false}
5061var myLine = new Chart(document.getElementById("canvas143").getContext("2d")).Bar(ChartData143);
5062</script>
5063<div style="float: left;width=705px">
5064<canvas id="canvas144" height="250" width="705px"></canvas>
5065</div><div class="chart-legend" style="float: left;width: 235px">
5066<ul><style>#id65680:before { background-color: rgba(52,255,54,0.75);}</style>
5067<li id="id65680">A</li><style>#id131216:before { background-color: rgba(57,124,214,0.75);}</style>
5068<li id="id131216">C</li><style>#id196752:before { background-color: rgba(251,220,60,0.75);}</style>
5069<li id="id196752">G</li><style>#id262288:before { background-color: rgba(255,61,107,0.75);}</style>
5070<li id="id262288">T</li></ul></div><div style="clear:both;"></div><script>
5071var ChartData144 = {
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.453620,0.447022,0.449683,0.443421,0.448565,0.439552,0.441207,0.425417,0.436018,0.411796,0.420071,0.420250,0.404013,0.415419,0.398846,0.387037,0.385472,0.395939,0.390325,0.374826]
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.400527,4.311377,4.121426,4.462748,4.339849,4.408958,4.426806,4.345350,4.476234,4.753076,4.760523,4.651178,4.673700,4.932381,4.829007,4.956580,4.930256,4.836812,5.139956,5.291595]
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.462076,4.358680,4.492606,4.463687,4.651804,4.773540,4.622952,4.515061,4.768933,4.781569,4.927886,4.836186,4.842851,4.969933,5.056152,5.395662,5.139397,5.068297,5.398838,5.356098]
5091},
5092{
5093fillColor : "rgba(255,61,107,0.75)",
5094strokeColor : "rgba(255,61,107,0.75)",
5095pointColor : "rgba(255,61,107,0.75)",
5096data : [5.178559,5.364261,5.490158,5.631754,5.698649,5.526546,5.697867,5.904503,6.078798,6.075600,5.833380,6.213730,6.262465,6.402832,6.593297,6.240837,6.592246,6.875887,6.928469,7.208799]
5097}
5098]
5099}
5100var pieData144 = [
5101{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
5102var Chartopt = {datasetFill : false}
5103var myLine = new Chart(document.getElementById("canvas144").getContext("2d")).Bar(ChartData144);
5104</script>
5105<div style="float: left;width=352px">
5106<canvas id="canvas145" height="250" width="352px"></canvas>
5107</div><div class="chart-legend" style="float: left;width: 235px">
5108<ul><style>#id65681:before { background-color: rgba(52,255,54,0.75);}</style>
5109<li id="id65681">A</li><style>#id131217:before { background-color: rgba(57,124,214,0.75);}</style>
5110<li id="id131217">C</li><style>#id196753:before { background-color: rgba(251,220,60,0.75);}</style>
5111<li id="id196753">G</li><style>#id262289:before { background-color: rgba(255,61,107,0.75);}</style>
5112<li id="id262289">T</li></ul></div><div style="clear:both;"></div><script>
5113var ChartData145 = {
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.364179,0.358924,0.359170,0.350089,0.321886,0.289859,0.308601,0.352795,0.415084,0.147412]
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.331429,5.339033,5.367773,5.678207,5.763711,5.922462,5.954356,5.917453,6.129680,5.486579]
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.676597,5.617574,5.525227,5.679303,5.868718,6.228894,6.155423,5.948988,6.005641,4.991359]
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.778328,7.242682,7.507045,7.792429,7.976298,7.702050,8.277093,8.585492,9.009030,7.664566]
5139}
5140]
5141}
5142var pieData145 = [
5143{ value: 0.750546, color:"rgba(52,255,54,0.75)"},{ value: 0.659272, color:"rgba(57,124,214,0.75)"},{ value: 0.770809, color:"rgba(251,220,60,0.75)"},{ value: 0.436912, color:"rgba(255,61,107,0.75)"}];
5144var Chartopt = {datasetFill : false}
5145var myLine = new Chart(document.getElementById("canvas145").getContext("2d")).Bar(ChartData145);
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="canvas146" height="250" width="705px"></canvas>
5152</div><div class="chart-legend" style="float: left;width: 235px">
5153<ul><style>#id65682:before { background-color: rgba(52,255,54,0.75);}</style>
5154<li id="id65682">A</li><style>#id131218:before { background-color: rgba(57,124,214,0.75);}</style>
5155<li id="id131218">C</li><style>#id196754:before { background-color: rgba(251,220,60,0.75);}</style>
5156<li id="id196754">G</li><style>#id262290:before { background-color: rgba(255,61,107,0.75);}</style>
5157<li id="id262290">T</li></ul></div><div style="clear:both;"></div><script>
5158var ChartData146 = {
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.603914,0.496629,0.552991,0.443080,0.375613,0.629855,0.622542,0.648566,0.625042,0.661193,0.654650,0.654671,0.661714,0.666235,0.659380,0.636836,0.638002,0.650337,0.647358,0.660151]
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.517424,0.502776,0.507693,0.422682,0.368800,0.640586,0.642461,0.612624,0.608394,0.605748,0.659797,0.658026,0.630064,0.620271,0.623959,0.666569,0.654150,0.630501,0.628689,0.647587]
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.633627,0.491837,0.555491,0.433662,0.396553,0.681675,0.684717,0.647983,0.629543,0.670340,0.699323,0.715909,0.686238,0.660089,0.680966,0.729202,0.681425,0.707178,0.668444,0.698198]
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.322481,0.406888,0.509214,0.385864,0.321439,0.568597,0.575369,0.568264,0.565243,0.590204,0.592517,0.578515,0.590850,0.614333,0.609644,0.604331,0.595059,0.616270,0.603081,0.667923]
5184}
5185]
5186}
5187var pieData146 = [
5188{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5189var Chartopt = {datasetFill : false}
5190var myLine = new Chart(document.getElementById("canvas146").getContext("2d")).Bar(ChartData146);
5191</script>
5192<div style="float: left;width=705px">
5193<canvas id="canvas147" height="250" width="705px"></canvas>
5194</div><div class="chart-legend" style="float: left;width: 235px">
5195<ul><style>#id65683:before { background-color: rgba(52,255,54,0.75);}</style>
5196<li id="id65683">A</li><style>#id131219:before { background-color: rgba(57,124,214,0.75);}</style>
5197<li id="id131219">C</li><style>#id196755:before { background-color: rgba(251,220,60,0.75);}</style>
5198<li id="id196755">G</li><style>#id262291:before { background-color: rgba(255,61,107,0.75);}</style>
5199<li id="id262291">T</li></ul></div><div style="clear:both;"></div><script>
5200var ChartData147 = {
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.641961,0.651108,0.669507,0.639628,0.644566,0.622438,0.644128,0.639273,0.667402,0.645774,0.629710,0.628376,0.645816,0.649004,0.627168,0.622000,0.631793,0.631397,0.621125,0.607352]
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.777521,2.066069,1.854124,0.815505,0.859970,3.202805,2.161874,0.892474,0.922791,2.010249,0.977506,2.045629,2.272472,1.000426,1.052808,2.358713,1.119567,1.084167,2.181272,3.482197]
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.783730,1.874606,2.093177,0.834633,1.952262,0.910164,1.987850,0.931729,2.018813,1.034660,1.007844,2.306206,2.093677,1.098127,2.365651,1.087688,2.358400,1.149238,2.408407,1.213642]
5220},
5221{
5222fillColor : "rgba(255,61,107,0.75)",
5223strokeColor : "rgba(255,61,107,0.75)",
5224pointColor : "rgba(255,61,107,0.75)",
5225data : [1.785553,0.779105,0.826590,2.128619,2.165478,0.895454,0.952128,0.957962,0.976548,1.043307,3.332052,1.075103,1.076853,2.196545,1.181930,2.172938,1.156468,1.188472,1.239583,1.303321]
5226}
5227]
5228}
5229var pieData147 = [
5230{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5231var Chartopt = {datasetFill : false}
5232var myLine = new Chart(document.getElementById("canvas147").getContext("2d")).Bar(ChartData147);
5233</script>
5234<div style="float: left;width=705px">
5235<canvas id="canvas148" height="250" width="705px"></canvas>
5236</div><div class="chart-legend" style="float: left;width: 235px">
5237<ul><style>#id65684:before { background-color: rgba(52,255,54,0.75);}</style>
5238<li id="id65684">A</li><style>#id131220:before { background-color: rgba(57,124,214,0.75);}</style>
5239<li id="id131220">C</li><style>#id196756:before { background-color: rgba(251,220,60,0.75);}</style>
5240<li id="id196756">G</li><style>#id262292:before { background-color: rgba(255,61,107,0.75);}</style>
5241<li id="id262292">T</li></ul></div><div style="clear:both;"></div><script>
5242var ChartData148 = {
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.619354,0.602914,0.626147,0.583578,0.601081,0.586454,0.610290,0.618291,0.600122,0.578578,0.577390,0.578015,0.592975,0.577036,0.578890,0.590288,0.592871,0.594226,0.585433,0.576223]
5250},
5251{
5252fillColor : "rgba(57,124,214,0.75)",
5253strokeColor : "rgba(57,124,214,0.75)",
5254pointColor : "rgba(57,124,214,0.75)",
5255data : [2.281119,2.494439,1.226165,1.257315,1.323449,1.366059,1.373164,1.374747,2.708593,2.747619,2.809773,1.551271,2.604788,1.618405,2.705926,1.681268,1.720273,1.741901,1.801805,1.860667]
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.248543,1.273775,2.538237,1.288319,1.364287,1.406293,2.486709,1.497660,2.567533,1.594048,1.607737,2.684215,1.643137,1.728316,1.808222,1.825995,3.165946,1.899568,3.236727,2.029314]
5262},
5263{
5264fillColor : "rgba(255,61,107,0.75)",
5265strokeColor : "rgba(255,61,107,0.75)",
5266pointColor : "rgba(255,61,107,0.75)",
5267data : [2.539070,2.397697,2.404302,3.744982,1.469968,2.741348,1.516287,1.559460,1.618968,2.699800,2.681485,2.937249,3.016885,4.131222,1.859187,2.867156,2.942666,2.984193,3.041450,4.372546]
5268}
5269]
5270}
5271var pieData148 = [
5272{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5273var Chartopt = {datasetFill : false}
5274var myLine = new Chart(document.getElementById("canvas148").getContext("2d")).Bar(ChartData148);
5275</script>
5276<div style="float: left;width=705px">
5277<canvas id="canvas149" height="250" width="705px"></canvas>
5278</div><div class="chart-legend" style="float: left;width: 235px">
5279<ul><style>#id65685:before { background-color: rgba(52,255,54,0.75);}</style>
5280<li id="id65685">A</li><style>#id131221:before { background-color: rgba(57,124,214,0.75);}</style>
5281<li id="id131221">C</li><style>#id196757:before { background-color: rgba(251,220,60,0.75);}</style>
5282<li id="id196757">G</li><style>#id262293:before { background-color: rgba(255,61,107,0.75);}</style>
5283<li id="id262293">T</li></ul></div><div style="clear:both;"></div><script>
5284var ChartData149 = {
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.575015,0.558283,0.570973,0.540323,0.544365,0.555825,0.549803,0.564347,0.564368,0.553116,0.571494,0.537510,0.577786,0.556575,0.541031,0.564430,0.534905,0.561951,0.564326,0.529488]
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.932468,1.944782,3.202701,2.016917,3.338969,2.180126,2.164895,2.174250,2.241405,2.301018,2.379820,2.397572,2.383779,3.529704,2.523631,2.589244,2.573825,2.546426,3.688516,2.655315]
5298},
5299{
5300fillColor : "rgba(251,220,60,0.75)",
5301strokeColor : "rgba(251,220,60,0.75)",
5302pointColor : "rgba(251,220,60,0.75)",
5303data : [3.158049,3.318404,2.127098,2.156748,3.265814,3.354492,2.273576,2.279973,2.369152,3.479322,3.776820,2.519422,3.548873,2.593307,3.910255,3.999183,2.702947,2.688465,2.828213,5.133544]
5304},
5305{
5306fillColor : "rgba(255,61,107,0.75)",
5307strokeColor : "rgba(255,61,107,0.75)",
5308pointColor : "rgba(255,61,107,0.75)",
5309data : [3.268335,3.130983,3.204056,4.513815,2.251052,3.444588,4.552403,3.587294,3.629238,3.681015,3.401707,4.750576,3.768319,3.821430,2.625957,2.508129,3.907983,3.765548,2.746640,2.846320]
5310}
5311]
5312}
5313var pieData149 = [
5314{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5315var Chartopt = {datasetFill : false}
5316var myLine = new Chart(document.getElementById("canvas149").getContext("2d")).Bar(ChartData149);
5317</script>
5318<div style="float: left;width=705px">
5319<canvas id="canvas150" height="250" width="705px"></canvas>
5320</div><div class="chart-legend" style="float: left;width: 235px">
5321<ul><style>#id65686:before { background-color: rgba(52,255,54,0.75);}</style>
5322<li id="id65686">A</li><style>#id131222:before { background-color: rgba(57,124,214,0.75);}</style>
5323<li id="id131222">C</li><style>#id196758:before { background-color: rgba(251,220,60,0.75);}</style>
5324<li id="id196758">G</li><style>#id262294:before { background-color: rgba(255,61,107,0.75);}</style>
5325<li id="id262294">T</li></ul></div><div style="clear:both;"></div><script>
5326var ChartData150 = {
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.532259,0.550970,0.540969,0.505735,0.531905,0.528634,0.530509,0.519278,0.521570,0.522028,0.527133,0.525508,0.519132,0.503901,0.506589,0.529300,0.512152,0.517965,0.504005,0.502151]
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.708302,2.704843,2.684423,4.048794,2.835193,2.884867,2.888326,2.849425,4.206336,3.000549,3.057848,3.075330,3.008237,3.101063,3.139734,3.236351,3.209827,4.210962,3.252562,3.342428]
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.897577,2.895014,5.250247,2.969357,3.044159,3.136109,3.074392,3.050597,4.234819,4.483811,3.323030,3.283712,5.570394,3.365931,4.511335,3.545351,3.464945,3.448068,4.860382,3.678682]
5346},
5347{
5348fillColor : "rgba(255,61,107,0.75)",
5349strokeColor : "rgba(255,61,107,0.75)",
5350pointColor : "rgba(255,61,107,0.75)",
5351data : [4.012456,4.110636,2.933790,4.098968,4.160476,4.062129,4.164268,4.484228,3.338073,3.398144,4.377567,4.483769,3.579752,4.910722,4.992358,5.939423,6.047646,3.873395,5.020425,4.018061]
5352}
5353]
5354}
5355var pieData150 = [
5356{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5357var Chartopt = {datasetFill : false}
5358var myLine = new Chart(document.getElementById("canvas150").getContext("2d")).Bar(ChartData150);
5359</script>
5360<div style="float: left;width=705px">
5361<canvas id="canvas151" height="250" width="705px"></canvas>
5362</div><div class="chart-legend" style="float: left;width: 235px">
5363<ul><style>#id65687:before { background-color: rgba(52,255,54,0.75);}</style>
5364<li id="id65687">A</li><style>#id131223:before { background-color: rgba(57,124,214,0.75);}</style>
5365<li id="id131223">C</li><style>#id196759:before { background-color: rgba(251,220,60,0.75);}</style>
5366<li id="id196759">G</li><style>#id262295:before { background-color: rgba(255,61,107,0.75);}</style>
5367<li id="id262295">T</li></ul></div><div style="clear:both;"></div><script>
5368var ChartData151 = {
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.499192,0.508047,0.499755,0.491149,0.506985,0.492858,0.478960,0.495337,0.474022,0.486461,0.481711,0.472647,0.497838,0.476272,0.469646,0.486753,0.477210,0.488732,0.458541,0.460499]
5376},
5377{
5378fillColor : "rgba(57,124,214,0.75)",
5379strokeColor : "rgba(57,124,214,0.75)",
5380pointColor : "rgba(57,124,214,0.75)",
5381data : [4.440305,3.381871,3.322530,4.477810,3.490865,3.562500,3.535225,5.816011,3.644260,3.691100,6.115655,4.802437,3.704685,6.148368,3.922881,4.007122,3.984390,5.135149,4.063212,5.189906]
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.793572,4.813480,4.975377,3.833807,6.240651,4.045335,5.037135,3.898024,5.099331,5.182842,4.269324,5.432105,5.166298,4.289889,6.699025,4.519982,5.692015,4.370400,5.759399,5.878998]
5388},
5389{
5390fillColor : "rgba(255,61,107,0.75)",
5391strokeColor : "rgba(255,61,107,0.75)",
5392pointColor : "rgba(255,61,107,0.75)",
5393data : [5.112646,5.280731,5.168257,4.225422,4.312871,5.360095,5.497572,4.418531,5.797008,4.647354,4.400029,4.605015,5.992451,4.860111,4.945998,4.707028,5.947487,5.093413,6.286470,5.346406]
5394}
5395]
5396}
5397var pieData151 = [
5398{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5399var Chartopt = {datasetFill : false}
5400var myLine = new Chart(document.getElementById("canvas151").getContext("2d")).Bar(ChartData151);
5401</script>
5402<div style="float: left;width=705px">
5403<canvas id="canvas152" height="250" width="705px"></canvas>
5404</div><div class="chart-legend" style="float: left;width: 235px">
5405<ul><style>#id65688:before { background-color: rgba(52,255,54,0.75);}</style>
5406<li id="id65688">A</li><style>#id131224:before { background-color: rgba(57,124,214,0.75);}</style>
5407<li id="id131224">C</li><style>#id196760:before { background-color: rgba(251,220,60,0.75);}</style>
5408<li id="id196760">G</li><style>#id262296:before { background-color: rgba(255,61,107,0.75);}</style>
5409<li id="id262296">T</li></ul></div><div style="clear:both;"></div><script>
5410var ChartData152 = {
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.464229,0.469917,0.454519,0.449165,0.453436,0.441518,0.453478,0.444185,0.448435,0.442997,0.440476,0.438017,0.429329,0.428349,0.420827,0.408930,0.407596,0.414264,0.402408,0.383114]
5418},
5419{
5420fillColor : "rgba(57,124,214,0.75)",
5421strokeColor : "rgba(57,124,214,0.75)",
5422pointColor : "rgba(57,124,214,0.75)",
5423data : [6.582468,5.472589,4.094342,6.615555,4.393028,4.452182,4.462787,4.325415,4.489291,6.948371,6.035228,4.708258,5.678576,7.148523,4.959687,5.071369,5.040553,4.863424,6.208251,6.577592]
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.768161,4.654625,6.862526,4.743200,6.109509,6.115447,4.913556,4.800583,6.072983,5.126793,5.307963,5.225806,6.299013,5.325570,5.438376,7.975676,5.525096,5.390495,6.919409,5.737625]
5430},
5431{
5432fillColor : "rgba(255,61,107,0.75)",
5433strokeColor : "rgba(255,61,107,0.75)",
5434pointColor : "rgba(255,61,107,0.75)",
5435data : [5.062409,6.288032,5.466630,5.645363,5.703746,5.470026,6.849296,6.929181,7.290230,6.158265,5.786736,8.379002,6.341311,6.490497,6.704151,6.224232,7.550744,8.083545,7.051531,8.265632]
5436}
5437]
5438}
5439var pieData152 = [
5440{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5441var Chartopt = {datasetFill : false}
5442var myLine = new Chart(document.getElementById("canvas152").getContext("2d")).Bar(ChartData152);
5443</script>
5444<div style="float: left;width=352px">
5445<canvas id="canvas153" height="250" width="352px"></canvas>
5446</div><div class="chart-legend" style="float: left;width: 235px">
5447<ul><style>#id65689:before { background-color: rgba(52,255,54,0.75);}</style>
5448<li id="id65689">A</li><style>#id131225:before { background-color: rgba(57,124,214,0.75);}</style>
5449<li id="id131225">C</li><style>#id196761:before { background-color: rgba(251,220,60,0.75);}</style>
5450<li id="id196761">G</li><style>#id262297:before { background-color: rgba(255,61,107,0.75);}</style>
5451<li id="id262297">T</li></ul></div><div style="clear:both;"></div><script>
5452var ChartData153 = {
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.372467,0.377238,0.366737,0.368716,0.324773,0.316105,0.364820,0.402617,0.318918,0.105410]
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.492634,5.450545,6.640330,6.958935,5.878415,6.128345,6.100299,6.996045,8.249922,6.439157]
5466},
5467{
5468fillColor : "rgba(251,220,60,0.75)",
5469strokeColor : "rgba(251,220,60,0.75)",
5470pointColor : "rgba(251,220,60,0.75)",
5471data : [6.066336,6.994836,5.809698,6.055459,6.294637,8.814435,7.590874,6.293950,6.215877,5.179404]
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.790142,8.442030,8.562192,7.840158,9.053862,7.702285,9.594352,8.746509,8.996897,7.687387]
5478}
5479]
5480}
5481var pieData153 = [
5482{ value: 0.603914, color:"rgba(52,255,54,0.75)"},{ value: 0.517424, color:"rgba(57,124,214,0.75)"},{ value: 0.633627, color:"rgba(251,220,60,0.75)"},{ value: 0.322481, color:"rgba(255,61,107,0.75)"}];
5483var Chartopt = {datasetFill : false}
5484var myLine = new Chart(document.getElementById("canvas153").getContext("2d")).Bar(ChartData153);
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="canvas154" height="250" width="705px"></canvas>
5491</div><div class="chart-legend" style="float: left;width: 235px">
5492<ul><style>#id65690:before { background-color: rgba(52,255,54,0.75);}</style>
5493<li id="id65690">A</li><style>#id131226:before { background-color: rgba(57,124,214,0.75);}</style>
5494<li id="id131226">C</li><style>#id196762:before { background-color: rgba(251,220,60,0.75);}</style>
5495<li id="id196762">G</li><style>#id262298:before { background-color: rgba(255,61,107,0.75);}</style>
5496<li id="id262298">T</li></ul></div><div style="clear:both;"></div><script>
5497var ChartData154 = {
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.778445,0.570054,0.592848,0.604737,0.418059,0.735902,0.730400,0.747005,0.722049,0.736295,0.716547,0.775989,0.731776,0.752703,0.729516,0.730007,0.740520,0.757714,0.736787,0.804482]
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.647574,0.597270,0.541365,0.593634,0.395953,0.730695,0.742092,0.676853,0.703086,0.691689,0.740913,0.741503,0.722147,0.683534,0.700630,0.766655,0.729418,0.690314,0.698567,0.755651]
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.815289,0.586462,0.579978,0.567008,0.416389,0.795050,0.823739,0.784537,0.761841,0.730400,0.778642,0.775399,0.807822,0.751033,0.761055,0.769799,0.744352,0.773140,0.708097,0.755847]
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.421793,0.498527,0.581844,0.543625,0.368049,0.694637,0.697388,0.663295,0.673513,0.666635,0.677345,0.671057,0.696012,0.711143,0.703381,0.688250,0.694637,0.703872,0.727158,0.811949]
5523}
5524]
5525}
5526var pieData154 = [
5527{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5528var Chartopt = {datasetFill : false}
5529var myLine = new Chart(document.getElementById("canvas154").getContext("2d")).Bar(ChartData154);
5530</script>
5531<div style="float: left;width=705px">
5532<canvas id="canvas155" height="250" width="705px"></canvas>
5533</div><div class="chart-legend" style="float: left;width: 235px">
5534<ul><style>#id65691:before { background-color: rgba(52,255,54,0.75);}</style>
5535<li id="id65691">A</li><style>#id131227:before { background-color: rgba(57,124,214,0.75);}</style>
5536<li id="id131227">C</li><style>#id196763:before { background-color: rgba(251,220,60,0.75);}</style>
5537<li id="id196763">G</li><style>#id262299:before { background-color: rgba(255,61,107,0.75);}</style>
5538<li id="id262299">T</li></ul></div><div style="clear:both;"></div><script>
5539var ChartData155 = {
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.712617,0.712912,0.739734,0.713108,0.742387,0.712519,0.717333,0.736197,0.762823,0.732267,0.731285,0.733250,0.748184,0.727355,0.717824,0.714877,0.728042,0.762332,0.746022,0.710848]
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.776185,0.831992,0.869426,0.872275,0.951957,1.008353,1.078407,0.973769,1.010024,1.091572,1.119475,1.151604,1.223327,1.164573,1.222639,1.264495,1.291219,1.257519,1.331993,1.416489]
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.820988,0.893203,0.894578,0.900179,0.975537,0.995581,1.030362,1.040678,1.068876,1.105131,1.102675,1.171156,1.182848,1.212913,1.276088,1.256143,1.312146,1.345355,1.399295,1.415507]
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.782670,0.873356,0.853706,0.953234,0.960407,0.949796,1.041366,1.012578,1.089018,1.140501,1.135098,1.161232,1.223622,1.306251,1.331698,1.301830,1.327277,1.385540,1.480451,1.540188]
5565}
5566]
5567}
5568var pieData155 = [
5569{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5570var Chartopt = {datasetFill : false}
5571var myLine = new Chart(document.getElementById("canvas155").getContext("2d")).Bar(ChartData155);
5572</script>
5573<div style="float: left;width=705px">
5574<canvas id="canvas156" height="250" width="705px"></canvas>
5575</div><div class="chart-legend" style="float: left;width: 235px">
5576<ul><style>#id65692:before { background-color: rgba(52,255,54,0.75);}</style>
5577<li id="id65692">A</li><style>#id131228:before { background-color: rgba(57,124,214,0.75);}</style>
5578<li id="id131228">C</li><style>#id196764:before { background-color: rgba(251,220,60,0.75);}</style>
5579<li id="id196764">G</li><style>#id262300:before { background-color: rgba(255,61,107,0.75);}</style>
5580<li id="id262300">T</li></ul></div><div style="clear:both;"></div><script>
5581var ChartData156 = {
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.733839,0.702104,0.745236,0.716547,0.724898,0.710554,0.698076,0.730106,0.708883,0.705641,0.686285,0.697781,0.744450,0.724309,0.678917,0.692770,0.693949,0.746415,0.685991,0.692475]
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.455692,1.465124,1.437220,1.483300,1.573004,1.654356,1.675185,1.679508,1.799178,1.821776,1.912167,1.899100,1.913051,1.964044,2.109751,2.118397,2.185404,2.189629,2.269311,2.339069]
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.534194,1.528791,1.587938,1.596781,1.714780,1.735217,1.784244,1.814211,1.937909,2.021128,2.036062,2.118593,2.114270,2.280708,2.301243,2.365204,2.476621,2.456676,2.594719,2.659467]
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.523682,1.654650,1.689038,1.823151,1.836022,1.856361,1.911086,2.019359,2.092458,2.185404,2.112698,2.187271,2.257226,2.410007,2.375520,2.335532,2.423959,2.530856,2.627044,2.712424]
5607}
5608]
5609}
5610var pieData156 = [
5611{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5612var Chartopt = {datasetFill : false}
5613var myLine = new Chart(document.getElementById("canvas156").getContext("2d")).Bar(ChartData156);
5614</script>
5615<div style="float: left;width=705px">
5616<canvas id="canvas157" height="250" width="705px"></canvas>
5617</div><div class="chart-legend" style="float: left;width: 235px">
5618<ul><style>#id65693:before { background-color: rgba(52,255,54,0.75);}</style>
5619<li id="id65693">A</li><style>#id131229:before { background-color: rgba(57,124,214,0.75);}</style>
5620<li id="id131229">C</li><style>#id196765:before { background-color: rgba(251,220,60,0.75);}</style>
5621<li id="id196765">G</li><style>#id262301:before { background-color: rgba(255,61,107,0.75);}</style>
5622<li id="id262301">T</li></ul></div><div style="clear:both;"></div><script>
5623var ChartData157 = {
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.691002,0.655631,0.673120,0.647574,0.632837,0.657891,0.634114,0.698370,0.683436,0.624485,0.658284,0.624584,0.657400,0.643644,0.636963,0.661624,0.636570,0.674790,0.652487,0.633918]
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.422386,2.436436,2.432408,2.515332,2.672436,2.706922,2.739935,2.732664,2.897137,2.926514,3.020737,3.049426,2.982615,3.178234,3.230995,3.291616,3.283363,3.262239,3.362946,3.395075]
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.752707,2.736791,2.780414,2.899593,2.972888,3.071533,3.035278,3.039012,3.215569,3.282184,3.397432,3.350075,3.320207,3.467584,3.521033,3.653475,3.605234,3.555617,3.747207,3.839268]
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.625669,2.734334,2.822761,2.885445,2.913643,2.865402,2.982026,3.030169,3.111423,3.162514,3.061806,3.209969,3.298100,3.360981,3.464342,3.301539,3.496961,3.610736,3.637166,3.766563]
5649}
5650]
5651}
5652var pieData157 = [
5653{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5654var Chartopt = {datasetFill : false}
5655var myLine = new Chart(document.getElementById("canvas157").getContext("2d")).Bar(ChartData157);
5656</script>
5657<div style="float: left;width=705px">
5658<canvas id="canvas158" height="250" width="705px"></canvas>
5659</div><div class="chart-legend" style="float: left;width: 235px">
5660<ul><style>#id65694:before { background-color: rgba(52,255,54,0.75);}</style>
5661<li id="id65694">A</li><style>#id131230:before { background-color: rgba(57,124,214,0.75);}</style>
5662<li id="id131230">C</li><style>#id196766:before { background-color: rgba(251,220,60,0.75);}</style>
5663<li id="id196766">G</li><style>#id262302:before { background-color: rgba(255,61,107,0.75);}</style>
5664<li id="id262302">T</li></ul></div><div style="clear:both;"></div><script>
5665var ChartData158 = {
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.639420,0.629005,0.660642,0.595600,0.617804,0.626745,0.620261,0.630970,0.620261,0.592848,0.612204,0.589311,0.614955,0.588329,0.599431,0.605425,0.596779,0.601691,0.564552,0.590097]
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.473283,3.504330,3.400773,3.557975,3.613192,3.651904,3.689239,3.619481,3.794859,3.876899,3.906669,3.936832,3.820405,3.972203,4.081360,4.166839,4.134219,4.056699,4.189436,4.287491]
5679},
5680{
5681fillColor : "rgba(251,220,60,0.75)",
5682strokeColor : "rgba(251,220,60,0.75)",
5683pointColor : "rgba(251,220,60,0.75)",
5684data : [3.905981,3.860491,3.928088,3.987334,4.109165,4.204862,4.131665,4.103859,4.310089,4.376703,4.483011,4.437914,4.432903,4.581656,4.765779,4.845460,4.742395,4.742984,4.966015,5.053458]
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.613585,3.779532,3.876703,4.051295,4.132352,4.009145,4.131567,4.300362,4.421211,4.523196,4.396944,4.610640,4.775898,4.920328,4.996375,4.796630,4.941550,5.097770,5.280124,5.381028]
5691}
5692]
5693}
5694var pieData158 = [
5695{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5696var Chartopt = {datasetFill : false}
5697var myLine = new Chart(document.getElementById("canvas158").getContext("2d")).Bar(ChartData158);
5698</script>
5699<div style="float: left;width=705px">
5700<canvas id="canvas159" height="250" width="705px"></canvas>
5701</div><div class="chart-legend" style="float: left;width: 235px">
5702<ul><style>#id65695:before { background-color: rgba(52,255,54,0.75);}</style>
5703<li id="id65695">A</li><style>#id131231:before { background-color: rgba(57,124,214,0.75);}</style>
5704<li id="id131231">C</li><style>#id196767:before { background-color: rgba(251,220,60,0.75);}</style>
5705<li id="id196767">G</li><style>#id262303:before { background-color: rgba(255,61,107,0.75);}</style>
5706<li id="id262303">T</li></ul></div><div style="clear:both;"></div><script>
5707var ChartData159 = {
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.568973,0.604442,0.594715,0.582729,0.568875,0.583613,0.579683,0.574574,0.542544,0.555513,0.544804,0.553941,0.572805,0.530754,0.532326,0.553941,0.533898,0.531343,0.541267,0.522992]
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.423078,4.384367,4.281793,4.503251,4.493721,4.575367,4.542355,4.459431,4.661239,4.694841,4.879160,4.852731,4.683935,4.897435,5.010621,5.093840,5.088338,4.962085,5.192189,5.339861]
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.187179,5.067017,5.045107,5.246424,5.396257,5.532335,5.452457,5.282679,5.541375,5.740726,5.862460,5.676175,5.659276,5.880146,6.030470,6.117226,6.070261,5.898027,6.103176,6.303707]
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.107791,5.365210,5.519857,5.648272,5.759296,5.478297,5.689243,5.911782,6.091681,6.218817,5.857449,6.121942,6.340747,6.541180,6.689736,6.273740,6.569967,6.825028,7.076650,7.127544]
5733}
5734]
5735}
5736var pieData159 = [
5737{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5738var Chartopt = {datasetFill : false}
5739var myLine = new Chart(document.getElementById("canvas159").getContext("2d")).Bar(ChartData159);
5740</script>
5741<div style="float: left;width=705px">
5742<canvas id="canvas160" height="250" width="705px"></canvas>
5743</div><div class="chart-legend" style="float: left;width: 235px">
5744<ul><style>#id65696:before { background-color: rgba(52,255,54,0.75);}</style>
5745<li id="id65696">A</li><style>#id131232:before { background-color: rgba(57,124,214,0.75);}</style>
5746<li id="id131232">C</li><style>#id196768:before { background-color: rgba(251,220,60,0.75);}</style>
5747<li id="id196768">G</li><style>#id262304:before { background-color: rgba(255,61,107,0.75);}</style>
5748<li id="id262304">T</li></ul></div><div style="clear:both;"></div><script>
5749var ChartData160 = {
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.526922,0.537238,0.533701,0.524367,0.526038,0.492141,0.527511,0.481923,0.505208,0.468462,0.478680,0.483495,0.491650,0.463943,0.473473,0.464237,0.444685,0.435646,0.430734,0.424053]
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.496965,5.422392,5.220879,5.591090,5.618207,5.763422,5.737190,5.562597,5.802821,6.002763,6.138841,6.030568,5.838585,6.211842,6.354503,6.484588,6.464937,6.260280,6.638547,6.896162]
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.517108,6.348706,6.185707,6.406772,6.585492,6.858827,6.651124,6.428977,6.824537,6.939884,7.231297,6.985669,6.852440,7.230806,7.373860,7.654859,7.407659,7.193176,7.636486,7.717937]
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.703688,6.963857,7.304003,7.532831,7.675295,7.197793,7.417582,7.818349,8.059654,8.156236,7.692292,8.078715,8.424068,8.687578,8.889779,8.230514,8.622930,9.053269,9.358438,9.585104]
5775}
5776]
5777}
5778var pieData160 = [
5779{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5780var Chartopt = {datasetFill : false}
5781var myLine = new Chart(document.getElementById("canvas160").getContext("2d")).Bar(ChartData160);
5782</script>
5783<div style="float: left;width=352px">
5784<canvas id="canvas161" height="250" width="352px"></canvas>
5785</div><div class="chart-legend" style="float: left;width: 235px">
5786<ul><style>#id65697:before { background-color: rgba(52,255,54,0.75);}</style>
5787<li id="id65697">A</li><style>#id131233:before { background-color: rgba(57,124,214,0.75);}</style>
5788<li id="id131233">C</li><style>#id196769:before { background-color: rgba(251,220,60,0.75);}</style>
5789<li id="id196769">G</li><style>#id262305:before { background-color: rgba(255,61,107,0.75);}</style>
5790<li id="id262305">T</li></ul></div><div style="clear:both;"></div><script>
5791var ChartData161 = {
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.403027,0.433190,0.407645,0.418158,0.389567,0.392612,0.485460,0.456377,0.351052,0.135096]
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.083920,7.056213,6.835639,7.318348,7.579991,7.938118,7.890563,7.525953,7.627152,6.933399]
5805},
5806{
5807fillColor : "rgba(251,220,60,0.75)",
5808strokeColor : "rgba(251,220,60,0.75)",
5809pointColor : "rgba(251,220,60,0.75)",
5810data : [8.159969,7.959831,7.745348,8.121847,8.385946,8.701235,8.707916,8.326014,8.293198,6.970833]
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.921023,9.470248,9.972509,10.360308,10.616252,10.022716,10.913757,11.463768,11.817767,10.065652]
5817}
5818]
5819}
5820var pieData161 = [
5821{ value: 0.778445, color:"rgba(52,255,54,0.75)"},{ value: 0.647574, color:"rgba(57,124,214,0.75)"},{ value: 0.815289, color:"rgba(251,220,60,0.75)"},{ value: 0.421793, color:"rgba(255,61,107,0.75)"}];
5822var Chartopt = {datasetFill : false}
5823var myLine = new Chart(document.getElementById("canvas161").getContext("2d")).Bar(ChartData161);
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="canvas162" height="250" width="705px"></canvas>
5830</div><div class="chart-legend" style="float: left;width: 235px">
5831<ul><style>#id65698:before { background-color: rgba(52,255,54,0.75);}</style>
5832<li id="id65698">Errors</li></ul></div><div style="clear:both;"></div><script>
5833var ChartData162 = {
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.380816,2.380816,2.380816,2.380816,1.848978,1.265681,0.937908,0.699040,0.540864,0.408676]
5841}
5842]
5843}
5844var pieData162 = [
5845{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5846var Chartopt = {datasetFill : false}
5847var myLine = new Chart(document.getElementById("canvas162").getContext("2d")).Bar(ChartData162);
5848</script>
5849<div style="float: left;width=705px">
5850<canvas id="canvas163" height="250" width="705px"></canvas>
5851</div><div class="chart-legend" style="float: left;width: 235px">
5852<ul><style>#id65699:before { background-color: rgba(52,255,54,0.75);}</style>
5853<li id="id65699">Errors</li></ul></div><div style="clear:both;"></div><script>
5854var ChartData163 = {
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.318745,0.243055,0.195533,0.148085,0.116576,0.091897,0.073248,0.054912,0.044919,0.032744]
5862}
5863]
5864}
5865var pieData163 = [
5866{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5867var Chartopt = {datasetFill : false}
5868var myLine = new Chart(document.getElementById("canvas163").getContext("2d")).Bar(ChartData163);
5869</script>
5870<div style="float: left;width=705px">
5871<canvas id="canvas164" height="250" width="705px"></canvas>
5872</div><div class="chart-legend" style="float: left;width: 235px">
5873<ul><style>#id65700:before { background-color: rgba(52,255,54,0.75);}</style>
5874<li id="id65700">Errors</li></ul></div><div style="clear:both;"></div><script>
5875var ChartData164 = {
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.027567,0.018989,0.014141,0.009596,0.007658,0.005524,0.004403,0.003323,0.002853,0.002165]
5883}
5884]
5885}
5886var pieData164 = [
5887{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5888var Chartopt = {datasetFill : false}
5889var myLine = new Chart(document.getElementById("canvas164").getContext("2d")).Bar(ChartData164);
5890</script>
5891<div style="float: left;width=705px">
5892<canvas id="canvas165" height="250" width="705px"></canvas>
5893</div><div class="chart-legend" style="float: left;width: 235px">
5894<ul><style>#id65701:before { background-color: rgba(52,255,54,0.75);}</style>
5895<li id="id65701">Errors</li></ul></div><div style="clear:both;"></div><script>
5896var ChartData165 = {
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 pieData165 = [
5908{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5909var Chartopt = {datasetFill : false}
5910var myLine = new Chart(document.getElementById("canvas165").getContext("2d")).Bar(ChartData165);
5911</script>
5912<div style="float: left;width=705px">
5913<canvas id="canvas166" height="250" width="705px"></canvas>
5914</div><div class="chart-legend" style="float: left;width: 235px">
5915<ul><style>#id65702:before { background-color: rgba(52,255,54,0.75);}</style>
5916<li id="id65702">Errors</li></ul></div><div style="clear:both;"></div><script>
5917var ChartData166 = {
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.000181,0.000169,0.000153,0.000149,0.000114,0.000082,0.000068,0.000055,0.000047]
5925}
5926]
5927}
5928var pieData166 = [
5929{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5930var Chartopt = {datasetFill : false}
5931var myLine = new Chart(document.getElementById("canvas166").getContext("2d")).Bar(ChartData166);
5932</script>
5933<div style="float: left;width=705px">
5934<canvas id="canvas167" height="250" width="705px"></canvas>
5935</div><div class="chart-legend" style="float: left;width: 235px">
5936<ul><style>#id65703:before { background-color: rgba(52,255,54,0.75);}</style>
5937<li id="id65703">Errors</li></ul></div><div style="clear:both;"></div><script>
5938var ChartData167 = {
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 pieData167 = [
5950{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5951var Chartopt = {datasetFill : false}
5952var myLine = new Chart(document.getElementById("canvas167").getContext("2d")).Bar(ChartData167);
5953</script>
5954<div style="float: left;width=705px">
5955<canvas id="canvas168" height="250" width="705px"></canvas>
5956</div><div class="chart-legend" style="float: left;width: 235px">
5957<ul><style>#id65704:before { background-color: rgba(52,255,54,0.75);}</style>
5958<li id="id65704">Errors</li></ul></div><div style="clear:both;"></div><script>
5959var ChartData168 = {
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 pieData168 = [
5971{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5972var Chartopt = {datasetFill : false}
5973var myLine = new Chart(document.getElementById("canvas168").getContext("2d")).Bar(ChartData168);
5974</script>
5975<div style="float: left;width=705px">
5976<canvas id="canvas169" height="250" width="705px"></canvas>
5977</div><div class="chart-legend" style="float: left;width: 235px">
5978<ul><style>#id65705:before { background-color: rgba(52,255,54,0.75);}</style>
5979<li id="id65705">Errors</li></ul></div><div style="clear:both;"></div><script>
5980var ChartData169 = {
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 pieData169 = [
5992{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
5993var Chartopt = {datasetFill : false}
5994var myLine = new Chart(document.getElementById("canvas169").getContext("2d")).Bar(ChartData169);
5995</script>
5996<div style="float: left;width=705px">
5997<canvas id="canvas170" height="250" width="705px"></canvas>
5998</div><div class="chart-legend" style="float: left;width: 235px">
5999<ul><style>#id65706:before { background-color: rgba(52,255,54,0.75);}</style>
6000<li id="id65706">Errors</li></ul></div><div style="clear:both;"></div><script>
6001var ChartData170 = {
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 pieData170 = [
6013{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
6014var Chartopt = {datasetFill : false}
6015var myLine = new Chart(document.getElementById("canvas170").getContext("2d")).Bar(ChartData170);
6016</script>
6017<div style="float: left;width=705px">
6018<canvas id="canvas171" height="250" width="705px"></canvas>
6019</div><div class="chart-legend" style="float: left;width: 235px">
6020<ul><style>#id65707:before { background-color: rgba(52,255,54,0.75);}</style>
6021<li id="id65707">Errors</li></ul></div><div style="clear:both;"></div><script>
6022var ChartData171 = {
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 pieData171 = [
6034{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
6035var Chartopt = {datasetFill : false}
6036var myLine = new Chart(document.getElementById("canvas171").getContext("2d")).Bar(ChartData171);
6037</script>
6038<div style="float: left;width=282px">
6039<canvas id="canvas172" height="250" width="282px"></canvas>
6040</div><div class="chart-legend" style="float: left;width: 235px">
6041<ul><style>#id65708:before { background-color: rgba(52,255,54,0.75);}</style>
6042<li id="id65708">Errors</li></ul></div><div style="clear:both;"></div><script>
6043var ChartData172 = {
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 pieData172 = [
6055{ value: 2.380816, color:"rgba(52,255,54,0.75)"}];
6056var Chartopt = {datasetFill : false}
6057var myLine = new Chart(document.getElementById("canvas172").getContext("2d")).Bar(ChartData172);
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="canvas173" height="250" width="705px"></canvas>
6064</div><div class="chart-legend" style="float: left;width: 235px">
6065<ul><style>#id65709:before { background-color: rgba(52,255,54,0.75);}</style>
6066<li id="id65709">Errors</li></ul></div><div style="clear:both;"></div><script>
6067var ChartData173 = {
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.407719,18.465919,13.456030,9.884654,6.785985,4.616529,3.169559,2.258600,1.645721,1.233374]
6075}
6076]
6077}
6078var pieData173 = [
6079{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6080var Chartopt = {datasetFill : false}
6081var myLine = new Chart(document.getElementById("canvas173").getContext("2d")).Bar(ChartData173);
6082</script>
6083<div style="float: left;width=705px">
6084<canvas id="canvas174" height="250" width="705px"></canvas>
6085</div><div class="chart-legend" style="float: left;width: 235px">
6086<ul><style>#id65710:before { background-color: rgba(52,255,54,0.75);}</style>
6087<li id="id65710">Errors</li></ul></div><div style="clear:both;"></div><script>
6088var ChartData174 = {
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.922283,0.695018,0.541689,0.416743,0.324611,0.252416,0.206900,0.161617,0.123140,0.095866]
6096}
6097]
6098}
6099var pieData174 = [
6100{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6101var Chartopt = {datasetFill : false}
6102var myLine = new Chart(document.getElementById("canvas174").getContext("2d")).Bar(ChartData174);
6103</script>
6104<div style="float: left;width=705px">
6105<canvas id="canvas175" height="250" width="705px"></canvas>
6106</div><div class="chart-legend" style="float: left;width: 235px">
6107<ul><style>#id65711:before { background-color: rgba(52,255,54,0.75);}</style>
6108<li id="id65711">Errors</li></ul></div><div style="clear:both;"></div><script>
6109var ChartData175 = {
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.071981,0.058758,0.044390,0.031074,0.024602,0.019946,0.018633,0.017078,0.011705,0.007738]
6117}
6118]
6119}
6120var pieData175 = [
6121{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6122var Chartopt = {datasetFill : false}
6123var myLine = new Chart(document.getElementById("canvas175").getContext("2d")).Bar(ChartData175);
6124</script>
6125<div style="float: left;width=705px">
6126<canvas id="canvas176" height="250" width="705px"></canvas>
6127</div><div class="chart-legend" style="float: left;width: 235px">
6128<ul><style>#id65712:before { background-color: rgba(52,255,54,0.75);}</style>
6129<li id="id65712">Errors</li></ul></div><div style="clear:both;"></div><script>
6130var ChartData176 = {
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.005466,0.004330,0.003324,0.002877,0.002132,0.001490,0.001220,0.000940,0.000680,0.000875]
6138}
6139]
6140}
6141var pieData176 = [
6142{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6143var Chartopt = {datasetFill : false}
6144var myLine = new Chart(document.getElementById("canvas176").getContext("2d")).Bar(ChartData176);
6145</script>
6146<div style="float: left;width=705px">
6147<canvas id="canvas177" height="250" width="705px"></canvas>
6148</div><div class="chart-legend" style="float: left;width: 235px">
6149<ul><style>#id65713:before { background-color: rgba(52,255,54,0.75);}</style>
6150<li id="id65713">Errors</li></ul></div><div style="clear:both;"></div><script>
6151var ChartData177 = {
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.000475,0.000615,0.000354,0.000661,0.000521,0.000410,0.000382,0.000158,0.000251,0.000559]
6159}
6160]
6161}
6162var pieData177 = [
6163{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6164var Chartopt = {datasetFill : false}
6165var myLine = new Chart(document.getElementById("canvas177").getContext("2d")).Bar(ChartData177);
6166</script>
6167<div style="float: left;width=705px">
6168<canvas id="canvas178" height="250" width="705px"></canvas>
6169</div><div class="chart-legend" style="float: left;width: 235px">
6170<ul><style>#id65714:before { background-color: rgba(52,255,54,0.75);}</style>
6171<li id="id65714">Errors</li></ul></div><div style="clear:both;"></div><script>
6172var ChartData178 = {
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.000372,0.000298,0.000223,0.000298,0.000242,0.000093,0.000093,0.000084,0.000056,0.000009]
6180}
6181]
6182}
6183var pieData178 = [
6184{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6185var Chartopt = {datasetFill : false}
6186var myLine = new Chart(document.getElementById("canvas178").getContext("2d")).Bar(ChartData178);
6187</script>
6188<div style="float: left;width=705px">
6189<canvas id="canvas179" height="250" width="705px"></canvas>
6190</div><div class="chart-legend" style="float: left;width: 235px">
6191<ul><style>#id65715:before { background-color: rgba(52,255,54,0.75);}</style>
6192<li id="id65715">Errors</li></ul></div><div style="clear:both;"></div><script>
6193var ChartData179 = {
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 pieData179 = [
6205{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6206var Chartopt = {datasetFill : false}
6207var myLine = new Chart(document.getElementById("canvas179").getContext("2d")).Bar(ChartData179);
6208</script>
6209<div style="float: left;width=705px">
6210<canvas id="canvas180" height="250" width="705px"></canvas>
6211</div><div class="chart-legend" style="float: left;width: 235px">
6212<ul><style>#id65716:before { background-color: rgba(52,255,54,0.75);}</style>
6213<li id="id65716">Errors</li></ul></div><div style="clear:both;"></div><script>
6214var ChartData180 = {
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 pieData180 = [
6226{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6227var Chartopt = {datasetFill : false}
6228var myLine = new Chart(document.getElementById("canvas180").getContext("2d")).Bar(ChartData180);
6229</script>
6230<div style="float: left;width=705px">
6231<canvas id="canvas181" height="250" width="705px"></canvas>
6232</div><div class="chart-legend" style="float: left;width: 235px">
6233<ul><style>#id65717:before { background-color: rgba(52,255,54,0.75);}</style>
6234<li id="id65717">Errors</li></ul></div><div style="clear:both;"></div><script>
6235var ChartData181 = {
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 pieData181 = [
6247{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6248var Chartopt = {datasetFill : false}
6249var myLine = new Chart(document.getElementById("canvas181").getContext("2d")).Bar(ChartData181);
6250</script>
6251<div style="float: left;width=705px">
6252<canvas id="canvas182" height="250" width="705px"></canvas>
6253</div><div class="chart-legend" style="float: left;width: 235px">
6254<ul><style>#id65718:before { background-color: rgba(52,255,54,0.75);}</style>
6255<li id="id65718">Errors</li></ul></div><div style="clear:both;"></div><script>
6256var ChartData182 = {
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 pieData182 = [
6268{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6269var Chartopt = {datasetFill : false}
6270var myLine = new Chart(document.getElementById("canvas182").getContext("2d")).Bar(ChartData182);
6271</script>
6272<div style="float: left;width=282px">
6273<canvas id="canvas183" height="250" width="282px"></canvas>
6274</div><div class="chart-legend" style="float: left;width: 235px">
6275<ul><style>#id65719:before { background-color: rgba(52,255,54,0.75);}</style>
6276<li id="id65719">Errors</li></ul></div><div style="clear:both;"></div><script>
6277var ChartData183 = {
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 pieData183 = [
6289{ value: 34.407719, color:"rgba(52,255,54,0.75)"}];
6290var Chartopt = {datasetFill : false}
6291var myLine = new Chart(document.getElementById("canvas183").getContext("2d")).Bar(ChartData183);
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="canvas184" height="250" width="705px"></canvas>
6298</div><div class="chart-legend" style="float: left;width: 235px">
6299<ul><style>#id65720:before { background-color: rgba(52,255,54,0.75);}</style>
6300<li id="id65720">Errors</li></ul></div><div style="clear:both;"></div><script>
6301var ChartData184 = {
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 : [20.010750,16.046286,13.704537,11.038532,9.088608,6.891565,5.134387,3.895756,3.009742,2.337879]
6309}
6310]
6311}
6312var pieData184 = [
6313{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6314var Chartopt = {datasetFill : false}
6315var myLine = new Chart(document.getElementById("canvas184").getContext("2d")).Bar(ChartData184);
6316</script>
6317<div style="float: left;width=705px">
6318<canvas id="canvas185" height="250" width="705px"></canvas>
6319</div><div class="chart-legend" style="float: left;width: 235px">
6320<ul><style>#id65721:before { background-color: rgba(52,255,54,0.75);}</style>
6321<li id="id65721">Errors</li></ul></div><div style="clear:both;"></div><script>
6322var ChartData185 = {
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.792493,1.431042,1.129330,0.895475,0.724333,0.574908,0.476433,0.390526,0.311866,0.238999]
6330}
6331]
6332}
6333var pieData185 = [
6334{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6335var Chartopt = {datasetFill : false}
6336var myLine = new Chart(document.getElementById("canvas185").getContext("2d")).Bar(ChartData185);
6337</script>
6338<div style="float: left;width=705px">
6339<canvas id="canvas186" height="250" width="705px"></canvas>
6340</div><div class="chart-legend" style="float: left;width: 235px">
6341<ul><style>#id65722:before { background-color: rgba(52,255,54,0.75);}</style>
6342<li id="id65722">Errors</li></ul></div><div style="clear:both;"></div><script>
6343var ChartData186 = {
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.187044,0.146405,0.113036,0.090715,0.071727,0.053700,0.041891,0.038916,0.031290,0.021136]
6351}
6352]
6353}
6354var pieData186 = [
6355{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6356var Chartopt = {datasetFill : false}
6357var myLine = new Chart(document.getElementById("canvas186").getContext("2d")).Bar(ChartData186);
6358</script>
6359<div style="float: left;width=705px">
6360<canvas id="canvas187" height="250" width="705px"></canvas>
6361</div><div class="chart-legend" style="float: left;width: 235px">
6362<ul><style>#id65723:before { background-color: rgba(52,255,54,0.75);}</style>
6363<li id="id65723">Errors</li></ul></div><div style="clear:both;"></div><script>
6364var ChartData187 = {
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.016014,0.012256,0.010489,0.007425,0.005211,0.004495,0.003780,0.002908,0.002393,0.001700]
6372}
6373]
6374}
6375var pieData187 = [
6376{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6377var Chartopt = {datasetFill : false}
6378var myLine = new Chart(document.getElementById("canvas187").getContext("2d")).Bar(ChartData187);
6379</script>
6380<div style="float: left;width=705px">
6381<canvas id="canvas188" height="250" width="705px"></canvas>
6382</div><div class="chart-legend" style="float: left;width: 235px">
6383<ul><style>#id65724:before { background-color: rgba(52,255,54,0.75);}</style>
6384<li id="id65724">Errors</li></ul></div><div style="clear:both;"></div><script>
6385var ChartData188 = {
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.001677,0.001051,0.000626,0.001163,0.001409,0.001051,0.001096,0.000738,0.000380,0.000604]
6393}
6394]
6395}
6396var pieData188 = [
6397{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6398var Chartopt = {datasetFill : false}
6399var myLine = new Chart(document.getElementById("canvas188").getContext("2d")).Bar(ChartData188);
6400</script>
6401<div style="float: left;width=705px">
6402<canvas id="canvas189" height="250" width="705px"></canvas>
6403</div><div class="chart-legend" style="float: left;width: 235px">
6404<ul><style>#id65725:before { background-color: rgba(52,255,54,0.75);}</style>
6405<li id="id65725">Errors</li></ul></div><div style="clear:both;"></div><script>
6406var ChartData189 = {
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.000403,0.000425,0.000693,0.000335,0.000313,0.000380,0.000224,0.000335,0.000403,0.000201]
6414}
6415]
6416}
6417var pieData189 = [
6418{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6419var Chartopt = {datasetFill : false}
6420var myLine = new Chart(document.getElementById("canvas189").getContext("2d")).Bar(ChartData189);
6421</script>
6422<div style="float: left;width=705px">
6423<canvas id="canvas190" height="250" width="705px"></canvas>
6424</div><div class="chart-legend" style="float: left;width: 235px">
6425<ul><style>#id65726:before { background-color: rgba(52,255,54,0.75);}</style>
6426<li id="id65726">Errors</li></ul></div><div style="clear:both;"></div><script>
6427var ChartData190 = {
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.000157,0.000000,0.000089,0.000000,0.000000,0.000067,0.000022,0.000000,0.000000,0.000000]
6435}
6436]
6437}
6438var pieData190 = [
6439{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6440var Chartopt = {datasetFill : false}
6441var myLine = new Chart(document.getElementById("canvas190").getContext("2d")).Bar(ChartData190);
6442</script>
6443<div style="float: left;width=705px">
6444<canvas id="canvas191" height="250" width="705px"></canvas>
6445</div><div class="chart-legend" style="float: left;width: 235px">
6446<ul><style>#id65727:before { background-color: rgba(52,255,54,0.75);}</style>
6447<li id="id65727">Errors</li></ul></div><div style="clear:both;"></div><script>
6448var ChartData191 = {
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.000022,0.000000,0.000045,0.000022,0.000000,0.000000,0.000000,0.000022,0.000000,0.000000]
6456}
6457]
6458}
6459var pieData191 = [
6460{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6461var Chartopt = {datasetFill : false}
6462var myLine = new Chart(document.getElementById("canvas191").getContext("2d")).Bar(ChartData191);
6463</script>
6464<div style="float: left;width=705px">
6465<canvas id="canvas192" height="250" width="705px"></canvas>
6466</div><div class="chart-legend" style="float: left;width: 235px">
6467<ul><style>#id65728:before { background-color: rgba(52,255,54,0.75);}</style>
6468<li id="id65728">Errors</li></ul></div><div style="clear:both;"></div><script>
6469var ChartData192 = {
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.000022,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6477}
6478]
6479}
6480var pieData192 = [
6481{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6482var Chartopt = {datasetFill : false}
6483var myLine = new Chart(document.getElementById("canvas192").getContext("2d")).Bar(ChartData192);
6484</script>
6485<div style="float: left;width=705px">
6486<canvas id="canvas193" height="250" width="705px"></canvas>
6487</div><div class="chart-legend" style="float: left;width: 235px">
6488<ul><style>#id65729:before { background-color: rgba(52,255,54,0.75);}</style>
6489<li id="id65729">Errors</li></ul></div><div style="clear:both;"></div><script>
6490var ChartData193 = {
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.000022,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000022]
6498}
6499]
6500}
6501var pieData193 = [
6502{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6503var Chartopt = {datasetFill : false}
6504var myLine = new Chart(document.getElementById("canvas193").getContext("2d")).Bar(ChartData193);
6505</script>
6506<div style="float: left;width=282px">
6507<canvas id="canvas194" height="250" width="282px"></canvas>
6508</div><div class="chart-legend" style="float: left;width: 235px">
6509<ul><style>#id65730:before { background-color: rgba(52,255,54,0.75);}</style>
6510<li id="id65730">Errors</li></ul></div><div style="clear:both;"></div><script>
6511var ChartData194 = {
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 pieData194 = [
6523{ value: 20.010750, color:"rgba(52,255,54,0.75)"}];
6524var Chartopt = {datasetFill : false}
6525var myLine = new Chart(document.getElementById("canvas194").getContext("2d")).Bar(ChartData194);
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="canvas195" height="250" width="705px"></canvas>
6532</div><div class="chart-legend" style="float: left;width: 235px">
6533<ul><style>#id65731:before { background-color: rgba(52,255,54,0.75);}</style>
6534<li id="id65731">Errors</li></ul></div><div style="clear:both;"></div><script>
6535var ChartData195 = {
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 : [18.805027,14.604379,13.491772,12.061246,9.859262,7.536304,5.589480,4.243987,3.228496,2.506566]
6543}
6544]
6545}
6546var pieData195 = [
6547{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6548var Chartopt = {datasetFill : false}
6549var myLine = new Chart(document.getElementById("canvas195").getContext("2d")).Bar(ChartData195);
6550</script>
6551<div style="float: left;width=705px">
6552<canvas id="canvas196" height="250" width="705px"></canvas>
6553</div><div class="chart-legend" style="float: left;width: 235px">
6554<ul><style>#id65732:before { background-color: rgba(52,255,54,0.75);}</style>
6555<li id="id65732">Errors</li></ul></div><div style="clear:both;"></div><script>
6556var ChartData196 = {
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.881128,1.432693,1.088042,0.833237,0.629501,0.480648,0.388886,0.304833,0.230989,0.182608]
6564}
6565]
6566}
6567var pieData196 = [
6568{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6569var Chartopt = {datasetFill : false}
6570var myLine = new Chart(document.getElementById("canvas196").getContext("2d")).Bar(ChartData196);
6571</script>
6572<div style="float: left;width=705px">
6573<canvas id="canvas197" height="250" width="705px"></canvas>
6574</div><div class="chart-legend" style="float: left;width: 235px">
6575<ul><style>#id65733:before { background-color: rgba(52,255,54,0.75);}</style>
6576<li id="id65733">Errors</li></ul></div><div style="clear:both;"></div><script>
6577var ChartData197 = {
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.137706,0.105389,0.079719,0.061779,0.046923,0.037151,0.030483,0.026170,0.021920,0.015085]
6585}
6586]
6587}
6588var pieData197 = [
6589{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6590var Chartopt = {datasetFill : false}
6591var myLine = new Chart(document.getElementById("canvas197").getContext("2d")).Bar(ChartData197);
6592</script>
6593<div style="float: left;width=705px">
6594<canvas id="canvas198" height="250" width="705px"></canvas>
6595</div><div class="chart-legend" style="float: left;width: 235px">
6596<ul><style>#id65734:before { background-color: rgba(52,255,54,0.75);}</style>
6597<li id="id65734">Errors</li></ul></div><div style="clear:both;"></div><script>
6598var ChartData198 = {
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.011147,0.008793,0.006876,0.006188,0.003917,0.002771,0.002646,0.002084,0.001459,0.001584]
6606}
6607]
6608}
6609var pieData198 = [
6610{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6611var Chartopt = {datasetFill : false}
6612var myLine = new Chart(document.getElementById("canvas198").getContext("2d")).Bar(ChartData198);
6613</script>
6614<div style="float: left;width=705px">
6615<canvas id="canvas199" height="250" width="705px"></canvas>
6616</div><div class="chart-legend" style="float: left;width: 235px">
6617<ul><style>#id65735:before { background-color: rgba(52,255,54,0.75);}</style>
6618<li id="id65735">Errors</li></ul></div><div style="clear:both;"></div><script>
6619var ChartData199 = {
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.001167,0.000896,0.000708,0.001104,0.001167,0.001229,0.000833,0.000396,0.000271,0.000729]
6627}
6628]
6629}
6630var pieData199 = [
6631{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6632var Chartopt = {datasetFill : false}
6633var myLine = new Chart(document.getElementById("canvas199").getContext("2d")).Bar(ChartData199);
6634</script>
6635<div style="float: left;width=705px">
6636<canvas id="canvas200" height="250" width="705px"></canvas>
6637</div><div class="chart-legend" style="float: left;width: 235px">
6638<ul><style>#id65736:before { background-color: rgba(52,255,54,0.75);}</style>
6639<li id="id65736">Errors</li></ul></div><div style="clear:both;"></div><script>
6640var ChartData200 = {
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.000458,0.000375,0.000375,0.000313,0.000313,0.000083,0.000104,0.000021,0.000042,0.000104]
6648}
6649]
6650}
6651var pieData200 = [
6652{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6653var Chartopt = {datasetFill : false}
6654var myLine = new Chart(document.getElementById("canvas200").getContext("2d")).Bar(ChartData200);
6655</script>
6656<div style="float: left;width=705px">
6657<canvas id="canvas201" height="250" width="705px"></canvas>
6658</div><div class="chart-legend" style="float: left;width: 235px">
6659<ul><style>#id65737:before { background-color: rgba(52,255,54,0.75);}</style>
6660<li id="id65737">Errors</li></ul></div><div style="clear:both;"></div><script>
6661var ChartData201 = {
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.000104,0.000042,0.000021,0.000063,0.000042,0.000021,0.000000,0.000000,0.000000,0.000021]
6669}
6670]
6671}
6672var pieData201 = [
6673{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6674var Chartopt = {datasetFill : false}
6675var myLine = new Chart(document.getElementById("canvas201").getContext("2d")).Bar(ChartData201);
6676</script>
6677<div style="float: left;width=705px">
6678<canvas id="canvas202" height="250" width="705px"></canvas>
6679</div><div class="chart-legend" style="float: left;width: 235px">
6680<ul><style>#id65738:before { background-color: rgba(52,255,54,0.75);}</style>
6681<li id="id65738">Errors</li></ul></div><div style="clear:both;"></div><script>
6682var ChartData202 = {
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.000021,0.000021,0.000021,0.000021]
6690}
6691]
6692}
6693var pieData202 = [
6694{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6695var Chartopt = {datasetFill : false}
6696var myLine = new Chart(document.getElementById("canvas202").getContext("2d")).Bar(ChartData202);
6697</script>
6698<div style="float: left;width=705px">
6699<canvas id="canvas203" height="250" width="705px"></canvas>
6700</div><div class="chart-legend" style="float: left;width: 235px">
6701<ul><style>#id65739:before { background-color: rgba(52,255,54,0.75);}</style>
6702<li id="id65739">Errors</li></ul></div><div style="clear:both;"></div><script>
6703var ChartData203 = {
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.000021,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6711}
6712]
6713}
6714var pieData203 = [
6715{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6716var Chartopt = {datasetFill : false}
6717var myLine = new Chart(document.getElementById("canvas203").getContext("2d")).Bar(ChartData203);
6718</script>
6719<div style="float: left;width=705px">
6720<canvas id="canvas204" height="250" width="705px"></canvas>
6721</div><div class="chart-legend" style="float: left;width: 235px">
6722<ul><style>#id65740:before { background-color: rgba(52,255,54,0.75);}</style>
6723<li id="id65740">Errors</li></ul></div><div style="clear:both;"></div><script>
6724var ChartData204 = {
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.000021,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6732}
6733]
6734}
6735var pieData204 = [
6736{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6737var Chartopt = {datasetFill : false}
6738var myLine = new Chart(document.getElementById("canvas204").getContext("2d")).Bar(ChartData204);
6739</script>
6740<div style="float: left;width=282px">
6741<canvas id="canvas205" height="250" width="282px"></canvas>
6742</div><div class="chart-legend" style="float: left;width: 235px">
6743<ul><style>#id65741:before { background-color: rgba(52,255,54,0.75);}</style>
6744<li id="id65741">Errors</li></ul></div><div style="clear:both;"></div><script>
6745var ChartData205 = {
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 pieData205 = [
6757{ value: 18.805027, color:"rgba(52,255,54,0.75)"}];
6758var Chartopt = {datasetFill : false}
6759var myLine = new Chart(document.getElementById("canvas205").getContext("2d")).Bar(ChartData205);
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="canvas206" height="250" width="705px"></canvas>
6766</div><div class="chart-legend" style="float: left;width: 235px">
6767<ul><style>#id65742:before { background-color: rgba(52,255,54,0.75);}</style>
6768<li id="id65742">Errors</li></ul></div><div style="clear:both;"></div><script>
6769var ChartData206 = {
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.614784,13.036281,13.698690,12.207726,10.244370,8.154860,6.343498,5.001975,3.858133,3.009143]
6777}
6778]
6779}
6780var pieData206 = [
6781{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6782var Chartopt = {datasetFill : false}
6783var myLine = new Chart(document.getElementById("canvas206").getContext("2d")).Bar(ChartData206);
6784</script>
6785<div style="float: left;width=705px">
6786<canvas id="canvas207" height="250" width="705px"></canvas>
6787</div><div class="chart-legend" style="float: left;width: 235px">
6788<ul><style>#id65743:before { background-color: rgba(52,255,54,0.75);}</style>
6789<li id="id65743">Errors</li></ul></div><div style="clear:both;"></div><script>
6790var ChartData207 = {
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.391437,1.778840,1.401260,1.060328,0.900768,0.692672,0.567794,0.463550,0.348006,0.288171]
6798}
6799]
6800}
6801var pieData207 = [
6802{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6803var Chartopt = {datasetFill : false}
6804var myLine = new Chart(document.getElementById("canvas207").getContext("2d")).Bar(ChartData207);
6805</script>
6806<div style="float: left;width=705px">
6807<canvas id="canvas208" height="250" width="705px"></canvas>
6808</div><div class="chart-legend" style="float: left;width: 235px">
6809<ul><style>#id65744:before { background-color: rgba(52,255,54,0.75);}</style>
6810<li id="id65744">Errors</li></ul></div><div style="clear:both;"></div><script>
6811var ChartData208 = {
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.206426,0.156416,0.114070,0.088131,0.069169,0.058165,0.048831,0.043427,0.037139,0.028493]
6819}
6820]
6821}
6822var pieData208 = [
6823{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6824var Chartopt = {datasetFill : false}
6825var myLine = new Chart(document.getElementById("canvas208").getContext("2d")).Bar(ChartData208);
6826</script>
6827<div style="float: left;width=705px">
6828<canvas id="canvas209" height="250" width="705px"></canvas>
6829</div><div class="chart-legend" style="float: left;width: 235px">
6830<ul><style>#id65745:before { background-color: rgba(52,255,54,0.75);}</style>
6831<li id="id65745">Errors</li></ul></div><div style="clear:both;"></div><script>
6832var ChartData209 = {
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.014148,0.013952,0.012773,0.009236,0.005993,0.004127,0.002948,0.003144,0.004323,0.001965]
6840}
6841]
6842}
6843var pieData209 = [
6844{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6845var Chartopt = {datasetFill : false}
6846var myLine = new Chart(document.getElementById("canvas209").getContext("2d")).Bar(ChartData209);
6847</script>
6848<div style="float: left;width=705px">
6849<canvas id="canvas210" height="250" width="705px"></canvas>
6850</div><div class="chart-legend" style="float: left;width: 235px">
6851<ul><style>#id65746:before { background-color: rgba(52,255,54,0.75);}</style>
6852<li id="id65746">Errors</li></ul></div><div style="clear:both;"></div><script>
6853var ChartData210 = {
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.002653,0.001572,0.000688,0.001081,0.001081,0.001179,0.000884,0.000590,0.000295,0.001081]
6861}
6862]
6863}
6864var pieData210 = [
6865{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6866var Chartopt = {datasetFill : false}
6867var myLine = new Chart(document.getElementById("canvas210").getContext("2d")).Bar(ChartData210);
6868</script>
6869<div style="float: left;width=705px">
6870<canvas id="canvas211" height="250" width="705px"></canvas>
6871</div><div class="chart-legend" style="float: left;width: 235px">
6872<ul><style>#id65747:before { background-color: rgba(52,255,54,0.75);}</style>
6873<li id="id65747">Errors</li></ul></div><div style="clear:both;"></div><script>
6874var ChartData211 = {
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.001179,0.000000,0.000688,0.000491,0.000295,0.000197,0.000000,0.000098,0.000098,0.000098]
6882}
6883]
6884}
6885var pieData211 = [
6886{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6887var Chartopt = {datasetFill : false}
6888var myLine = new Chart(document.getElementById("canvas211").getContext("2d")).Bar(ChartData211);
6889</script>
6890<div style="float: left;width=705px">
6891<canvas id="canvas212" height="250" width="705px"></canvas>
6892</div><div class="chart-legend" style="float: left;width: 235px">
6893<ul><style>#id65748:before { background-color: rgba(52,255,54,0.75);}</style>
6894<li id="id65748">Errors</li></ul></div><div style="clear:both;"></div><script>
6895var ChartData212 = {
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.000197,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000197]
6903}
6904]
6905}
6906var pieData212 = [
6907{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6908var Chartopt = {datasetFill : false}
6909var myLine = new Chart(document.getElementById("canvas212").getContext("2d")).Bar(ChartData212);
6910</script>
6911<div style="float: left;width=705px">
6912<canvas id="canvas213" height="250" width="705px"></canvas>
6913</div><div class="chart-legend" style="float: left;width: 235px">
6914<ul><style>#id65749:before { background-color: rgba(52,255,54,0.75);}</style>
6915<li id="id65749">Errors</li></ul></div><div style="clear:both;"></div><script>
6916var ChartData213 = {
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.000098,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6924}
6925]
6926}
6927var pieData213 = [
6928{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6929var Chartopt = {datasetFill : false}
6930var myLine = new Chart(document.getElementById("canvas213").getContext("2d")).Bar(ChartData213);
6931</script>
6932<div style="float: left;width=705px">
6933<canvas id="canvas214" height="250" width="705px"></canvas>
6934</div><div class="chart-legend" style="float: left;width: 235px">
6935<ul><style>#id65750:before { background-color: rgba(52,255,54,0.75);}</style>
6936<li id="id65750">Errors</li></ul></div><div style="clear:both;"></div><script>
6937var ChartData214 = {
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.000098,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000]
6945}
6946]
6947}
6948var pieData214 = [
6949{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6950var Chartopt = {datasetFill : false}
6951var myLine = new Chart(document.getElementById("canvas214").getContext("2d")).Bar(ChartData214);
6952</script>
6953<div style="float: left;width=705px">
6954<canvas id="canvas215" height="250" width="705px"></canvas>
6955</div><div class="chart-legend" style="float: left;width: 235px">
6956<ul><style>#id65751:before { background-color: rgba(52,255,54,0.75);}</style>
6957<li id="id65751">Errors</li></ul></div><div style="clear:both;"></div><script>
6958var ChartData215 = {
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 pieData215 = [
6970{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6971var Chartopt = {datasetFill : false}
6972var myLine = new Chart(document.getElementById("canvas215").getContext("2d")).Bar(ChartData215);
6973</script>
6974<div style="float: left;width=282px">
6975<canvas id="canvas216" height="250" width="282px"></canvas>
6976</div><div class="chart-legend" style="float: left;width: 235px">
6977<ul><style>#id65752:before { background-color: rgba(52,255,54,0.75);}</style>
6978<li id="id65752">Errors</li></ul></div><div style="clear:both;"></div><script>
6979var ChartData216 = {
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 pieData216 = [
6991{ value: 13.614784, color:"rgba(52,255,54,0.75)"}];
6992var Chartopt = {datasetFill : false}
6993var myLine = new Chart(document.getElementById("canvas216").getContext("2d")).Bar(ChartData216);
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>