{"id":20337,"date":"2026-07-27T15:50:58","date_gmt":"2026-07-27T13:50:58","guid":{"rendered":"https:\/\/thsk.dk\/?p=20337"},"modified":"2026-08-03T14:42:13","modified_gmt":"2026-08-03T12:42:13","slug":"vejrtest","status":"publish","type":"post","link":"https:\/\/thsk.dk\/?p=20337","title":{"rendered":"vejrtest"},"content":{"rendered":"<style>\r\n\/* --- WIND INFO TILES --- *\/\r\n \r\n#windInfoTiles {\r\n    display:flex;\r\n    gap:12px;\r\n    margin-bottom:14px;\r\n    flex-wrap:wrap;\r\n \r\n}\r\n \r\n\/* Core tile styling *\/\r\n \r\n.windTile {\r\n    flex: 1;\r\n    background: #e8f4ff;\r\n    border-left: 6px solid #1a73e8;\r\n    padding: 12px 16px;\r\n    border-radius: 4px;\r\n    font-family: Arial, sans-serif;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n \r\n\/* Typography *\/\r\n.windTileTitle       { font-size:12px; font-weight:bold; margin-bottom:0px; }\r\n.windTileValue       { font-size:15px; font-weight:bold; margin-bottom:0px; }\r\n.windTileValueActual { font-size:14px; opacity:0.8; }\r\n.windTileTime        { font-size:14px; opacity:0.8; }\r\n.windTileDir         { font-size:14px; opacity:0.8; margin-top:0px; }\r\n \r\n\/* Icons *\/\r\n.windTileArrow {\r\n    width:30px;\r\n    height:30px;\r\n    margin-top:6px;\r\n}\r\n \r\n\/* Remove theme shadows from SVGs *\/\r\n#windInfoTiles svg,\r\n#windInfoTiles svg * {\r\n    filter:none !important;\r\n    box-shadow:none !important;\r\n    stroke:#333 !important;\r\n    fill:#333 !important;\r\n}\r\n \r\n\/* --- RESPONSIVE BEHAVIOR --- *\/\r\n@media (max-width: 600px) {\r\n    .windTile {\r\n        flex:1 1 calc(50% - 12px);\r\n        min-width:calc(50% - 12px);\r\n    }\r\n}\r\n \r\n@media (max-width: 400px) {\r\n    .windTile {\r\n        flex:1 1 100%;\r\n        min-width:100%;\r\n    }\r\n}\r\n \r\n\/* Chart overlay elements *\/\r\n.wind-arrow {\r\n    position:absolute;\r\n    width:40px;\r\n    height:40px;\r\n    pointer-events:none;\r\n}\r\n \r\n.current-time-line {\r\n    position:absolute;\r\n    width:2px;\r\n    background:red;\r\n    pointer-events:none;\r\n}\r\n<\/style>\r\n \r\n<!-- INFO TILES -->\r\n<div id=\"windInfoTiles\">\r\n    <div id=\"windNowBox\" class=\"windTile\">\r\n        <div class=\"windTileTitle\">Aktuel prognose<\/div>\r\n        <div class=\"windTileValue\">\r\n            <span id=\"windNowValue\"><\/span>\r\n            <span id=\"windNowDirText\" class=\"windTileDir\"><\/span>\r\n        <\/div>\r\n        <div id=\"windNowValueActual\" class=\"windTileValueActual\"> <\/div>\r\n        <div id=\"windNowTime\" class=\"windTileTime\"><\/div>\r\n        <div id=\"windNowArrow\" class=\"windTileArrow\"><\/div>\r\n    <\/div>\r\n    <div id=\"windTrendBox\" class=\"windTile\">\r\n        <div class=\"windTileTitle\">N\u00e6ste prognose<\/div>\r\n        <div class=\"windTileValue\">\r\n            <span id=\"windTrendValue\"><\/span>\r\n            <span id=\"windTrendArrow\" class=\"windTileTrendArrow\"><\/span>\r\n            <span id=\"windTrendDirText\" class=\"windTileDir\"><\/span>\r\n        <\/div>\r\n        <div id=\"windTrendTime\" class=\"windTileTime\"><\/div>\r\n        <div id=\"windTrendArrowDir\" class=\"windTileArrow\"><\/div>\r\n    <\/div>\r\n     <div id=\"windMinBox\" class=\"windTile\">\r\n        <div class=\"windTileTitle\">Min vind<\/div>\r\n        <div class=\"windTileValue\">\r\n             <span id=\"windMinValue\"><\/span>\r\n             <span id=\"windMinDirText\" class=\"windTileDir\"><\/span>\r\n        <\/div>\r\n        <div id=\"windMinTime\" class=\"windTileTime\"><\/div>\r\n        <div id=\"windMinArrow\" class=\"windTileArrow\"><\/div>\r\n \r\n    <\/div>\r\n \r\n    <div id=\"windMaxBox\" class=\"windTile\">\r\n        <div class=\"windTileTitle\">Max vind<\/div>\r\n        <div class=\"windTileValue\">\r\n             <span id=\"windMaxValue\"><\/span>\r\n             <span id=\"windMaxDirText\" class=\"windTileDir\"><\/span>\r\n        <\/div>\r\n        <div id=\"windMaxTime\" class=\"windTileTime\"><\/div>\r\n        <div id=\"windMaxArrow\" class=\"windTileArrow\"><\/div>\r\n \r\n    <\/div>\r\n \r\n \r\n<\/div>\r\n \r\n<!-- GRAPH -->\r\n<div id=\"fcoo-wind-wrapper\" style=\"width:100%; height:320px; position:relative;\">\r\n    <div id=\"curve_chart_fcoo_wind\" style=\"width:100%; height:100%;\"><\/div>\r\n<\/div>\r\n \r\n \r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n \r\n    const chartRows = [[new Date(2026, 7, 3, 23, 00),4.42999999999999971578290569595992565155029296875],[new Date(2026, 7, 4, 0, 00),4.32000000000000028421709430404007434844970703125],[new Date(2026, 7, 4, 1, 00),3.2599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 2, 00),3.7599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 3, 00),4.80999999999999960920149533194489777088165283203125],[new Date(2026, 7, 4, 4, 00),3.7599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 5, 00),3.7599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 6, 00),4.7599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 7, 00),4.2599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 8, 00),4.80999999999999960920149533194489777088165283203125],[new Date(2026, 7, 4, 9, 00),4.2599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 10, 00),3.95000000000000017763568394002504646778106689453125],[new Date(2026, 7, 4, 11, 00),7.0800000000000000710542735760100185871124267578125],[new Date(2026, 7, 4, 12, 00),3.689999999999999946709294817992486059665679931640625],[new Date(2026, 7, 4, 13, 00),3.339999999999999857891452847979962825775146484375],[new Date(2026, 7, 4, 14, 00),4.6500000000000003552713678800500929355621337890625],[new Date(2026, 7, 4, 15, 00),3.890000000000000124344978758017532527446746826171875],[new Date(2026, 7, 4, 16, 00),4.2599999999999997868371792719699442386627197265625],[new Date(2026, 7, 4, 17, 00),5.3499999999999996447286321199499070644378662109375],[new Date(2026, 7, 4, 18, 00),5.3499999999999996447286321199499070644378662109375],[new Date(2026, 7, 4, 19, 00),4.95999999999999996447286321199499070644378662109375],[new Date(2026, 7, 4, 20, 00),4.6500000000000003552713678800500929355621337890625],[new Date(2026, 7, 4, 21, 00),4.80999999999999960920149533194489777088165283203125],[new Date(2026, 7, 4, 22, 00),4.37000000000000010658141036401502788066864013671875],[new Date(2026, 7, 4, 23, 00),4.37000000000000010658141036401502788066864013671875],[new Date(2026, 7, 5, 0, 00),3.95000000000000017763568394002504646778106689453125],[new Date(2026, 7, 5, 1, 00),3.689999999999999946709294817992486059665679931640625],[new Date(2026, 7, 5, 2, 00),3.180000000000000159872115546022541821002960205078125],[new Date(2026, 7, 5, 3, 00),3.890000000000000124344978758017532527446746826171875],[new Date(2026, 7, 5, 4, 00),2.37000000000000010658141036401502788066864013671875],[new Date(2026, 7, 5, 5, 00),0.79000000000000003552713678800500929355621337890625],[new Date(2026, 7, 5, 6, 00),0.79000000000000003552713678800500929355621337890625],[new Date(2026, 7, 5, 7, 00),2.7599999999999997868371792719699442386627197265625],[new Date(2026, 7, 5, 8, 00),0.79000000000000003552713678800500929355621337890625],[new Date(2026, 7, 5, 9, 00),1.270000000000000017763568394002504646778106689453125],[new Date(2026, 7, 5, 10, 00),3.339999999999999857891452847979962825775146484375],[new Date(2026, 7, 5, 11, 00),3.689999999999999946709294817992486059665679931640625],[new Date(2026, 7, 5, 12, 00),3.54999999999999982236431605997495353221893310546875],[new Date(2026, 7, 5, 13, 00),5.70999999999999996447286321199499070644378662109375],[new Date(2026, 7, 5, 14, 00),7.71999999999999975131004248396493494510650634765625],[new Date(2026, 7, 5, 15, 00),7.71999999999999975131004248396493494510650634765625],[new Date(2026, 7, 5, 16, 00),6.29000000000000003552713678800500929355621337890625],[new Date(2026, 7, 5, 17, 00),5.4000000000000003552713678800500929355621337890625],[new Date(2026, 7, 5, 18, 00),6.1699999999999999289457264239899814128875732421875],[new Date(2026, 7, 5, 19, 00),6.1699999999999999289457264239899814128875732421875],[new Date(2026, 7, 5, 20, 00),5.92999999999999971578290569595992565155029296875],[new Date(2026, 7, 5, 21, 00),5.05999999999999960920149533194489777088165283203125],[new Date(2026, 7, 5, 22, 00),3.479999999999999982236431605997495353221893310546875],[new Date(2026, 7, 5, 23, 00),3.020000000000000017763568394002504646778106689453125],[new Date(2026, 7, 6, 0, 00),3.819999999999999840127884453977458178997039794921875],[new Date(2026, 7, 6, 1, 00),3.339999999999999857891452847979962825775146484375],[new Date(2026, 7, 6, 2, 00),2.149999999999999911182158029987476766109466552734375],[new Date(2026, 7, 6, 3, 00),2.149999999999999911182158029987476766109466552734375],[new Date(2026, 7, 6, 4, 00),3.180000000000000159872115546022541821002960205078125],[new Date(2026, 7, 6, 5, 00),3.890000000000000124344978758017532527446746826171875],[new Date(2026, 7, 6, 6, 00),3.890000000000000124344978758017532527446746826171875],[new Date(2026, 7, 6, 7, 00),4.95999999999999996447286321199499070644378662109375],[new Date(2026, 7, 6, 8, 00),5.70999999999999996447286321199499070644378662109375],[new Date(2026, 7, 6, 9, 00),5.4900000000000002131628207280300557613372802734375],[new Date(2026, 7, 6, 10, 00),5.92999999999999971578290569595992565155029296875],[new Date(2026, 7, 6, 11, 00),6.86000000000000031974423109204508364200592041015625]];\r\n    const dirRows   = [[new Date(2026, 7, 3, 23, 00),4.42999999999999971578290569595992565155029296875,286],[new Date(2026, 7, 4, 0, 00),4.32000000000000028421709430404007434844970703125,280],[new Date(2026, 7, 4, 1, 00),3.2599999999999997868371792719699442386627197265625,274],[new Date(2026, 7, 4, 2, 00),3.7599999999999997868371792719699442386627197265625,266],[new Date(2026, 7, 4, 3, 00),4.80999999999999960920149533194489777088165283203125,279],[new Date(2026, 7, 4, 4, 00),3.7599999999999997868371792719699442386627197265625,266],[new Date(2026, 7, 4, 5, 00),3.7599999999999997868371792719699442386627197265625,266],[new Date(2026, 7, 4, 6, 00),4.7599999999999997868371792719699442386627197265625,273],[new Date(2026, 7, 4, 7, 00),4.2599999999999997868371792719699442386627197265625,267],[new Date(2026, 7, 4, 8, 00),4.80999999999999960920149533194489777088165283203125,279],[new Date(2026, 7, 4, 9, 00),4.2599999999999997868371792719699442386627197265625,273],[new Date(2026, 7, 4, 10, 00),3.95000000000000017763568394002504646778106689453125,305],[new Date(2026, 7, 4, 11, 00),7.0800000000000000710542735760100185871124267578125,318],[new Date(2026, 7, 4, 12, 00),3.689999999999999946709294817992486059665679931640625,332],[new Date(2026, 7, 4, 13, 00),3.339999999999999857891452847979962825775146484375,283],[new Date(2026, 7, 4, 14, 00),4.6500000000000003552713678800500929355621337890625,306],[new Date(2026, 7, 4, 15, 00),3.890000000000000124344978758017532527446746826171875,315],[new Date(2026, 7, 4, 16, 00),4.2599999999999997868371792719699442386627197265625,310],[new Date(2026, 7, 4, 17, 00),5.3499999999999996447286321199499070644378662109375,323],[new Date(2026, 7, 4, 18, 00),5.3499999999999996447286321199499070644378662109375,323],[new Date(2026, 7, 4, 19, 00),4.95999999999999996447286321199499070644378662109375,319],[new Date(2026, 7, 4, 20, 00),4.6500000000000003552713678800500929355621337890625,306],[new Date(2026, 7, 4, 21, 00),4.80999999999999960920149533194489777088165283203125,298],[new Date(2026, 7, 4, 22, 00),4.37000000000000010658141036401502788066864013671875,301],[new Date(2026, 7, 4, 23, 00),4.37000000000000010658141036401502788066864013671875,301],[new Date(2026, 7, 5, 0, 00),3.95000000000000017763568394002504646778106689453125,305],[new Date(2026, 7, 5, 1, 00),3.689999999999999946709294817992486059665679931640625,298],[new Date(2026, 7, 5, 2, 00),3.180000000000000159872115546022541821002960205078125,315],[new Date(2026, 7, 5, 3, 00),3.890000000000000124344978758017532527446746826171875,315],[new Date(2026, 7, 5, 4, 00),2.37000000000000010658141036401502788066864013671875,342],[new Date(2026, 7, 5, 5, 00),0.79000000000000003552713678800500929355621337890625,18],[new Date(2026, 7, 5, 6, 00),0.79000000000000003552713678800500929355621337890625,252],[new Date(2026, 7, 5, 7, 00),2.7599999999999997868371792719699442386627197265625,275],[new Date(2026, 7, 5, 8, 00),0.79000000000000003552713678800500929355621337890625,342],[new Date(2026, 7, 5, 9, 00),1.270000000000000017763568394002504646778106689453125,349],[new Date(2026, 7, 5, 10, 00),3.339999999999999857891452847979962825775146484375,13],[new Date(2026, 7, 5, 11, 00),3.689999999999999946709294817992486059665679931640625,28],[new Date(2026, 7, 5, 12, 00),3.54999999999999982236431605997495353221893310546875,39],[new Date(2026, 7, 5, 13, 00),5.70999999999999996447286321199499070644378662109375,67],[new Date(2026, 7, 5, 14, 00),7.71999999999999975131004248396493494510650634765625,61],[new Date(2026, 7, 5, 15, 00),7.71999999999999975131004248396493494510650634765625,61],[new Date(2026, 7, 5, 16, 00),6.29000000000000003552713678800500929355621337890625,83],[new Date(2026, 7, 5, 17, 00),5.4000000000000003552713678800500929355621337890625,77],[new Date(2026, 7, 5, 18, 00),6.1699999999999999289457264239899814128875732421875,69],[new Date(2026, 7, 5, 19, 00),6.1699999999999999289457264239899814128875732421875,69],[new Date(2026, 7, 5, 20, 00),5.92999999999999971578290569595992565155029296875,62],[new Date(2026, 7, 5, 21, 00),5.05999999999999960920149533194489777088165283203125,57],[new Date(2026, 7, 5, 22, 00),3.479999999999999982236431605997495353221893310546875,69],[new Date(2026, 7, 5, 23, 00),3.020000000000000017763568394002504646778106689453125,66],[new Date(2026, 7, 6, 0, 00),3.819999999999999840127884453977458178997039794921875,79],[new Date(2026, 7, 6, 1, 00),3.339999999999999857891452847979962825775146484375,77],[new Date(2026, 7, 6, 2, 00),2.149999999999999911182158029987476766109466552734375,36],[new Date(2026, 7, 6, 3, 00),2.149999999999999911182158029987476766109466552734375,36],[new Date(2026, 7, 6, 4, 00),3.180000000000000159872115546022541821002960205078125,45],[new Date(2026, 7, 6, 5, 00),3.890000000000000124344978758017532527446746826171875,45],[new Date(2026, 7, 6, 6, 00),3.890000000000000124344978758017532527446746826171875,45],[new Date(2026, 7, 6, 7, 00),4.95999999999999996447286321199499070644378662109375,41],[new Date(2026, 7, 6, 8, 00),5.70999999999999996447286321199499070644378662109375,67],[new Date(2026, 7, 6, 9, 00),5.4900000000000002131628207280300557613372802734375,60],[new Date(2026, 7, 6, 10, 00),5.92999999999999971578290569595992565155029296875,62],[new Date(2026, 7, 6, 11, 00),6.86000000000000031974423109204508364200592041015625,57]];\r\n    const defaultHours = 48;\r\n \r\n    function degToCompassText(dir) {\r\n        const source = (dir+180) % 360;\r\n        if (source >= 338 || source < 23) return \"N\";\r\n        if (source < 68)  return \"N\u00d8\";\r\n        if (source < 113) return \"\u00d8\";\r\n        if (source < 158) return \"S\u00d8\";\r\n        if (source < 203) return \"S\";\r\n        if (source < 248) return \"SV\";\r\n        if (source < 293) return \"V\";\r\n        return \"NV\";\r\n    }\r\n \r\n    function insertWindArrow(id, rotation) {\r\n        document.getElementById(id).innerHTML = `\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 100 100\"\r\n                 style=\"transform: rotate(${rotation}deg); transition:0.2s;\">\r\n                <line x1=\"50\" y1=\"95\" x2=\"50\" y2=\"28\"\r\n                      stroke=\"#333\" stroke-width=\"7\" stroke-linecap=\"round\"\/>\r\n                <polygon points=\"50,8 62,28 50,22 38,28\" fill=\"#333\"\/>\r\n            <\/svg>\r\n        `;\r\n    }\r\n \r\n    google.charts.load('current', {packages:['corechart']});\r\n    google.charts.setOnLoadCallback(() => drawChart(defaultHours));\r\n \r\n    const slider = document.getElementById(\"windSlider\");\r\n    const sliderValue = document.getElementById(\"windSliderValue\");\r\n    let sliderInitialized = false;\r\n \r\n    slider.addEventListener(\"input\", () => {\r\n        if (!sliderInitialized) return;\r\n        sliderValue.textContent = slider.value;\r\n        drawChart(parseInt(slider.value));\r\n    });\r\n \r\n    setTimeout(() => sliderInitialized = true, 50);\r\n \r\n    function fmt(dt) {\r\n        return dt.toLocaleString(\"da-DK\", {\r\n            weekday:\"short\",\r\n            hour:\"2-digit\",\r\n            minute:\"2-digit\"\r\n        });\r\n    }\r\n \r\n    function drawChart(hours) {\r\n \r\n        const rows = chartRows.slice(0, hours);\r\n        const dirs = dirRows.slice(0, hours);\r\n \r\n        const speeds = rows.map(r => r[1]);\r\n        const maxVal = Math.max(...speeds);\r\n        const minVal = Math.min(...speeds);\r\n \r\n        const maxIndex = speeds.indexOf(maxVal);\r\n        const minIndex = speeds.indexOf(minVal);\r\n \r\n        const maxTime = rows[maxIndex][0];\r\n        const minTime = rows[minIndex][0];\r\n \r\n        \/\/ MAX TILE\r\n        document.getElementById(\"windMaxValue\").textContent = maxVal.toFixed(1)+\" m\/s\";\r\n        document.getElementById(\"windMaxTime\").textContent = fmt(maxTime);\r\n        const maxDir = dirs[maxIndex][2];\r\n        insertWindArrow(\"windMaxArrow\", (maxDir + 360) % 360);\r\n        document.getElementById(\"windMaxDirText\").textContent = degToCompassText(maxDir);\r\n \r\n        \/\/ MIN TILE\r\n        document.getElementById(\"windMinValue\").textContent = minVal.toFixed(1)+\" m\/s\";\r\n        document.getElementById(\"windMinTime\").textContent = fmt(minTime);\r\n        const minDir = dirs[minIndex][2];\r\n        insertWindArrow(\"windMinArrow\", (minDir + 360) % 360);\r\n        document.getElementById(\"windMinDirText\").textContent = degToCompassText(minDir);\r\n \r\n        \/\/ CURRENT FORECAST\r\n        const now = new Date();\r\n        let nowIndex = rows.length - 1;\r\n        for (let i=0; i<rows.length; i++) {\r\n            if (rows[i][0] >= now) { nowIndex = i; break; }\r\n        }\r\n \r\n        const nowVal = rows[nowIndex][1];\r\n        const nowTime = rows[nowIndex][0];\r\n        const nowDir = dirs[nowIndex][2];\r\n \r\n        document.getElementById(\"windNowValue\").textContent = nowVal.toFixed(1)+\" m\/s\";\r\n        document.getElementById(\"windNowTime\").textContent = fmt(nowTime);\r\n        insertWindArrow(\"windNowArrow\", (nowDir + 360) % 360);\r\n        document.getElementById(\"windNowDirText\").textContent = degToCompassText(nowDir);\r\n \r\n        \/\/ NEXT FORECAST\r\n        const nextIndex = nowIndex + 1 < rows.length ? nowIndex + 1 : nowIndex;\r\n        const nextVal = rows[nextIndex][1];\r\n        const nextTime = rows[nextIndex][0];\r\n        const nextDir = dirs[nextIndex][2];\r\n \r\n        const increasing = nextVal > nowVal;\r\n        const trendArrow = increasing ? \"\u25b2\" : \"\u25bc\";\r\n        const trendColor = increasing ? \"#d11a1a\" : \"#1a8f1a\";\r\n \r\n        document.getElementById(\"windTrendValue\").textContent = nextVal.toFixed(1)+\" m\/s\";\r\n        document.getElementById(\"windTrendArrow\").textContent = trendArrow;\r\n        document.getElementById(\"windTrendArrow\").style.color = trendColor;\r\n        document.getElementById(\"windTrendValue\").style.color = trendColor;\r\n        document.getElementById(\"windTrendTime\").textContent = fmt(nextTime);\r\n \r\n        insertWindArrow(\"windTrendArrowDir\", (nextDir + 360) % 360);\r\n        document.getElementById(\"windTrendDirText\").textContent = degToCompassText(nextDir);\r\n \r\n        \/\/ DRAW CHART\r\n        const wrapper = document.getElementById(\"fcoo-wind-wrapper\");\r\n        wrapper.querySelectorAll(\".wind-arrow\").forEach(el => el.remove());\r\n        wrapper.querySelectorAll(\".current-time-line\").forEach(el => el.remove());\r\n \r\n        const data = new google.visualization.DataTable();\r\n        data.addColumn('datetime', 'Tid');\r\n        data.addColumn('number', 'Vind (m\/s)');\r\n        data.addColumn({type:'string', role:'tooltip', p:{html:true}});\r\n \r\n        rows.forEach((r,i) => {\r\n            const date = r[0];\r\n            const speed = r[1];\r\n            const dir = dirs[i][2];\r\n            const dirText = degToCompassText(dir);\r\n \r\n            const tooltip = `\r\n                <div style=\"padding:6px;\">\r\n                    <strong>${speed.toFixed(1)} m\/s<\/strong><br>\r\n                    ${dir.toFixed(0)}\u00b0 \u2013 ${dirText}\r\n                <\/div>\r\n            `;\r\n \r\n            data.addRow([date, speed, tooltip]);\r\n        });\r\n \r\n        const options = {\r\n            title: \"FCOO vindprognose (\"+hours+\" timer)\",\r\n            legend: {position:\"bottom\"},\r\n            animation: {startup:true, duration:20, easing:\"linear\"},\r\n            crosshair: {trigger:\"both\"},\r\n            series: {0:{type:\"line\", color:\"#1a73e8\", lineWidth:3}},\r\n            vAxes: {0:{title:\"Vindhastighed (m\/s)\"}},\r\n            hAxis: {\r\n                format: \"HH:mm\",     \/\/ \u2190 24\u2011timers format\r\n                gridlines: { count: -1 }\r\n            },\r\n            pointSize:5,\r\n            curveType:\"function\",\r\n            tooltip:{isHtml:true},\r\n            chartArea:{left:60, right:30, top:50, bottom:60}\r\n        };\r\n \r\n \r\n        const chart = new google.visualization.LineChart(\r\n            document.getElementById(\"curve_chart_fcoo_wind\")\r\n        );\r\n \r\n        google.visualization.events.addListener(chart, 'ready', () => {\r\n            requestAnimationFrame(() => {\r\n                requestAnimationFrame(() => {\r\n                    drawArrows(chart, dirs);\r\n                    drawNowLine(chart);\r\n                });\r\n            });\r\n        });\r\n \r\n        chart.draw(data, options);\r\n    }\r\n \r\n    function drawArrows(chart, dirs) {\r\n \r\n        const wrapper = document.getElementById(\"fcoo-wind-wrapper\");\r\n        const layout = chart.getChartLayoutInterface();\r\n \r\n        dirs.forEach(row => {\r\n \r\n            const date = row[0];\r\n            const speed = row[1];\r\n            const dir = row[2];\r\n \r\n            if (date.getHours() % 3 !== 0) return;\r\n \r\n            const x = layout.getXLocation(date);\r\n            const y = layout.getYLocation(speed);\r\n \r\n            if (isNaN(x) || isNaN(y)) return;\r\n \r\n            const arrow = document.createElement(\"div\");\r\n            arrow.className = \"wind-arrow\";\r\n \r\n            const rotation = (dir + 360) % 360;\r\n \r\n            arrow.style.left = (x - 20)+\"px\";\r\n            arrow.style.top  = (y - 20)+\"px\";\r\n            arrow.style.transform = \"rotate(\"+rotation+\"deg)\";\r\n \r\n            arrow.innerHTML = `\r\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 100 100\">\r\n                    <line x1=\"50\" y1=\"95\" x2=\"50\" y2=\"28\"\r\n                          stroke=\"#333\" stroke-width=\"7\" stroke-linecap=\"round\"\/>\r\n                    <polygon points=\"50,8 62,28 50,22 38,28\" fill=\"#333\"\/>\r\n                <\/svg>\r\n            `;\r\n \r\n            wrapper.appendChild(arrow);\r\n        });\r\n    }\r\n \r\n    function drawNowLine(chart) {\r\n \r\n        const wrapper = document.getElementById(\"fcoo-wind-wrapper\");\r\n        const layout = chart.getChartLayoutInterface();\r\n \r\n        wrapper.querySelectorAll(\".current-time-line\").forEach(el => el.remove());\r\n \r\n        const now = new Date();\r\n        const x = layout.getXLocation(now);\r\n \r\n        if (isNaN(x)) return;\r\n \r\n        const box = layout.getChartAreaBoundingBox();\r\n \r\n        const line = document.createElement(\"div\");\r\n        line.className = \"current-time-line\";\r\n        line.style.left = x+\"px\";\r\n        line.style.top = box.top+\"px\";\r\n        line.style.height = box.height+\"px\";\r\n \r\n        wrapper.appendChild(line);\r\n    }\r\n \r\n});\r\n<\/script>\r\n \r\n\n<style>\r\n.current-time-line {\r\n    position: absolute;\r\n    border-left: 2px dotted red;\r\n    pointer-events: none;\r\n}\r\n<\/style>\r\n \r\n<!-- TOTAL PRECIP BOX -->\r\n<div id=\"precipTotalBox\"\r\n     style=\"margin-bottom: 0px; padding: 2px; background: #eef6ff; border-left: 4px solid #1a73e8; border-radius: 4px; font-size: 14px; font-weight: bold;\">\r\n    Total nedb\u00f8r: 4.7 mm\r\n<\/div>\r\n \r\n<div id=\"fcoo-precip-wrapper\" style=\"width:100%; max-width:100%; height:320px; position:relative;\">\r\n    <div id=\"curve_chart_fcoo_precip\" style=\"width:100%; height:100%; position:relative;\"><\/div>\r\n<\/div>\r\n \r\n\r\n \r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n \r\n    const chartRows = [[new Date(2026, 7, 3, 23, 00),0],[new Date(2026, 7, 4, 0, 00),0],[new Date(2026, 7, 4, 1, 00),0],[new Date(2026, 7, 4, 2, 00),0],[new Date(2026, 7, 4, 3, 00),0],[new Date(2026, 7, 4, 4, 00),0],[new Date(2026, 7, 4, 5, 00),0],[new Date(2026, 7, 4, 6, 00),0],[new Date(2026, 7, 4, 7, 00),0],[new Date(2026, 7, 4, 8, 00),0],[new Date(2026, 7, 4, 9, 00),0],[new Date(2026, 7, 4, 10, 00),0],[new Date(2026, 7, 4, 11, 00),0],[new Date(2026, 7, 4, 12, 00),1.771500000000000074606987254810519516468048095703125],[new Date(2026, 7, 4, 13, 00),1.771500000000000074606987254810519516468048095703125],[new Date(2026, 7, 4, 14, 00),0],[new Date(2026, 7, 4, 15, 00),0],[new Date(2026, 7, 4, 16, 00),0],[new Date(2026, 7, 4, 17, 00),0],[new Date(2026, 7, 4, 18, 00),0],[new Date(2026, 7, 4, 19, 00),0],[new Date(2026, 7, 4, 20, 00),0],[new Date(2026, 7, 4, 21, 00),0],[new Date(2026, 7, 4, 22, 00),0],[new Date(2026, 7, 4, 23, 00),0],[new Date(2026, 7, 5, 0, 00),0],[new Date(2026, 7, 5, 1, 00),0],[new Date(2026, 7, 5, 2, 00),0],[new Date(2026, 7, 5, 3, 00),0],[new Date(2026, 7, 5, 4, 00),0],[new Date(2026, 7, 5, 5, 00),0.1968999999999999916955317758038290776312351226806640625],[new Date(2026, 7, 5, 6, 00),0.295169999999999987938537060472299344837665557861328125],[new Date(2026, 7, 5, 7, 00),0.393799999999999983391063551607658155262470245361328125],[new Date(2026, 7, 5, 8, 00),0.295169999999999987938537060472299344837665557861328125],[new Date(2026, 7, 5, 9, 00),0],[new Date(2026, 7, 5, 10, 00),0],[new Date(2026, 7, 5, 11, 00),0],[new Date(2026, 7, 5, 12, 00),0],[new Date(2026, 7, 5, 13, 00),0],[new Date(2026, 7, 5, 14, 00),0],[new Date(2026, 7, 5, 15, 00),0],[new Date(2026, 7, 5, 16, 00),0],[new Date(2026, 7, 5, 17, 00),0],[new Date(2026, 7, 5, 18, 00),0],[new Date(2026, 7, 5, 19, 00),0],[new Date(2026, 7, 5, 20, 00),0],[new Date(2026, 7, 5, 21, 00),0],[new Date(2026, 7, 5, 22, 00),0],[new Date(2026, 7, 5, 23, 00),0],[new Date(2026, 7, 6, 0, 00),0],[new Date(2026, 7, 6, 1, 00),0],[new Date(2026, 7, 6, 2, 00),0],[new Date(2026, 7, 6, 3, 00),0],[new Date(2026, 7, 6, 4, 00),0],[new Date(2026, 7, 6, 5, 00),0],[new Date(2026, 7, 6, 6, 00),0],[new Date(2026, 7, 6, 7, 00),0],[new Date(2026, 7, 6, 8, 00),0],[new Date(2026, 7, 6, 9, 00),0],[new Date(2026, 7, 6, 10, 00),0],[new Date(2026, 7, 6, 11, 00),0]];\r\n    const defaultHours = 48;\r\n \r\n    google.charts.load('current', {packages:['corechart']});\r\n    google.charts.setOnLoadCallback(() => drawChart(defaultHours));\r\n \r\n    const slider = document.getElementById(\"precipSlider\");\r\n    const sliderValue = document.getElementById(\"precipSliderValue\");\r\n    const totalBox = document.getElementById(\"precipTotalBox\");\r\n    let sliderInitialized = false;\r\n \r\n    slider.addEventListener(\"input\", () => {\r\n        if (!sliderInitialized) return;\r\n        const h = parseInt(slider.value);\r\n        sliderValue.textContent = h;\r\n        drawChart(h);\r\n    });\r\n \r\n    setTimeout(() => sliderInitialized = true, 50);\r\n \r\n    function drawChart(hours) {\r\n \r\n        const rows = chartRows.slice(0, hours);\r\n \r\n        \/\/ Calculate dynamic total precipitation\r\n        let total = 0;\r\n        rows.forEach(r => total += r[1]);\r\n        total = Math.round(total * 10) \/ 10;\r\n \r\n        \/\/ Update total box\r\n        totalBox.textContent = \"Total nedb\u00f8r de n\u00e6ste 48 timer:  \" + total + \" mm\";\r\n \r\n        const data = new google.visualization.DataTable();\r\n        data.addColumn('datetime', 'Tid');\r\n        data.addColumn('number', 'Nedb\u00f8r (mm\/t)');\r\n \r\n        rows.forEach(r => {\r\n            data.addRow([r[0], r[1]]);\r\n        });\r\n \r\n        const options = {\r\n            title: \"FCOO nedb\u00f8r (\" + hours + \" timer)\",\r\n            legend: { position: \"bottom\" },\r\n            animation: { startup: true, duration: 20, easing: \"linear\" },\r\n            crosshair: { trigger: \"both\" },\r\n            vAxes: {\r\n                0: { title: \"Nedb\u00f8r (mm\/t)\" }\r\n            },\r\n            hAxis: {\r\n                format: \"HH:mm\",\r\n                gridlines: { count: -1 }\r\n            },\r\n \r\n            chartArea: { left: 60, right: 30, top: 50, bottom: 60 },\r\n            bar: { groupWidth: \"85%\" },\r\n            colors: [\"#1a73e8\"]\r\n        };\r\n \r\n        const chart = new google.visualization.ColumnChart(\r\n            document.getElementById(\"curve_chart_fcoo_precip\")\r\n        );\r\n \r\n        google.visualization.events.addListener(chart, 'ready', () => {\r\n            requestAnimationFrame(() => {\r\n                requestAnimationFrame(() => {\r\n                    drawNowLine(chart);\r\n                });\r\n            });\r\n        });\r\n \r\n        chart.draw(data, options);\r\n    }\r\n \r\n    function drawNowLine(chart) {\r\n \r\n        const wrapper = document.getElementById(\"fcoo-precip-wrapper\");\r\n        const layout = chart.getChartLayoutInterface();\r\n \r\n        wrapper.querySelectorAll(\".current-time-line\").forEach(el => el.remove());\r\n \r\n        const now = new Date();\r\n        const x = layout.getXLocation(now);\r\n \r\n        if (isNaN(x)) return;\r\n \r\n        const box = layout.getChartAreaBoundingBox();\r\n \r\n        const line = document.createElement(\"div\");\r\n        line.className = \"current-time-line\";\r\n        line.style.left = x + \"px\";\r\n        line.style.top = box.top + \"px\";\r\n        line.style.height = box.height + \"px\";\r\n \r\n        wrapper.appendChild(line);\r\n    }\r\n \r\n});\r\n<\/script>\r\n \r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[22],"tags":[35],"class_list":["post-20337","post","type-post","status-publish","format-standard","hentry","category-kommunikation","tag-ingen-mail"],"_links":{"self":[{"href":"https:\/\/thsk.dk\/index.php?rest_route=\/wp\/v2\/posts\/20337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thsk.dk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thsk.dk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thsk.dk\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thsk.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20337"}],"version-history":[{"count":11,"href":"https:\/\/thsk.dk\/index.php?rest_route=\/wp\/v2\/posts\/20337\/revisions"}],"predecessor-version":[{"id":20354,"href":"https:\/\/thsk.dk\/index.php?rest_route=\/wp\/v2\/posts\/20337\/revisions\/20354"}],"wp:attachment":[{"href":"https:\/\/thsk.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thsk.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thsk.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}