	
	$dataname = $data
	$runname = $run_name
	$samplename = $sample_name

	for (j = 0; j < $dataname.length; j++){
		$dataname[j][0] = new Date($dataname[j][0])
	}
	for (j = 0; j < $samplename.length; j++){
		for (i = 0; i < obj.length; i++){
			var ann = obj[i]
			if(ann.Run == $samplename[j]){
				$runname[j][1]=ann.Annotation
			}else{}
		}
	}

	$graphvar = new Dygraph(
    	document.getElementById("$divname"),
		$dataname, 
		{
            labels: ["Date","1st Quantile","3rd Quantile","Upper Whisker", "Lower Whisker", "Median","Outlier", "Threshold", "Threshold"],
			labelsDiv: document.getElementById("$labeldiv"),
			labelsSeparateLines: true,
			showRangeSelector: true,
			includeZero: true,
			rangeSelectorHeight: 20,
			rangeSelectorPlotFillColor: "rgba(0,0,0,0)",
			rangeSelectorPlotFillGradientColor: "rgba(0,0,0,0)",
			rangeSelectorPlotStrokeColor: "rgba(0,0,0,0)",
			interactionModel: Dygraph.defaultInteractionModel,
			plotter: candlePlotter,
			highlightSeriesOpts: { highlightCircleSize : 5 },
			legend: "always",
			title: '$title',
			xlabel: 'Date',
			ylabel: '$ylabel',
			legendFormatter: legendFormatter,
			axisLabelFontSize: 10,
			titleHeight: 25,
			xLabelHeight: 15,
			yLabelWidth: 15,
			axes: {
				x: {
					axisLabelFormatter: function (d, gran) {
						return moment(d).format("MMM YY");
					},
					valueFormatter: function (d,opt,se,dy,row,col) {
						var text = [], 
						data = $dataname[row],
						run = $runname[row],
						sample = $samplename[row];
						
						text = "<b>Sample ID: </b>".fontcolor("#000") + "<font size='-1.5'>" + sample + "</font>"
								+ "<br><b>Run ID: </b>".fontcolor("#000") + run[0]
								+ "<br><b>Month:</b> ".fontcolor("#000") + moment(d).format("MMMM") 
								+ "<br><b>1st Quantile:</b> ".fontcolor("#4DD8AD") + data[1]
								+ "<br><b>3rd Quantile:</b> ".fontcolor("#A3586D") + data[2]  
								+ "<br><b>Upper Whisker:</b> ".fontcolor("#007a0a") + data[3] 
								+ "<br><b>Lower Whisker:</b> ".fontcolor("#f442d1") + data[4] 
								+ "<br><b>Median:</b> ".fontcolor("#7e04a3") + data[5] 
						
						
						if (data[7] != null){
							text = text + "<br><b>Upper Threshold:</b> ".fontcolor("#ff0000") + data[7] 
						}
						
						if (data[8] != null){
							text = text + "<br><b>Lower Threshold:</b> ".fontcolor("#ff0000") + data[8] 
						}
					
						if (data[6] != null){
							text = text + "<br><b>Outlier:</b> ".fontcolor("#0080ff") + data[6] 
						}
						if (run[1].length == 0){return text}
						else if (run[1].length != 0){
							note = run[1]
							text = text + "<br/><b>Notes: </b><br/>".fontcolor("#ff0000") + note.fontcolor("red")
							return text
						}
						else{console.log("Error in labels")}
							
					},				
				},
			},
			series: {
				"1st Quantile" : {
					color: "#4DD8AD"
				}, 
				"3rd Quantile" : {
					color: "#A3586D"
				}, 
				"Upper Whisker" : {
					color: "#007a0a"
				}, 
				"Lower Whisker" : {
					color: "#f442d1"
				}, 
				"Median" : {
					color: "#7e04a3"
				}, 
				"Outlier" : {
					drawPoints: true,
					pointSize: 3,
					color: "#0080ff",
					plotter: Dygraph.Plotters.linePlotter,
					strokeWidth: 0
				},
				"Threshold" : {
					plotter: Dygraph.Plotters.linePlotter,
					strokePattern: Dygraph.DASHED_LINE ,
					color: "#ff0000",
					strokeWidth: 2, 
				}
			},	
			underlayCallback: function(canvas, area, g) {		
				
				ctx = g.hidden_ctx_;
				ctx.strokeStyle = "#dd4b39";
				
				for (i = 0; i < $dataname.length; i++) { 
					var point = $dataname[i][6],
					note = $runname[i][1],
					date = $dataname[i][0];
					
					if ($runname[i][1] == null){}
					else if(note.length != 0){
						mutated = g.toDomCoords(date, point)
						ctx.beginPath();
						ctx.arc(mutated[0], mutated[1],5,0,Math.PI*2,true);
						ctx.closePath();
						ctx.stroke();
					}
				}
				
				ctx.fillStyle = "#0080ff";
				ctx.strokeStyle = "#0080ff";
				var [bottom,top] = g.yAxisRange();
				for(i = 0; i < dateobj.length; i++) {
					date = dateobj[i];
					position = g.toDomCoords(date.Annotated_date,bottom);
					dateobj[i].key3 = position;
					canvas.fillText(dateobj[i].Notes,dateobj[i].key3[0]+2,dateobj[i].key3[1]-15);
					canvas.strokeRect(dateobj[i].key3[0],dateobj[i].key3[1]-25,dateobj[i].Notes.length*7,15)
					canvas.beginPath();
					canvas.moveTo(dateobj[i].key3[0],dateobj[i].key3[1]);
					canvas.lineTo(dateobj[i].key3[0],dateobj[i].key3[1]-10);
					canvas.closePath();
					canvas.stroke();
				}
				
			},
			pointClickCallback: function(e, point) {
				if($dataname[point.idx][6] == null)return;
				else{
					run = $samplename[point.idx]
					date = $dataname[point.idx][0]
					date =  moment(date).format("DD-MM-YYYY")
					//copyToClipboard(run)
					chartid = "$chart_id"
					makeQuery(run,date, chartid)
				}
			},
		}
	);	
	var upper=1, lower =1;
	for(i = 1; i < $dataname.length; i++){
		if($dataname[i][7]==null){upper += 1;}
		if($dataname[i][8]==null){lower += 1;}
	}
	if(upper==$dataname.length && lower==$dataname.length){$graphvar.updateOptions({labels: ["Date","1st Quantile","3rd Quantile","Upper Whisker", "Lower Whisker", "Median","Outlier", "", ""]});}
	else if (lower==$dataname.length){$graphvar.updateOptions({labels: ["Date","1st Quantile","3rd Quantile","Upper Whisker", "Lower Whisker", "Median","Outlier", "Threshold", ""]});}
	else if (upper ==$dataname.length){$graphvar.updateOptions({labels: ["Date","1st Quantile","3rd Quantile","Upper Whisker", "Lower Whisker", "Median","Outlier","", "Threshold"]});}
		
	document.getElementById("$restorebutton").onclick 	= function() { restorePositioning($graphvar); };
	document.getElementById("$yearbutton").onclick 	= 	function() 	{$graphvar.updateOptions({dateWindow: [Date.parse('$startdate'),Date.parse('$enddate')]});};
	gs.push($graphvar);
	