Google Git
Sign in
apache / incubator-retired-cmda / 48259f3a12fbfd4fb937b377c33356582f761e76 / . / public / html / twoDimTimeSeries.html
blob: fa30193359b07614faa62f23ff9aaa9c96664cbe [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/xmisc.js"></script>
<script type="text/javascript">
var Response = null;
var variable = "";
// called on load or reload
window.onload = function() {
select_data();
select_var();
// no data to download yet
disable_download_button();
}
// disable download data button
function disable_download_button()
{
var x=document.getElementById("download_data");
x.disabled=true;
}
// enable download data button
function enable_download_button()
{
var x=document.getElementById("download_data");
x.disabled=false;
}
// enable all vars in dropdown menu
function reset_vars()
{
var x=document.getElementById("var");
x.options[0].disabled=false;
x.options[1].disabled=false;
x.options[2].disabled=false;
x.options[3].disabled=false;
x.options[4].disabled=false;
x.options[5].disabled=false;
x.options[6].disabled=false;
x.options[7].disabled=false;
x.options[8].disabled=false;
x.options[9].disabled=false;
x.options[10].disabled=false;
x.options[11].disabled=false;
x.options[12].disabled=false;
x.options[13].disabled=false;
x.options[14].disabled=false;
x.options[15].disabled=false;
x.options[16].disabled=false;
x.options[17].disabled=false;
x.options[18].disabled=false;
x.options[19].disabled=false;
x.options[20].disabled=false;
x.options[21].disabled=false;
x.options[22].disabled=false;
x.options[23].disabled=false;
x.options[24].disabled=false;
}
// form variable string based on "var" dropdown selection
function select_var()
{
var var_string = $("#var").val();
// disable the download button because of this change
disable_download_button();
if (var_string == "Total Cloud Fraction")
variable = "clt";
else if (var_string == "Surface Temperature")
variable = "ts";
else if (var_string == "Sea Surface Temperature")
variable = "tos";
else if (var_string == "Precipitation Flux")
variable = "pr";
else if (var_string == "Eastward Near-Surface Wind")
variable = "uas";
else if (var_string == "Northward Near-Surface Wind")
variable = "vas";
else if (var_string == "Near-Surface Wind Speed")
variable = "sfcWind";
else if (var_string == "Sea Surface Height")
variable = "zos";
else if (var_string == "Leaf Area Index")
variable = "lai";
else if (var_string == "Equivalent Water Height Over Land")
variable = "zl";
else if (var_string == "Equivalent Water Height Over Ocean")
variable = "zo";
else if (var_string == "Ocean Heat Content Anomaly within 700 m Depth")
variable = "ohc700";
else if (var_string == "Ocean Heat Content Anomaly within 2000 m Depth")
variable = "ohc2000";
else if (var_string == "Surface Downwelling Longwave Radiation")
variable = "rlds";
else if (var_string == "Surface Downwelling Shortwave Radiation")
variable = "rsds";
else if (var_string == "Surface Upwelling Longwave Radiation")
variable = "rlus";
else if (var_string == "Surface Upwelling Shortwave Radiation")
variable = "rsus";
else if (var_string == "Surface Downwelling Clear-Sky Longwave Radiation")
variable = "rldscs";
else if (var_string == "Surface Downwelling Clear-Sky Shortwave Radiation")
variable = "rsdscs";
else if (var_string == "Surface Upwelling Clear-Sky Shortwave Radiation")
variable = "rsuscs";
else if (var_string == "TOA Incident Shortwave Radiation")
variable = "rsdt";
else if (var_string == "TOA Outgoing Clear-Sky Longwave Radiation")
variable = "rlutcs";
else if (var_string == "TOA Outgoing Longwave Radiation")
variable = "rlut";
else if (var_string == "TOA Outgoing Clear-Sky Shortwave Radiation")
variable = "rsutcs";
else if (var_string == "TOA Outgoing Shortwave Radiation")
variable = "rsut";
// alert("variable: " + variable)
}
// set up "var" dropdown based status of "data" dropdown
function select_data()
{
var data_string = $("#data").val();
var x=document.getElementById("var");
// disable the download button because of this change
disable_download_button();
// enable all options in "var" dropdown first
reset_vars();
// alert(data_string);
// disable corresponding "var" options
if (data_string == "NASA/AMSRE") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[3].selected=true;
}
else if (data_string == "NASA/MODIS") {
x.options[0].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[1].selected=true;
//x.options[8].selected=true;
}
else if (data_string == "NASA/TRMM") {
x.options[0].selected=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
}
else if (data_string == "NASA/GPCP") {
x.options[0].selected=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
}
else if (data_string == "NASA/QuikSCAT") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[4].selected=true;
//x.options[5].selected=true;
//x.options[6].selected=true;
}
else if (data_string == "NASA/AVISO") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[7].selected=true;
}
else if (data_string == "NASA/GRACE") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[9].selected=true;
//x.options[10].selected=true;
}
else if (data_string == "NOAA/NODC") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[11].selected=true;
//x.options[12].selected=true;
}
else if (data_string == "NASA/CERES") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[3].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].selected=true;
}
else if (data_string == "ECMWF/interim") {
x.options[0].disabled=true;
x.options[1].disabled=true;
x.options[2].disabled=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
x.options[6].disabled=true;
x.options[7].disabled=true;
x.options[8].disabled=true;
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[13].disabled=true;
x.options[14].disabled=true;
x.options[15].disabled=true;
x.options[16].disabled=true;
x.options[17].disabled=true;
x.options[18].disabled=true;
x.options[19].disabled=true;
x.options[20].disabled=true;
x.options[21].disabled=true;
x.options[22].disabled=true;
x.options[23].disabled=true;
x.options[24].disabled=true;
x.options[3].selected=true;
}
// for all other models
else {
x.options[9].disabled=true;
x.options[10].disabled=true;
x.options[11].disabled=true;
x.options[12].disabled=true;
x.options[0].selected=true;
}
// form variable string
select_var();
}
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
$("#download_data").click(function(event) {
var durl = $("#data_url").val();
// alert(durl);
window.location.assign(durl);
});
$("#timeSeries2D").click(function(event) {
// alert('****** inside timeSeries2D()!');
Response = null;
// no data to download yet
disable_download_button();
$("#Response").html("Calculating ...");
$("#data_url").html("Calculating ...");
$("#Image").html("");
// form url string
// var url = "http://cmacws.jpl.nasa.gov:9002/svc/timeSeries2D?";
var url = "http://" + window.location.hostname + ":9002/svc/timeSeries2D?";
// alert("url: " + url);
var d1 = $("#data").val();
var model1 = d1.replace("/", "_");
var arglist = "";
arglist = arglist.concat("model=");
arglist = arglist.concat(model1);
// alert("arglist: " + arglist);
var v1 = $("#var").val();
arglist = arglist.concat("&var=");
arglist = arglist.concat(variable);
// alert("arglist: " + arglist);
var t0 = $("#t0").val();
var t1 = $("#t1").val();
t0 = t0.replace("-", "");
t1 = t1.replace("-", "");
arglist = arglist.concat("&start_time=");
arglist = arglist.concat(t0);
arglist = arglist.concat("&end_time=");
arglist = arglist.concat(t1);
// alert("arglist: " + arglist);
var lon0 = $("#lon0").val();
var lon1 = $("#lon1").val();
var lat0 = $("#lat0").val();
var lat1 = $("#lat1").val();
arglist = arglist.concat("&lon1=");
arglist = arglist.concat(lon0);
arglist = arglist.concat("&lon2=");
arglist = arglist.concat(lon1);
arglist = arglist.concat("&lat1=");
arglist = arglist.concat(lat0);
arglist = arglist.concat("&lat2=");
arglist = arglist.concat(lat1);
// alert("arglist: " + arglist);
arglist = arglist.concat("&scale=");
var y = document.getElementById("radioLin").checked;
// alert(y);
if (y == true)
arglist = arglist.concat('0');
else
arglist = arglist.concat('2');
var purpose = $("#purpose").val();
arglist = arglist.concat("&purpose=");
arglist = arglist.concat(purpose);
// url = url + encodeURIComponent(arglist);
url = url + encodeURI(arglist);
// url = url + arglist;
// alert("url: " + url);
var urlTimeBounds = "http://" + window.location.hostname + ":9002/svc/time_bounds?";
var arglistTB = "";
arglistTB = arglistTB.concat("serviceType=");
arglistTB = arglistTB.concat("1");
arglistTB = arglistTB.concat("&source=");
arglistTB = arglistTB.concat(d1);
arglistTB = arglistTB.concat("&var=");
arglistTB = arglistTB.concat(variable);
urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);
// alert("urlTimeBounds: " + urlTimeBounds);
$.ajax({
type: "GET",
url: urlTimeBounds,
dataType: "json",
data: null,
success: function(data, textStatus, xhr) {
Response = data;
// alert("data: " + data);
if (data.success == false) {
// alert(data.error);
Response = null;
var text = JSON.stringify(data, null, 4);
text = "Error in backend: <br>" + text;
$("#Response").html(text);
$("#data_url").html(text);
return;
}
var text = JSON.stringify(data, null, 4);
// alert("text: " + text);
// $("#Response").html("<pre>"+text+"</pre>");
// $("#Response").html(text);
var tb = data.time_bounds;
var bds = String(tb).split(",");
// alert("tb: " + tb);
// alert("bds: " + bds);
var lowerT = parseInt(bds[0]);
var upperT = parseInt(bds[1]);
// alert("lowerT: " + lowerT);
// alert("upperT: " + upperT);
var t0I = parseInt(t0);
var t1I = parseInt(t1);
// alert("t0: " + t0I);
// alert("t1: " + t1I);
if ( lowerT == 0 && upperT ==0 ) {
alert("We do not have data for this source and variable configuration.");
return;
}
if (t0I < lowerT && t1I < lowerT ||
t0I > upperT && t1I > upperT) {
alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"].");
return;
}
if (t0I < lowerT && t1I <= upperT) {
alert("Your start year-month is out of bound. It has to be in or later than " + lowerT +
". We will use the range ["+lowerT+", "+t1I+"] for you.");
}
if (t1I > upperT && t0I >= lowerT) {
alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT +
". We will use the range ["+t0I+", "+upperT+"] for you.");
}
if (t0I < lowerT && t1I > upperT ) {
alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT +
", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you.");
}
},
error: function(xhr, textStatus, errorThrown) {
$("#Response").html("error!");
$("#data_url").html("error!");
// alert("xhr.status: "+xhr.status);
// alert("error status: "+textStatus);
},
complete: function(xhr, textStatus) {
//alert("complete status: "+textStatus);
}
});
$.ajax({
type: "GET",
url: url,
dataType: "json",
data: null,
success: function(data, textStatus, xhr) {
Response = data;
// alert("data: " + data);
if (data.success == false) {
// alert(data.error);
Response = null;
var text = JSON.stringify(data, null, 4);
text = "Error in backend: <br>" + text;
// $("#Response").html("<span style='color:red'>" + text + "</span>");
$("#Response").html(text);
$("#data_url").html(text);
return;
}
var text = JSON.stringify(data, null, 4);
// alert(text);
// $("#Response").html("<pre>"+text+"</pre>");
$("#Response").html(text);
var html1 = "<img src='"+data.url+"' width='820'/>";
// alert(html1);
$("#Image").html(html1);
// post dataUrl to textarea and enable download button
$("#data_url").html(data.dataUrl);
enable_download_button();
},
error: function(xhr, textStatus, errorThrown) {
$("#Response").html("error!");
$("#data_url").html("error!");
// alert("xhr.status: "+xhr.status);
// alert("error status: "+textStatus);
},
complete: function(xhr, textStatus) {
//alert("complete status: "+textStatus);
}
});
});
});
</script>
</head>
<body>
<p>
<table border="1">
<tr>
<td colspan="4">
<center>
<b>Service: 2-D Variable Time Series</b><br><br>
This service generates a graph of a 2-dimensional variable's time series with monthly averaged values. <br>
Select a data source (model or observation), a variable name, a time range, and a spatial range below.<br><br>
</center>
</td>
</tr>
<tr>
<td>data source:</td><td><select name="data", id="data" onchange="select_data()">
<!-- <option>NASA/obs4MIPs</option> -->
<optgroup label="Observation">
<option selected="NASA/MODIS">NASA/MODIS</option>
<option>NASA/AMSRE</option>
<option>NASA/TRMM</option>
<option>NASA/GPCP</option>
<option>NASA/QuikSCAT</option>
<option>NASA/AVISO</option>
<option>NASA/GRACE</option>
<option>NOAA/NODC</option>
<option>NASA/CERES</option>
</optgroup>
<optgroup label="Model: Historical">
<option>CCCMA/CANESM2</option>
<option>GFDL/ESM2G</option>
<option>GISS/E2-H</option>
<option>GISS/E2-R</option>
<option>NCAR/CAM5</option>
<option>NCC/NORESM</option>
<option>UKMO/HadGEM2-ES</option>
</optgroup>
<optgroup label="Model: AMIP">
<option>CCCMA/CANAM4</option>
<option>CSIRO/MK3.6</option>
<option>GFDL/CM3</option>
<option>IPSL/CM5A-LR</option>
<option>MIROC/MIROC5</option>
<option>UKMO/HadGEM2-A</option>
</optgroup>
<optgroup label="Reanalysis">
<option>ECMWF/interim</option>
</optgroup>
</select></td>
<td>variable name:</td><td><select name="var", id="var" onchange="select_var()">
<option>Precipitation Flux</option>
<option>Total Cloud Fraction</option>
<option>Surface Temperature</option>
<option>Sea Surface Temperature</option>
<option>Eastward Near-Surface Wind</option>
<option>Northward Near-Surface Wind</option>
<option>Near-Surface Wind Speed</option>
<option>Sea Surface Height</option>
<option>Leaf Area Index</option>
<option>Equivalent Water Height Over Land</option>
<option>Equivalent Water Height Over Ocean</option>
<option>Ocean Heat Content Anomaly within 700 m Depth</option>
<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
<option>Surface Downwelling Longwave Radiation</option>
<option>Surface Downwelling Shortwave Radiation</option>
<option>Surface Upwelling Longwave Radiation</option>
<option>Surface Upwelling Shortwave Radiation</option>
<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
<option>TOA Incident Shortwave Radiation</option>
<option>TOA Outgoing Longwave Radiation</option>
<option>TOA Outgoing Shortwave Radiation</option>
<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
</select></td>
</tr>
<tr>
<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td>
<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td>
</tr>
<tr>
<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td>
<td>end lat (deg):</td><td><input id="lat1" value="90"/></td>
</tr>
<tr>
<td>start lon (deg):</td><td><input id="lon0" value="0"/></td>
<td>end lon (deg):</td><td><input id="lon1" value="360"/></td>
</tr>
<tr>
<td colspan="1">
variable scale:
</td>
<td colspan="3">
<form> <input type="radio" name="scale1" value="linear" id="radioLin" checked>linear
<input type="radio" name="scale1" value="logarithmic" id="radioLog">logarithmic
</form>
</td>
</tr>
<tr>
<td colspan="1">
Execution purpose
</td>
<td colspan="3">
<form>
<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
</form>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input id="timeSeries2D" type="submit" value=" Get Plot " style="height:28px"/></td>
<form>
<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/>
</td>
</form>
</tr>
<tr>
<td colspan="4">
<div id="Image">Image Here</div>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<textarea readonly id="data_url" cols="89" rows="2">Data URL Here</textarea>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea>
</td>
</tr>
</p>
</table>
</body>
</html>