HighChart-Navigator-MultipleSeries

Highcharts navigator

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- <script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highcharts/draggable-points/master/draggable-points.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/5.0.14/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/5.0.14/highcharts-more.js"></script>
<script src="https://rawgithub.com/highcharts/draggable-points/master/draggable-points.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/5.0.14/js/modules/exporting.js"></script>



<div id="container" style="height: 450px; min-width: 310px"></div>

<input type="checkbox" name="skills" value="Alpha" /> Alpha
<input type="checkbox" name="skills" value="Beta" /> Beta
<input type="checkbox" name="skills" value="Gamma" /> Gamma
<br />
<br />
<button id="btnAddUpdate">Add or Update Series</button>
<br />
<br />
<div id="divResult">

</div>

CSS

body {
  padding: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

JavaScript

(function(H) {
	H.Series.prototype.update = function (newOptions, redraw) {
		var series = this,
			chart = series.chart,
			oldOptions = series.userOptions,
			oldType = series.oldType || series.type,
			newType = newOptions.type || oldOptions.type || chart.options.chart.type,
			proto = H.seriesTypes[oldType].prototype,
			n,
			preserveGroups = [
				'group',
				'markerGroup',
				'dataLabelsGroup'
			],
			preserve = [
				'navigatorSeries',
				'baseSeries'
			],

			animation = series.finishedAnimating && { animation: false };

		if (Object.keys && Object.keys(newOptions).toString() === 'data') {
			return this.setData(newOptions.data, redraw);
		}

		if (
			(newType && newType !== oldType) ||
			newOptions.zIndex !== undefined ||
			series.options.isInternal
		) {
			preserveGroups.length = 0;
		}

		H.each(preserve.concat(preserveGroups), function (prop) {
			preserve[prop] = series[prop];
			delete series[prop];
		});

		newOptions = H.merge(oldOptions, animation, {
			index: series.index,
			pointStart: series.xData[0]
		}, { data: series.options.data }, newOptions);

		series.remove(false, null, false);
		for (n in proto) {
			series[n] = undefined;
		}
		H.extend(series, H.seriesTypes[newType || oldType].prototype);

		H.each(preserve, function (prop) {
			series[prop] = preserve[prop];
		});

		series.init(chart, newOptions);
		series.oldType = oldType;
		chart.linkSeries();
		if (H.pick(redraw, true)) {
			chart.redraw(false);
		}
	}
  
  
  H.Navigator.prototype.updateNavigatorSeries = function () {
		var navigator = this,
			chart = navigator.chart,
			baseSeries = navigator.baseSeries,
			baseOptions,
			mergedNavSeriesOptions,
			chartNavigatorSeriesOptions = navigator.navigatorOptions.series,
			baseNavigatorOptions,
			navSeriesMixin = {
				enableMouseTracking: false,
				index: null, // #6162
				linkedTo: null, // #6734
				group: 'nav', // for columns
				padXAxis: false,
				xAxis: 'navigator-x-axis',
				yAxis:...