Individuals and Moving Range Control Chart

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="control" style="width:800px;height:625px;margin:1.5em 1em;"></div>

CSS

body {
    background:#f2f2f2;
	line-height:1;
	font-family:calibri, helvetica, sans-serif;
	font-size:75%;
}

/*! jQuery UI - v1.9.1 - 2012-11-12
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */

/*...

JavaScript

var chart;
		$(document).ready(function() {
			chart = $('#control').highcharts({
				chart: {
					type:'line',
					zoomType:'x',
					margin:[10,80,75,100],
					backgroundColor:'transparent',
					plotBackgroundColor:'#ddd',
					plotBorderColor:'#ccc',
					plotBorderWidth:1
				},
                title: { text:'' },
				tooltip: {
					crosshairs:[{
						color:'rgba(122,195,106,.75)'
					}],
					shared:true,
					useHTML:true,
					shadow:false,
					borderWidth:0,
					backgroundColor:'transparent',
					positioner: function() {
						return { x: 105, y:305 }
					},
					headerFormat: 	'<table class="fixed-tooltip" style="width:300px!important;"><tbody>',
					pointFormat: 	'<tr><th>{series.name}</th><td class="num" style="width:50px!important;">{point.x}</td><td class="num" style="width:120px!important;">{point.y}</td></tr>',
					footerFormat: 	'</tbody></table>'
				},
				plotOptions: {
					line: {
						lineWidth:1,
						color:'rgba(24,90,169,.75)',
						states:{
							hover: {
								lineWidth:1
							}
						},
						marker: {
							fillColor:'rgba(24,90,169,.75)',
							symbol:'circle',
							radius:1,
							lineColor:'rgba(255,255,255,.5)',
							lineWidth:0,
							states:{
								hover:{
									radius:2,
									lineWidth:.5,
									fillColor:'rgba(24,90,169,1)',
									lineColor:'rgba(255,255,255,.75)',
								}
							}
						}
					},
					scatter: {
						color: 'rgba(238,46,47,.75)',
						marker: {
							symbol:'diamond',
							radius:3,
							fillColor:'rgba(238,46,47,.75)',
							lineColor:'rgba(255,255,255,.75)',
							lineWidth:.5,
							states: {
								hover: {
									radius:6,
									fillColor:'rgba(238,46,47,.75)',
									lineColor:'rgba(255,255,255,1)',
									lineWidth:1
								}
							}		
						}
					},
					series:{
						cursor:'pointer',
						point:{
							events:{
								click:function(e) {
									openDialog(e,this);
								}
							}
						}
					}
				},
				xAxis:...