<html>
<head>
<meta charset="utf-8">
<title>Year to Date Growing Degree Day Chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var stnId = "defaultpriortostationidset";
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0].toLowerCase() == "stnid"){stnId = pair[1];}
}
if (stnId == "defaultpriortostationidset") {
var tempo = window.location;
alert("Try adjusting your URL:\n\n" + tempo.protocol + tempo.hostname + tempo.pathname + "?StnId=HOU");
} else {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var edate = yyyy+'-'+mm+'-'+dd;
var sdate = yyyy+'-1-1';
$(getMaxDays);
function postError() {
alert("oops, error");
}
function getData(url, params) {
var xdr, args, results,
params_string = JSON.stringify(params);
if (window.XDomainRequest) {
xdr = new XDomainRequest();
xdr.open("GET", url + "?params=" + params_string);
xdr.onload = function () {
results = $.parseJSON(xdr.responseText);
processResult(results);
};
xdr.onerror = postError;
xdr.onprogress = $.noop();
xdr.ontimeout = $.noop();
setTimeout(function () {
xdr.send();
}, 0);
} else {
args = {params: params_string};
$.ajax(url, {
type: 'POST',
data: args,
crossDomain: true,
success: processResult,
error: postError
});
}
}
function getMaxDays(){
var url='https://data.rcc-acis.org/StnData';
var params = {"sid":stnId,"sdate":sdate,"edate":edate,"elems":"gdd"};
getData(url,params);
}
function processResult(data){
if (typeof data.data == 'undefined') {
alert('Station is invalid or has no data. Try another station (eg. HOU).');
} else {
var sum = new Array();
var titleName = "Growing Degree Days (Base 50\u00B0F)";
var gdd = new Array();
for(var i=0;i<data.data.length;i++){
if(data.data[i][1] === "M"){gdd[i] = null;} //if the data is missing it will not show the data value.
else{gdd[i] = parseInt(data.data[i][1],10);}
if(i==0){sum[i] = gdd[i];}
else{sum[i] = sum[i-1] + gdd[i];}
}
$('#output').highcharts({
chart:{
zoomType: 'x'
},
title:{
text: titleName
},
subtitle:{
text: data.meta.name + " (" + data.meta.state + ")",
style: {
fontSize: '14px'
}
},
xAxis:{
type: 'datetime',
maxZoom: 3 * 24 * 3600000,
labels: {
style: {
color: '#000000',
fontSize: '14px'
}
}
},
yAxis:[{
title:{
text: 'Growing Degree Days',
style: {
fontSize: '14px'
},
},
labels: {
style: {
color: '#000000'
}
}
},{
title:{
text: 'Accumulated Growing Degree Days',
style: {
color: '#F00000',
fontSize: '14px'
},
},
labels: {
style: {
color: '#000000'
}
},
min: 0,
opposite: true
}],
tooltip:{
shared: true,
crosshairs: true
},
credits:{
text: 'Click and drag to zoom',
href: 'https://www.rcc-acis.org/'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series:[{
name: 'Growing Degree Days',
color: '#0404B4',
type: 'column',
data: gdd,
pointStart: Date.UTC(yyyy,00,01),
pointInterval: 24 * 3600 * 1000
},{
name: 'Accumulated Growing Degree Days',
color: '#F00000',
yAxis: 1,
type: 'line',
data: sum,
pointStart: Date.UTC(yyyy,00,01),
pointInterval: 24 * 3600 * 1000
}]
});
}
}
}
</script>
</head>
<body>
<div id="output" style="width:800px;height:500px"></div>
</body>
</html>