-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (100 loc) · 3.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-2.0.2.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-2.0.2.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-2.0.2.min.js"></script>
<meta charset="UTF-8">
<meta name="NetCDF Plotting widget" content="Plotting widget for NetCDF - API based on FastAPI+Xarray+Pandas+Bokeh">
<meta name="keywords" content="python,netcdf,bokeh,xarray,pandas">
<meta name="author" content="Massimo Di Stefano">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>NC-Plot</title>
<link href="styles.css" rel="stylesheet">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
</head>
<body>
<div id="loader"></div>
<div class="Row">
<div id="ncinput_label" class="Column">
<label for="nc">NetCDF URL:</label>
</div>
<div id="ncinput_text" class="Column">
<input type="text" size="60" id="nc" list='nc.list' />
<datalist id="nc.list">
<option>http://hyrax:8080/opendap/SN99938.nc</option>
<option>http://hyrax:8080/opendap/ctdiaoos_gi2007_2009.nc</option>
<option>http://hyrax:8080/opendap/itp01_itp1grd2042.nc</option>
<option>https://thredds.met.no/thredds/dodsC/arcticdata/obsSynop/01361</option>
</datalist>
</div>
</div>
<div class="Row">
<div id="ncinput_submit" class="Column">
<button onclick="getParam()">Get variables</button>
</div>
<select id="var_selector" name="source" onchange="getPlot()" class="Column">
<option>Choose a variable</option>
</select>
</div>
<input type="hidden" id="axis" value="y_axis" />
<div id="tsplot" class="Row"></div>
<script>
document.getElementById("loader").style.display = "none";
</script>
<script>
function hideme(n) {
var x = document.getElementById(n);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
<script>
function getParam() {
document.getElementById("loader").style.display = "block";
while (document.getElementById("var_selector").options.length) document.getElementById("var_selector").remove(0);
var el = document.createElement("option");
el.textContent = 'Choose a variable';
el.value = 'Choose a variable';
document.getElementById("var_selector").appendChild(el);
var nc_url = document.getElementById("nc");
console.log(nc_url.value)
fetch('http://localhost:7000/adcplot/plot?get=param&resource_url='+nc_url.value)
.then(response => response.json())
.then(data => {
document.getElementById("axis").value = Object.keys(data);
for (const variable of data[Object.keys(data)]) {
console.log(variable);
var el = document.createElement("option");
el.textContent = variable;
el.value = variable;
document.getElementById("var_selector").appendChild(el);
document.getElementById("loader").style.display = "none";
}
});
console.log(nc_url.value);
}
</script>
<script>
function getPlot() {
var nc_url = document.getElementById("nc");
document.getElementById('tsplot').innerHTML = "";
document.getElementById("loader").style.display = "block";
var variable = document.getElementById("var_selector").value;
fetch(
'http://localhost:7000/adcplot/plot?get=plot&resource_url='+nc_url.value+'&metadata=true&variable='+variable+'&axis='+document.getElementById("axis").value)
.then(function (response) {
return response.json();
})
.then(function (item) {
Bokeh.embed.embed_item(item);
document.getElementById("loader").style.display = "none";
document.getElementById("tsplot").style.display = "block";
})
}
</script>
</body>
</html>