<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>