function update_graph(g) {
    return function(e) {
	      var payload = {i: document.getElementById('index').value,
		                   s: document.getElementById('series').value,
		                   t: document.getElementById('tenor').value,
		                   g: document.getElementById('greek').value};
	      if( g.maindiv_.id == "graph1"){
	          payload['g'] = "skew";
	      }
	      $.getJSON("_data_tranches",
		              payload,
		              function(data){
		                  var newdata = data["data"].map(function(e){
			                    f = e.slice(1);
			                    f.unshift(new Date(e[0]));
			                    return f});
		                  g.updateOptions({'file': newdata, 'labels': data['labels']});
		              });
    }
};

document.addEventListener("DOMContentLoaded", function(event) {
    var g1 = new Dygraph(document.getElementById("graph1"),
		                 [], // path to CSV file
		                 { labels: [],
		                   title: "Correlation numbers",
		                   showRoller: true,
		                   legend: "always"});

    var g2 = new Dygraph(document.getElementById("graph2"),
		                 [], // path to CSV file
		                 { labels: [],
		                   title: "Risk numbers",
		                   showRoller: true,
		                   legend: 'always'});

    document.getElementById('index').
        addEventListener('change', update_graph(g1));
    document.getElementById('series').
        addEventListener('change', update_graph(g1));
    document.getElementById('tenor').
        addEventListener('change', update_graph(g1));
    document.getElementById('greek').
        addEventListener('change', update_graph(g2));
    var event = new Event('change');
    document.getElementById('index').dispatchEvent(event);
    document.getElementById('greek').dispatchEvent(event);
});