Ngnix is on<h2>6 hour temperature graph</h2>
<img src="tempgraph.php?s=6">

<h2>Temperature graph</h2>

<!-- Flatpickr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/uk.js"></script>

<div style="margin-bottom:8px;">
    <button onclick="setPreset(6,this)">6 год</button>
    <button onclick="setPreset(24,this)">24 год</button>
    <button onclick="setPreset(48,this)">2 дні</button>
    <button onclick="setPreset(168,this)">Тиждень</button>
    <button onclick="setPreset(720,this)">Місяць</button>
    &nbsp;|&nbsp;
    <input type="text" id="dateRange" placeholder="Виберіть діапазон..." style="width:200px;">
    <button onclick="applyDateRange()">Показати</button>
</div>

<div style="overflow-x:auto;">
    <img id="tempGraph" src="period_temp_graph.php?start=24&finish=0">
</div>

<script>
    const picker = flatpickr("#dateRange", {
        mode: "range",
        locale: "uk",
        dateFormat: "Y-m-d",
        maxDate: "today"
    });

    function setPreset(hours, btn) {
        document.getElementById('tempGraph').src =
            'period_temp_graph.php?start=' + hours + '&finish=0&_=' + Date.now();
        picker.clear();
    }

    function applyDateRange() {
        const dates = picker.selectedDates;
        if (dates.length < 2) { alert('Оберіть початкову і кінцеву дати.'); return; }
        const fmt = d => d.toISOString().slice(0, 10);
        document.getElementById('tempGraph').src =
            'period_temp_graph.php?date_from=' + fmt(dates[0]) + '&date_to=' + fmt(dates[1]) + '&_=' + Date.now();
    }
</script>