ebra_201509_201512.html

<script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
<script type="text/javascript" src="https://jakehosen.github.io/ms/synchronizer.js"></script>

<style type="text/css">


#set_range {
	float:left;
	width:900px;
	height:100px;
	}
#wrap {
	clear:both;
	width:600px;
	margin:0 auto;
	}
#left_col {
	float:left;
	display:inline-block;
	width:33%;
	}
#right_col {
	display:inline-block;
	width:33%;
	}
#center_col {
	float:right;
	display:inline-block;
	width:33%;
	}
	
</style>


      <input type="checkbox" id="chk-sync" onchange="update()"><label for="chk-sync">Sync</label>

<div id="g1a" style="width:825px; height:225px;"></div>
<div id="g2a" style="width:825px; height:225px;"></div>
<div id="g3a" style="width:825px; height:250px;"></div>

<script type="text/javascript">
var sync;
var gs;

window.update = function() {
    var chk = document.getElementById('chk-sync').checked;
    
    if(chk) {
        sync = Dygraph.synchronize(gs,{range:false});
    }
    else {
        sync.detach();
	    for (i = 0; i < 3; ++i) {
			gs[i].updateOptions({
                dateWindow: null,
			    valueRange: null
		    });
        }	
    }
}



gs = [
    aa = new Dygraph(document.getElementById("g1a"), "ebra_201509_201512.csv", {visibility:[true,true,true,true,true,true,true,true,true], drawXGrid:false, drawYGrid:false, drawPoints:true, strokeWidth:0, pointSize:1.75}),
    bb = new Dygraph(document.getElementById("g2a"), "ebra_201509_201512.csv",{visibility:[true,true,true,true,true,true,true,true,true], drawXGrid:false, drawYGrid:false, drawPoints:true, strokeWidth:0, pointSize:1.75}),
    cc = new Dygraph(document.getElementById("g3a"), "ebra_201509_201512.csv",{visibility:[true,true,true,true,true,true,true,true,true], drawXGrid:false, drawYGrid:false, drawPoints:true, strokeWidth:0, pointSize:1.75, showRangeSelector:true, interactionModel:Dygraph.defaultInteractionModel})
];

setStatus();

function setStatus() {
  document.getElementById("visibility").innerHTML =
    aa.visibility().toString();
}

function change(el) {
  aa.setVisibility(parseInt(el.id), el.checked);
  setStatus();
}

function setStatus1() {
  document.getElementById("visibility").innerHTML =
    bb.visibility().toString();
}

function change1(el) {
  bb.setVisibility(parseInt(el.id), el.checked);
  setStatus1();
}

function setStatus2() {
  document.getElementById("visibility").innerHTML =
    cc.visibility().toString();
}

function change2(el) {
  cc.setVisibility(parseInt(el.id), el.checked);
  setStatus2();
}

function myFunction() {
	var minValue = document.getElementById("min").value;
	var maxValue = document.getElementById("max").value;
    aa.updateOptions({
    valueRange: [minValue, maxValue]
    });
    showYDimensions(aa.yAxisRanges());
	}
	  
function myFunction1() {
	var minValue = document.getElementById("min").value;
	var maxValue = document.getElementById("max").value;
    bb.updateOptions({
    valueRange: [minValue, maxValue]
    });
    showYDimensions(bb.yAxisRanges());
	}

function myFunction2() {
	var minValue = document.getElementById("min").value;
	var maxValue = document.getElementById("max").value;
    cc.updateOptions({
    valueRange: [minValue, maxValue]
    });
    showYDimensions(cc.yAxisRanges());
	}	  


</script>

<div id="set_range">
	Y-Min: <input type="text" id="min" value=0>
	Y-Max: <input type="text" id="max" value=1000>

	<button onclick="myFunction()">Set 1</button>
	<button onclick="myFunction1()">Set 2</button>	
	<button onclick="myFunction2()">Set 3</button>		
</div>

<div id="wrap">
    <div id="left_col">
  <p><b>Select First Graph Variables:</b></p>
  <p>
    <input type=checkbox id="0"checked onClick="change(this)">
    <label for="0"> Temperature</label><br/>
    <input type=checkbox id="1"checked onClick="change(this)">
    <label for="1"> pH</label><br/>
    <input type=checkbox id="2"checked onClick="change(this)">
    <label for="2"> Conductivity</label><br/>
    <input type=checkbox id="3"checked onClick="change(this)">
    <label for="3"> DO</label><br/>
    <input type=checkbox id="4"checked onClick="change(this)">
    <label for="4"> Turbidity</label><br/>
    <input type=checkbox id="5"checked onClick="change(this)">
    <label for="5"> Temp-Cor fDOM (QSU)</label><br/>
    <input type=checkbox id="6"checked onClick="change(this)">
    <label for="6"> Full-Cor fDOM (QSU)</label><br/>	
    <input type=checkbox id="7"checked onClick="change(this)">
    <label for="7"> fDOM (QSU)</label><br/>
    <input type=checkbox id="8"checked onClick="change(this)">
    <label for="8"> Discharge (CFS)</label><br/>	  
  </p>
  </p>
    </div>
	
    <div id="right_col">
  <p><b>Select Second Graph Variables:</b></p>
  <p>
    <input type=checkbox id="0"checked onClick="change1(this)">
    <label for="0"> Temperature</label><br/>
    <input type=checkbox id="1"checked onClick="change1(this)">
    <label for="1"> pH</label><br/>
    <input type=checkbox id="2"checked onClick="change1(this)">
    <label for="2"> Conductivity</label><br/>
    <input type=checkbox id="3"checked onClick="change1(this)">
    <label for="3"> DO</label><br/>
    <input type=checkbox id="4"checked onClick="change1(this)">
    <label for="4"> Turbidity</label><br/>
    <input type=checkbox id="5"checked onClick="change1(this)">
    <label for="5"> Temp-Cor fDOM (QSU)</label><br/>
    <input type=checkbox id="6"checked onClick="change1(this)">
    <label for="6"> Full-Cor fDOM (QSU)</label><br/>	
    <input type=checkbox id="7"checked onClick="change1(this)">
    <label for="7"> fDOM (QSU)</label><br/>
    <input type=checkbox id="8"checked onClick="change1(this)">
    <label for="8"> Discharge (CFS)</label><br/>	  
  </p>
  </p>
    </div>
		
    <div id="center_col">
  <p>
      <p><b>Select Third Graph Variables:</b></p>
	  
    <input type=checkbox id="0"checked onClick="change2(this)">
    <label for="0"> Temperature</label><br/>
    <input type=checkbox id="1"checked onClick="change2(this)">
    <label for="1"> pH</label><br/>
    <input type=checkbox id="2"checked onClick="change2(this)">
    <label for="2"> Conductivity</label><br/>
    <input type=checkbox id="3"checked onClick="change2(this)">
    <label for="3"> DO</label><br/>
    <input type=checkbox id="4"checked onClick="change2(this)">
    <label for="4"> Turbidity</label><br/>
    <input type=checkbox id="5"checked onClick="change2(this)">
    <label for="5"> Temp-Cor fDOM (QSU)</label><br/>
    <input type=checkbox id="6"checked onClick="change2(this)">
    <label for="6"> Full-Cor fDOM (QSU)</label><br/>	
    <input type=checkbox id="7"checked onClick="change2(this)">
    <label for="7"> fDOM (QSU)</label><br/>
    <input type=checkbox id="8"checked onClick="change2(this)">
    <label for="8"> Discharge (CFS)</label><br/>	  
  </p>
  
    </div>
</div>