KSV-Pegel

Graph for levels on kanuschule.ch

by sirtet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data-2012-2022.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container"></div>

CSS

#container {
      border: 1px solid red;
      width: 175px
    }

JavaScript

const stations = [{
      "uuid": "a49789f9-5d04-5f2e-8521-53b5d4c3cbf7",
      "river": "Vorderrhein",
      "name": "Ilanz",
      "link": "http://www.hydrodaten.admin.ch/de/2033.html",
      "sourceUuid": "5f9ef6e9-f76d-428a-9d7b-46b86e5da7c4",
      "sourceName": "Eidgenössisches Departement für Umwelt, Verkehr, Energie und Kommunikation UVEK. Bundesamt für Umwelt BAFU. Abteilung Hydrologie",
      "sourceShortName": "BAFU",
      "sourceWebsite": "http://www.bafu.admin.ch",
      "sensors": ["flow"],
      "color": "#ff0000"
    }, {
      "uuid": "a31a9989-9661-5453-86d9-93b0088bab5c",
      "river": "Glenner",
      "name": "Castrisch",
      "link": "http://www.hydrodaten.admin.ch/de/2498.html",
      "sourceUuid": "5f9ef6e9-f76d-428a-9d7b-46b86e5da7c4",
      "sourceName": "Eidgenössisches Departement für Umwelt, Verkehr, Energie und Kommunikation UVEK. Bundesamt für Umwelt BAFU. Abteilung Hydrologie",
      "sourceShortName": "BAFU",
      "sourceWebsite": "http://www.bafu.admin.ch",
      "sensors": ["flow"],
      "color": "#00ff00"
    }, {
      "uuid": "e3510203-8324-5dbf-99fa-d5901ff632e6",
      "river": "Summe",
      "name": "Rheinschlucht",
      "link": "https://www.rivermap.ch/synthetic_station.php?id=synthetic.2",
      "sourceUuid": "4334ced5-8d71-42ef-9c0a-87d5553ad1cb",
      "sourceName": "Rivermap Synthetic",
      "sourceShortName": "RM Synthetic",
      "sourceWebsite": "https://www.rivermap.ch",
      "sensors": ["flow"],
      "color": "#00ffff",
      "fill": "true"
    }];
    const now = moment().valueOf();
    const url = new URL(window.location.href);
    const searchParams = new URLSearchParams(url.search);

    const params = {
      height: "250",
      from: Date.now() - 1000 * 3600 * 24 * 2, // 2 days from now
      to: searchParams.get("to") || now,
      tz: searchParams.get("tz") || Intl.DateTimeFormat().resolvedOptions().timeZone,
      sensors: searchParams.get("sensors") || "Q"
    };

    if...