{"id":8099,"date":"2023-10-30T13:31:21","date_gmt":"2023-10-30T17:31:21","guid":{"rendered":"https:\/\/weather.umd.edu\/wordpress\/?page_id=8099"},"modified":"2024-11-26T09:42:38","modified_gmt":"2024-11-26T14:42:38","slug":"mdmesonet","status":"publish","type":"page","link":"https:\/\/weather.umd.edu\/wordpress\/mdmesonet\/","title":{"rendered":"Maryland Mesonet &#8211; Experimental Page"},"content":{"rendered":"        <script src=\"https:\/\/code.highcharts.com\/highcharts.js\"><\/script>\r\n        <script src=\"https:\/\/code.highcharts.com\/modules\/boost.js\"><\/script>\r\n        <script src=\"https:\/\/code.highcharts.com\/highcharts-more.js\"><\/script>\r\n        <script src=\"https:\/\/code.highcharts.com\/stock\/highcharts-more.js\"><\/script>\r\n        <script src=\"https:\/\/code.highcharts.com\/modules\/accessibility.js\"><\/script>\r\n\r\n        <form name='data-selector' onsubmit=\"return getTimeRange()\" style='clear:both'>\r\n            <label for=\"station\"><\/label>\r\n            <select name=\"station\" id=\"station\">\r\n                <option value=\"baltimore\">Baltimore<\/option>\r\n                <option value=\"cambridge\">Cambridge<\/option>\r\n                <option value=\"chestertown\">Chestertown<\/option>\r\n                <option value=\"clarksville\">Clarksville<\/option>\r\n                <option value=\"clearspring\">Clear Spring<\/option>\r\n                <option value=\"collegepark\">College Park<\/option>\r\n                <option value=\"easton\">Easton<\/option>\r\n                <option value=\"frostburg\">Frostburg<\/option>\r\n                <option value=\"goldsboro\">Goldsboro<\/option>\r\n                <option value=\"keedysville\">Keedysville<\/option>\r\n                <option value=\"princessanne\">Princess Anne<\/option>\r\n                <option value=\"quantico\">Quantico<\/option>\r\n                <option value=\"ridgely\">Ridgely<\/option>\r\n                <option value=\"salisbury\">Salisbury<\/option>\r\n                <option value=\"stevensville\">Stevensville<\/option>\r\n                <option value=\"towson\">Towson<\/option>\r\n                <option value=\"uppermarlboro\">Upper Marlboro<\/option>\r\n                <option value=\"waldorf\">Waldorf<\/option>\r\n                <option value=\"westminster\">Westminster<\/option>\r\n                <option value=\"wyemills\">Wye Mills<\/option>\r\n            <\/select><br>\r\n\r\n            <label for=\"starttime\">Select start time<\/label>\r\n            <input type=\"datetime-local\" id=\"starttime\" name=\"starttime\">\r\n\r\n            <label for=\"endtime\">Select end time<\/label>\r\n            <input type=\"datetime-local\" id=\"endtime\" name=\"endtime\">\r\n            <input type=\"submit\">\r\n            <input id=\"smoothing\" type=\"checkbox\" name=\"smoothing\" value=\"smoothing\">Smoothing (avg over \r\n            <input type=\"number\" id=\"smoothingLength\" name=\"smoothingLength\" min=\"1\" max=\"60\" style=\"width: 40px\">\r\n            min)<\/input>\r\n        <\/form>\r\n        <div id=\"container\" style=\"height:1600px; width:100%;\"><\/div>\r\n\r\n        <div id=\"container2\" style=\"height:400px; width:100%;\"><\/div>\r\n        \r\n        <script type=\"text\/javascript\">\r\n            var nwsIdStationMap = {\r\n                '001md': 'clarksville',\r\n                '002md': 'frostburg',\r\n                '003md': 'keedysville',\r\n                '004md': 'easton',\r\n                '005md': 'ridgely',\r\n                '006md': 'collegepark',\r\n                '007md': 'wyemills',\r\n                '008md': 'baltimore',\r\n                '009md': 'uppermarlboro',\r\n                '010md': 'waldorf',\r\n                '011md': 'princessanne',\r\n                '012md': 'quantico',\r\n                '013md': 'towson',\r\n                '014md': 'westminster',\r\n                '015md': 'clearspring',\r\n                '016md': 'chestertown',\r\n                '017md': 'cambridge',\r\n                '018md': 'salisbury',\r\n                '019md': 'goldsboro',\r\n                '020md': 'stevensville',\r\n            }\r\n            var stationIdMap = {\r\n                clarksville: 'MDMSNT-01',\r\n                frostburg: 'MDMSNT-02',\r\n                keedysville: 'MDMSNT-03',\r\n                easton: 'MDMSNT-04',\r\n                ridgely: 'MDMSNT-05',\r\n                collegepark: 'MDMSNT-06',\r\n                wyemills: 'MDMSNT-07',\r\n                baltimore: 'MDMSNT-08',\r\n                uppermarlboro: 'MDMSNT-09',\r\n                waldorf: 'MDMSNT-10',\r\n                princessanne: 'MDMSNT-11',\r\n                quantico: 'MDMSNT-12',\r\n                towson: 'MDMSNT-13',\r\n                westminster: 'MDMSNT-14',\r\n                clearspring: 'MDMSNT-15',\r\n                chestertown: 'MDMSNT-16',\r\n                cambridge: 'MDMSNT-17',\r\n                salisbury: 'MDMSNT-18',\r\n                goldsboro: 'MDMSNT-19',\r\n                stevensville: 'MDMSNT-20',\r\n            }\r\n            var stationTitleMap = {\r\n                clarksville: 'Clarksville',\r\n                baltimore: 'Baltimore',\r\n                frostburg: 'Frostburg',\r\n                keedysville: 'Keedysville',\r\n                easton: 'Easton',\r\n                ridgely: 'Ridgely',\r\n                uppermarlboro: 'Upper Marlboro',\r\n                wyemills: 'Wye Mills',\r\n                collegepark: 'College Park',\r\n                waldorf: 'Waldorf',\r\n                princessanne: 'Princess Anne',\r\n                quantico: 'Quantico',\r\n                towson: 'Towson',\r\n                westminster: 'Westminster',\r\n                clearspring: 'Clear Spring',\r\n                chestertown: 'Chestertown',\r\n                cambridge: 'Cambridge',\r\n                salisbury: 'Salisbury',\r\n                goldsboro: 'Goldsboro',\r\n                stevensville: 'Stevensville',\r\n            }\r\n            var stationCountyMap = {\r\n                clarksville: 'Howard County',\r\n                baltimore: 'Baltimore City',\r\n                frostburg: 'Allegany County',\r\n                keedysville: 'Washington County',\r\n                easton: 'Talbot County',\r\n                ridgely: 'Caroline County',\r\n                uppermarlboro: 'Prince Georges County',\r\n                wyemills: 'Queen Anne\\'s County',\r\n                collegepark: 'Prince Georges County',\r\n                waldorf: 'Charles County',\r\n                princessanne: 'Somerset County',\r\n                quantico: 'Wicomico County',\r\n                towson: 'Baltimore County',\r\n                westminster: 'Carroll County',\r\n                clearspring: 'Washington County',\r\n                chestertown: 'Kent County',\r\n                cambridge: 'Dorchester County',\r\n                salisbury: 'Wicomico County',\r\n                goldsboro: 'Caroline County',\r\n                stevensville: 'Queen Anne\\'s County',\r\n            }\r\n            const fields = ['TMSTAMP', 'Air_Temperature_Avg', 'DP_2m_Avg', 'SLP', 'Rain_ICA_Tot',\r\n                'WS_Mean', 'Wind_Speed_Max', 'WD_Mean',\r\n                'Snow_Depth_Avg',\r\n                'Solar_Radiation_Avg',\r\n                'Relative_Humidity',\r\n                'Soil_Temperature_5cm','Soil_Temperature_10cm','Soil_Temperature_20cm',\r\n                'Soil_Temperature_50cm','Soil_Temperature_100cm',\r\n                'Soil_Moisture_5cm','Soil_Moisture_10cm','Soil_Moisture_20cm',\r\n                'Soil_Moisture_50cm','Soil_Moisture_100cm',]\r\n\r\n            function formatDateUTC(date) {\r\n                const year = date.getUTCFullYear();\r\n                const month = String(date.getUTCMonth() + 1).padStart(2, '0');\r\n                const day = String(date.getUTCDate()).padStart(2, '0');\r\n                const hours = String(date.getUTCHours()).padStart(2, '0');\r\n                const minutes = String(date.getUTCMinutes()).padStart(2, '0');\r\n                const seconds = String(date.getUTCSeconds()).padStart(2, '0');\r\n                \r\n                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;\r\n            }\r\n\r\n            var paramString = window.location.href;\r\n            \/\/ console.log(paramString.substring(paramString.indexOf('?')))\r\n            var searchParams = new URLSearchParams(paramString.substring(paramString.indexOf('?')));\r\n            \/\/ console.log(searchParams.get('station'))\r\n            var station = searchParams.get('station')\r\n\r\n            var stationOptions = Object.keys(stationTitleMap)\r\n            if (station == null) station = stationOptions[Math.floor(Math.random()*stationOptions.length)]\r\n            if (!isNaN(station[0])) station = nwsIdStationMap[station]\r\n            \r\n            document.getElementById('station').value = station\r\n\r\n            var today = new Date()\r\n            var yesterday = new Date(new Date().getTime() - (24 * 60 * 60 * 1000))\r\n            var dailiesStart = new Date(new Date().getTime() - (365 * 24 * 60 * 60 * 1000))\r\n            document.addEventListener(\"DOMContentLoaded\", function(event) {\r\n                today.setMinutes(today.getMinutes() - today.getTimezoneOffset());\r\n                yesterday.setMinutes(yesterday.getMinutes() - yesterday.getTimezoneOffset());\r\n                document.getElementById('endtime').value = today.toISOString().slice(0,16);\r\n                document.getElementById('starttime').value = yesterday.toISOString().slice(0,16);\r\n            });\r\n\r\n            function getTimeRange() {\r\n                let starttime = document.forms['data-selector']['starttime'].value;\r\n                let endtime = document.forms['data-selector']['endtime'].value;\r\n                let newStation = document.forms['data-selector']['station'].value;\r\n                \/\/ console.log(starttime)\r\n                \/\/ console.log(endtime)\r\n                if (starttime == '' || endtime == '') {\r\n                    alert('Both a start time and an end time must be selected');\r\n                    return false\r\n                }\r\n                startDt = new Date(starttime)\r\n                endDt = new Date(endtime)\r\n                \/\/ console.log(startDt.getTime())\r\n                \/\/ console.log(endDt.getTime())\r\n                var diff = endDt - startDt\r\n                \/\/ console.log(diff)\r\n                if (diff < 0) {\r\n                    alert('Start time must be before end time')\r\n                    return false\r\n                }\r\n                maxDays = 99\r\n                if (diff > 1000*60*60*24*maxDays) {\r\n                    alert('Plotting more than ' + maxDays + ' days of data results in a fair amount of lag (and may not look very good on a plot). If you would like to access and plot large ranges of data yourself, see the data download form below.')\r\n                    return false\r\n                }\r\n\r\n                t1 = Date.now()\r\n                document.getElementById('container').style.opacity = 0.5;\r\n                console.log('BEFORE FETCH')\r\n\r\n                console.log(formatDateUTC(new Date(startDt.getTime())))\r\n\r\n                fetch('https:\/\/weather.umd.edu\/wordpress\/wp-content\/plugins\/meso-fsct\/functions\/get-mdmesonet-data.php', {\r\n                    method: \"POST\",\r\n                    mode: \"same-origin\",\r\n                    cache: 'no-cache',\r\n                    credentials: \"same-origin\",\r\n                    headers: {\r\n                        \"Content-Type\": \"application\/json\",\r\n                        \"Accept\": \"application\/json\"\r\n                    },\r\n                    redirect: 'follow',\r\n                    referrerPolicy: 'no-referrer',\r\n                    body: JSON.stringify({\r\n                        startms: formatDateUTC(new Date(startDt.getTime())),\r\n                        endms: formatDateUTC(new Date(endDt.getTime())),\r\n                        station_id: stationIdMap[newStation],\r\n                        cols: fields\r\n                    }),\r\n                })\r\n                .then(data => {\r\n                    return data.json();\r\n                })\r\n                .then(data => {\r\n                    data_series = []\r\n                    parseData(data)\r\n\r\n                    console.log('CLOG 3')\r\n                    chart.series[0].setData(data_series.map(i => [i[0], i[1]]), redraw=false)\r\n                    console.log('SLOG 1')\r\n                    chart.series[1].setData(data_series.map(i => [i[0], i[2]]), redraw=false)\r\n                    console.log('SLOG 2')\r\n                    chart.series[2].setData(data_series.map(i => [i[0], i[3]]), redraw=false)\r\n                    console.log('SLOG 3')\r\n                    chart.series[3].setData(data_series.map(i => [i[0], i[4]]), redraw=false)\r\n                    chart.series[4].setData(data_series.map(i => [i[0], i[5]]), redraw=false)\r\n                    console.log('SLOG 4')\r\n                    chart.series[5].setData(data_series.map(i => [i[0], i[6]]), redraw=false)\r\n                    console.log('SLOG 5')\r\n                    chart.series[6].setData(data_series.map(i => [i[0], i[7]]), redraw=false)\r\n                    console.log('SLOG 6')\r\n                    chart.series[7].setData(data_series.map(i => [i[0], i[8]]), redraw=false)\r\n                    chart.series[8].setData(data_series.map(i => [i[0], i[9]]), redraw=false)\r\n                    console.log('SLOG 7')\r\n                    chart.series[9].setData(data_series.map(i => [i[0], i[10]]), redraw=false)\r\n                    console.log('SLOG 8')\r\n                    chart.series[10].setData(data_series.map(i => [i[0], i[11]]), redraw=false)\r\n                    console.log('SLOG 9')\r\n                    chart.series[11].setData(data_series.map(i => [i[0], i[12]]), redraw=false)\r\n                    console.log('SLOG 10')\r\n                    chart.series[12].setData(data_series.map(i => [i[0], i[13]]), redraw=false)\r\n                    console.log('SLOG 11')\r\n                    chart.series[13].setData(data_series.map(i => [i[0], i[14]]), redraw=false)\r\n                    console.log('SLOG 12')\r\n                    chart.series[14].setData(data_series.map(i => [i[0], i[15]]), redraw=false)\r\n                    console.log('SLOG 13')\r\n                    chart.series[15].setData(data_series.map(i => [i[0], i[16]]), redraw=false)\r\n                    console.log('SLOG 14')\r\n                    chart.series[16].setData(data_series.map(i => [i[0], i[17]]), redraw=false)\r\n                    console.log('SLOG 15')\r\n                    chart.series[17].setData(data_series.map(i => [i[0], i[18]]), redraw=false)\r\n                    console.log('SLOG 16')\r\n                    chart.series[18].setData(data_series.map(i => [i[0], i[19]]), redraw=false)\r\n                    console.log('SLOG 17')\r\n                    chart.series[19].setData(data_series.map(i => [i[0], i[20]]), redraw=false)\r\n                    console.log('CLOG 4')\r\n                    \/\/ chart.series[6].setData(data_series.map(i => [i[0], i[7]]))\r\n                    chart.setTitle({text: stationTitleMap[newStation] + ' Station, ' + stationCountyMap[newStation]})\r\n\r\n                    chart.redraw()\r\n\r\n                    console.log(Date.now() - t1)\r\n                    document.getElementById('container').style.opacity = 1;\r\n\r\n                })\r\n                .catch (error => console.log('Error:' + error));\r\n\r\n                return false\r\n            }\r\n\r\n            Highcharts.setOptions({  \/\/ This is for all plots, change Date axis to local timezone\r\n                global : {\r\n                    useUTC : false\r\n                }\r\n            });\r\n\r\n            document.getElementById('container').style.opacity = 0.5;\r\n            console.log('BEFORE FETCH')\r\n            console.log(station)\r\n            console.log(yesterday)\r\n            console.log(today)\r\n\r\n            function parseData(x) {\r\n                \/\/ console.log(x)\r\n                x['data'].forEach((ob) => {\r\n                    data_series.push([\r\n                        new Date(ob['TMSTAMP']+'Z').getTime(),\r\n                        Math.round(10*(parseFloat(ob['Air_Temperature_Avg'])*(9\/5)+32))\/10,\r\n                        Math.round(10*(parseFloat(ob['DP_2m_Avg'])*(9\/5)+32))\/10,\r\n                        Math.round(10*2.23694*parseFloat(ob['WS_Mean']))\/10,\r\n                        Math.round(10*2.23694*parseFloat(ob['Wind_Speed_Max']))\/10,\r\n                        Math.round(parseFloat(ob['WD_Mean'])),\r\n                        parseFloat(ob['SLP']),\r\n                        parseFloat(ob['Solar_Radiation_Avg']),\r\n                        parseFloat(ob['Rain_ICA_Tot'])*0.0393701,\r\n                        parseFloat(ob['Relative_Humidity']),\r\n                        Math.round(10*(parseFloat(ob['Snow_Depth_Avg'])*39.3701))\/10,\r\n                        Math.round(10*(parseFloat(ob['Soil_Temperature_5cm'])*(9\/5)+32))\/10,\r\n                        Math.round(10*(parseFloat(ob['Soil_Temperature_10cm'])*(9\/5)+32))\/10,\r\n                        Math.round(10*(parseFloat(ob['Soil_Temperature_20cm'])*(9\/5)+32))\/10,\r\n                        Math.round(10*(parseFloat(ob['Soil_Temperature_50cm'])*(9\/5)+32))\/10,\r\n                        Math.round(10*(parseFloat(ob['Soil_Temperature_100cm'])*(9\/5)+32))\/10,\r\n                        parseFloat(ob['Soil_Moisture_5cm']),\r\n                        parseFloat(ob['Soil_Moisture_10cm']),\r\n                        parseFloat(ob['Soil_Moisture_20cm']),\r\n                        parseFloat(ob['Soil_Moisture_50cm']),\r\n                        parseFloat(ob['Soil_Moisture_100cm']),\r\n                    ]);\r\n                });\r\n                data_series.reverse()\r\n\r\n                const rain_idx = 8\r\n                for (let i = 1; i < data_series.length; i++) {\r\n                    data_series[i][rain_idx] = Math.round(100*(data_series[i][rain_idx]+data_series[i - 1][rain_idx]))\/100;\r\n                }\r\n\r\n                var smoothnessLength = document.getElementById(\"smoothingLength\").value\r\n                if (document.getElementById(\"smoothing\").checked == true && data_series.length >= smoothnessLength * 3) {\r\n                    var N = data_series.length\r\n                    var K = data_series[0].length\r\n                    var newData = []\r\n                    for (var i=0; i < N-smoothnessLength; i++) {\r\n                        newData.push([data_series[i][0]])\r\n                    }\r\n                    for (var i=1; i < K; i++) {\r\n                        for (var j=0; j < N - smoothnessLength; j++) {\r\n                            var sumAvg = 0\r\n                            for (var k=0; k < smoothnessLength; k++) {\r\n                                sumAvg += data_series[j+k][i]\r\n                            }\r\n                            newData[j].push(Math.round(10000 * sumAvg\/smoothnessLength)\/10000)\r\n                        }\r\n                    }\r\n                    data_series = newData.slice(0)\r\n                }\r\n            }\r\n\r\n            fetch('https:\/\/weather.umd.edu\/wordpress\/wp-content\/plugins\/meso-fsct\/functions\/get-mdmesonet-data.php', {\r\n                method: \"POST\",\r\n                mode: \"same-origin\",\r\n                cache: 'no-cache',\r\n                credentials: \"same-origin\",\r\n                headers: {\r\n                    \"Content-Type\": \"application\/json\",\r\n                    \"Accept\": \"application\/json\"\r\n                },\r\n                redirect: 'follow',\r\n                referrerPolicy: 'no-referrer',\r\n                body: JSON.stringify({\r\n                    startms: formatDateUTC(new Date(yesterday.getTime())),\r\n                    endms: formatDateUTC(new Date(today.getTime())),\r\n                    station_id: stationIdMap[station],\r\n                    cols: fields\r\n                }),\r\n            })\r\n            .then(data => {\r\n                return data.json();\r\n            })\r\n            .then(data => {\r\n                data_series = []\r\n                parseData(data)\r\n\r\n                chart = Highcharts.chart('container', {\r\n                    \/\/ plotOptions: {\r\n                    \/\/     line: { \/* or spline, area, series, areaspline etc.*\/\r\n                    \/\/         marker: {\r\n                    \/\/             enabled: false\r\n                    \/\/         }\r\n                    \/\/     }\r\n                    \/\/ },\r\n                    title: {\r\n                        text: stationTitleMap[station] + ' Station, ' + stationCountyMap[station]\r\n                    },\r\n                    tooltip: {\r\n                        crosshairs: true,\r\n                        shared: true,\r\n                    },\r\n                    chart: {\r\n                        zoomType: 'x'\r\n                    },\r\n                    yAxis: [{\r\n                            title: {\r\n                                text: 'Temperature (&deg;F)'\r\n                            },\r\n                            height: '12%',\r\n                        },\r\n                        {\r\n                            title: {\r\n                                text: 'Wind Speed (mph)'\r\n                            },\r\n                            top: '17.6%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                        },\r\n                        {\r\n                            title: {\r\n                                text: 'Wind Direction (deg)'\r\n                            },\r\n                            top: '17.6%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                            opposite: true,\r\n                            max: 360,\r\n                            min: 0,\r\n                            \/\/ alignTicks: false,\r\n                            endOnTick: false,\r\n                            tickInterval: 180,\r\n                        },\r\n                        {\r\n                            title: {\r\n                                text: 'Sea Level Pressure (mb)'\r\n                            },\r\n                            top: '35.2%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                        }, {\r\n                            title: {\r\n                                text: 'Solar Radiation (W\/m^2)'\r\n                            },\r\n                            top: '35.2%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                            opposite: true\r\n                        }, {\r\n                            title: {\r\n                                text: 'Cumulative Rainfall (in)'\r\n                            },\r\n                            top: '52.8%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                        }, {\r\n                            title: {\r\n                                text: 'Relative Humidity (%)'\r\n                            },\r\n                            top: '52.8%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                            opposite: true\r\n                        },\r\n                        {\r\n                            title: {\r\n                                text: 'Snow Depth (in)'\r\n                            },\r\n                            top: '70.4%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                        },\r\n                        {\r\n                            title: {\r\n                                text: 'Soil Temperature (&deg;F)'\r\n                            },\r\n                            top: '88%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                        }, {\r\n                            title: {\r\n                                text: 'Soil Moisture (m^3\/m^3)'\r\n                            },\r\n                            top: '105%',\r\n                            height: '12%',\r\n                            offset: 0,\r\n                        },\r\n                        \/\/ {\r\n                        \/\/     title: {\r\n                        \/\/         text: 'Soil Temperature (&deg;F)'\r\n                        \/\/     },\r\n                        \/\/     top: '70.4%',\r\n                        \/\/     height: '12%',\r\n                        \/\/     offset: 0,\r\n                        \/\/ }, {\r\n                        \/\/     title: {\r\n                        \/\/         text: 'Soil Moisture (m^3\/m^3)'\r\n                        \/\/     },\r\n                        \/\/     top: '88%',\r\n                        \/\/     height: '12%',\r\n                        \/\/     offset: 0,\r\n                        \/\/ },\r\n                    ],\r\n                    xAxis: [\r\n                    \/\/     {\r\n                    \/\/     top: '0%',\r\n                    \/\/     height: '0',\r\n                    \/\/     type: 'datetime',\r\n                    \/\/     lineColor: 'red',\r\n                    \/\/ },\r\n                    {\r\n                        type: 'datetime',\r\n                        height: '12%',\r\n                        \/\/ height: '0',\r\n                        \/\/ lineColor: 'green',\r\n                    }, {\r\n                        type: 'datetime',\r\n                        \/\/ top: '26%',\r\n                        height: '25.8%',\r\n                        \/\/ lineColor: 'blue',\r\n                    }, {\r\n                        type: 'datetime',\r\n                        \/\/ top: '42%',\r\n                        height: '39.6%',\r\n                        \/\/ lineColor: 'orange',\r\n                    }, {\r\n                        type: 'datetime',\r\n                        \/\/ top: '54.2%',\r\n                        height: '53.4%',\r\n                        \/\/ lineColor: 'yellow',\r\n                    }, {\r\n                        type: 'datetime',\r\n                        \/\/ top: '66.5%',\r\n                        height: '67.1%',\r\n                        \/\/ lineColor: 'purple',\r\n                    },\r\n                    {\r\n                        type: 'datetime',\r\n                        \/\/ top: '78%',\r\n                        height: '81%',\r\n                    },\r\n                    {\r\n                        type: 'datetime',\r\n                        \/\/ top: '78%',\r\n                        height: '94.8%',\r\n                    }\r\n                    ],\r\n                    series: [{\r\n                        name: 'Temp',\r\n                        data: data_series.map(i => [i[0], i[1]]),\r\n                        color: '#fc0204',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        xAxis: 0\r\n                    }, {\r\n                        name: 'Dewpoint',\r\n                        data: data_series.map(i => [i[0], i[2]]),\r\n                        color: '#589e02',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        yAxis: 0\r\n                    },\r\n                    \/\/ {\r\n                    \/\/     name: 'Relative humidity',\r\n                    \/\/     data: data_series.map(i => [i[0], i[2]]),\r\n                    \/\/     color: '#589e02',\r\n                    \/\/     tooltip: {valueSuffix: ' %'},\r\n                    \/\/     yAxis: 1\r\n                    \/\/ },\r\n                    {\r\n                        name: 'Wind speed',\r\n                        data: data_series.map(i => [i[0], i[3]]),\r\n                        color: '#2c3ede',\r\n                        opacity: 0.5,\r\n                        tooltip: {valueSuffix: ' mph'},\r\n                        yAxis: 1,\r\n                        xAxis: 1\r\n                    }, {\r\n                        name: 'Wind gust',\r\n                        data: data_series.map(i => [i[0], i[4]]),\r\n                        color: '#2c8ede',\r\n                        opacity: 0.5,\r\n                        tooltip: {valueSuffix: ' mph'},\r\n                        yAxis: 1\r\n                    }, \r\n                    {\r\n                        name: 'Wind direction',\r\n                        data: data_series.map(i => [i[0], i[5]]),\r\n                        color: '#b5b5b5',\r\n                        yAxis: 2,\r\n                        type: 'spline',\r\n                        lineWidth: 0,\r\n                        marker: {\r\n                            enabled: \"true\",\r\n                            symbol: 'circle',\r\n                            states: {\r\n                                hover: {\r\n                                    enabled: \"true\"\r\n                                }\r\n                            },\r\n                            radius: 2\r\n                        },\r\n                        states: {\r\n                            hover: {\r\n                                lineWidthPlus: 0\r\n                            }\r\n                        },\r\n                    },\r\n                    {\r\n                        name: 'Sea Level Pressure',\r\n                        data: data_series.map(i => [i[0], i[6]]),\r\n                        color: '#000000',\r\n                        tooltip: {valueSuffix: ' mb'},\r\n                        yAxis: 3,\r\n                        xAxis: 2,\r\n                    }, {\r\n                        name: 'Solar Radiation',\r\n                        data: data_series.map(i => [i[0], i[7]]),\r\n                        color: '#f06b05',\r\n                        tooltip: {valueSuffix: ' W\/m^2'},\r\n                        yAxis: 4\r\n                    }, {\r\n                        name: 'Cumulative Rainfall',\r\n                        data: data_series.map(i => [i[0], i[8]]),\r\n                        color: '#4fa1e3',\r\n                        tooltip: {valueSuffix: ' in'},\r\n                        xAxis: 3,\r\n                        yAxis: 5\r\n                    },\r\n                    {\r\n                        name: 'Relative humidity',\r\n                        data: data_series.map(i => [i[0], i[9]]),\r\n                        color: '#589e02',\r\n                        tooltip: {valueSuffix: ' %'},\r\n                        yAxis: 6\r\n                    },\r\n                    {\r\n                        name: 'Snow Depth',\r\n                        data: data_series.map(i => [i[0], i[10]]),\r\n                        color: '#8f1bf5',\r\n                        tooltip: {valueSuffix: ' in'},\r\n                        yAxis: 7,\r\n                        xAxis: 4,\r\n                    },\r\n                    {\r\n                        name: '5cm Soil Temp',\r\n                        data: data_series.map(i => [i[0], i[11]]),\r\n                        color: '#ed8d1a',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        yAxis: 8,\r\n                        xAxis: 5,\r\n                    }, {\r\n                        name: '10cm Soil Temp',\r\n                        data: data_series.map(i => [i[0], i[12]]),\r\n                        color: '#bf6d0d',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        yAxis: 8\r\n                    }, {\r\n                        name: '20cm Soil Temp',\r\n                        data: data_series.map(i => [i[0], i[13]]),\r\n                        color: '#8f530d',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        yAxis: 8\r\n                    }, {\r\n                        name: '50cm Soil Temp',\r\n                        data: data_series.map(i => [i[0], i[14]]),\r\n                        color: '#734208',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        yAxis: 8\r\n                    }, {\r\n                        name: '100cm Soil Temp',\r\n                        data: data_series.map(i => [i[0], i[15]]),\r\n                        color: '#331e05',\r\n                        tooltip: {valueSuffix: ' &deg;F'},\r\n                        yAxis: 8\r\n                    }, {\r\n                        name: '5cm Soil Moisture',\r\n                        data: data_series.map(i => [i[0], i[16]]),\r\n                        color: '#27e64d',\r\n                        tooltip: {valueSuffix: ' m^3\/m^3'},\r\n                        xAxis: 6,\r\n                        yAxis: 9\r\n                    }, {\r\n                        name: '10cm Soil Moisture',\r\n                        data: data_series.map(i => [i[0], i[17]]),\r\n                        color: '#13ab31',\r\n                        tooltip: {valueSuffix: ' m^3\/m^3'},\r\n                        yAxis: 9\r\n                    }, {\r\n                        name: '20cm Soil Moisture',\r\n                        data: data_series.map(i => [i[0], i[18]]),\r\n                        color: '#118027',\r\n                        tooltip: {valueSuffix: ' m^3\/m^3'},\r\n                        yAxis: 9\r\n                    }, {\r\n                        name: '50cm Soil Moisture',\r\n                        data: data_series.map(i => [i[0], i[19]]),\r\n                        color: '#115c20',\r\n                        tooltip: {valueSuffix: ' m^3\/m^3'},\r\n                        yAxis: 9\r\n                    }, {\r\n                        name: '100cm Soil Moisture',\r\n                        data: data_series.map(i => [i[0], i[20]]),\r\n                        color: '#0d3816',\r\n                        tooltip: {valueSuffix: ' m^3\/m^3'},\r\n                        yAxis: 9\r\n                    },\r\n                    ]\r\n                })\r\n\r\n                document.getElementById('container').style.opacity = 1;\r\n            })\r\n            .catch (error => console.log('Error:' + error));\r\n\r\n            console.log('AFTER FETCH')\r\n\r\n\r\n\r\n        <\/script>\r\n\r\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":77,"featured_media":0,"parent":0,"menu_order":-1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8099","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/pages\/8099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=8099"}],"version-history":[{"count":5,"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/pages\/8099\/revisions"}],"predecessor-version":[{"id":8178,"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/pages\/8099\/revisions\/8178"}],"wp:attachment":[{"href":"https:\/\/weather.umd.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=8099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}