{"id":239810,"date":"2024-11-20T12:49:51","date_gmt":"2024-11-20T12:49:51","guid":{"rendered":"https:\/\/predict.kikirpa.be\/?page_id=239810"},"modified":"2025-10-14T09:04:47","modified_gmt":"2025-10-14T09:04:47","slug":"visualize-climate-data-rh-threshold","status":"publish","type":"page","link":"https:\/\/predict.kikirpa.be\/index.php\/tools\/visualize-climate-data-rh-threshold\/","title":{"rendered":"Visualize Climate Data + RH threshold"},"content":{"rendered":"\n<!-- Include Bootstrap CSS for styling (via WPCode) -->\n\n<!-- Custom Styles --> \n<style>\n  body {\n    font-family: 'Calibri', sans-serif;\n    background-color: #f9f9f9;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    color: #333;\n  }\n  .container {\n    padding: 20px;\n  }\n  \/* Updated button color to a softer blue *\/\n  .btn {\n    background-color: #6cb4ee;\n    color: #fff;\n    border: none;\n  }\n  .btn:hover {\n    background-color: #5aaad1; \/* Slightly darker for hover effect *\/\n  }\n  .form-group label {\n    font-weight: bold;\n  }\n  .box {\n    border-radius: 5px;\n    margin-bottom: 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  \/* Updated box-header color to a softer blue *\/\n  .box-header {\n    background-color: #6cb4ee;\n    color: #fff;\n    padding: 10px;\n    border-top-left-radius: 5px;\n    border-top-right-radius: 5px;\n  }\n  .box-body {\n    background-color: #fff;\n    padding: 20px;\n    border-bottom-left-radius: 5px;\n    border-bottom-right-radius: 5px;\n  }\n  .chart-container {\n    position: relative;\n    margin: auto;\n    height: 365px;\n    width: 100%;\n  }\n  .box-header h6 {\n    color: #fff;\n  }\n  \/* Additional styling for statistics table *\/\n  #climate-data-stats, #recalculated-stats, #threshold-results {\n    margin-top: 30px;\n  }\n<\/style>\n\n<div class=\"container\">\n  <!-- Climate Data Upload Section -->\n  <section>\n    <h2>Upload Climate Data<\/h2>\n    <div class=\"box\">\n      <div class=\"box-header\">\n        <h5 class=\"box-title\">Climate Data Requirements<\/h5>\n      <\/div>\n      <div class=\"box-content p-3\">\n        <p>Please ensure the uploaded data file is in <strong>.csv format<\/strong> and includes the following headers, each in a <strong>separate column<\/strong>:<\/p>\n        <table class=\"table table-bordered\">\n          <thead>\n            <tr>\n              <th>Date<\/th>\n              <th>Time<\/th>\n              <th>Temperature<\/th>\n              <th>Relative Humidity<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <!-- Example row or instructions can be added here if needed -->\n          <\/tbody>\n        <\/table>\n        <p>Data format:<\/p>\n        <ul>\n          <li><strong>Date<\/strong>: Format as <code>dd\/mm\/yy<\/code> or <code>dd\/mm\/yyyy<\/code> (e.g., 31\/10\/24 or 31\/10\/2024)<\/li>\n          <li><strong>Time<\/strong>: Format as <code>hh:mm:ss<\/code> (e.g., 14:30:15)<\/li>\n          <li><strong>Temperature<\/strong>: Recorded in degrees Celsius<\/li>\n          <li><strong>Relative Humidity<\/strong>: Recorded as a percentage<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"box-body\">\n        <!-- Climate Data Upload Form -->\n        <form id=\"climate-data-form\">\n          <div class=\"form-group\">\n            <label for=\"climate-data-file\">Select Climate Data File (CSV):<\/label>\n            <input type=\"file\" id=\"climate-data-file\" accept=\".csv\" class=\"form-control-file\" required>\n          <\/div>\n          <button type=\"submit\" class=\"btn btn-primary\">Upload and Display Data<\/button>\n        <\/form>\n      <\/div>\n    <\/div>\n    <!-- Climate Data Graph and Statistics -->\n    <div class=\"box\" id=\"climate-data-graph-box\" style=\"display: none;\">\n      <div class=\"box-header\">\n        <h3 class=\"box-title\">Climate Data Graph<\/h3>\n      <\/div>\n      <div class=\"box-body\">\n        <!-- Container for the climate data chart -->\n        <div class=\"chart-container\">\n          <canvas id=\"climate-data-chart\"><\/canvas>\n        <\/div>\n        <!-- Updated Instruction Paragraph -->\n        <p class=\"mt-3\"><strong>\n          Click on &#8216;Relative Humidity&#8217; or &#8216;Temperature&#8217; in the legend to toggle their display on or off.<br>\n          Use the mouse wheel to zoom in and out, and click and drag to pan left or right.<br>\n          To reset the view, click \u2018Upload and Display Data\u2019.\n        <\/strong><\/p>\n\n        <!-- Recalculate Button -->\n        <button id=\"recalculate-button\" class=\"btn btn-secondary mt-3\" style=\"display: none;\">Recalculate Statistics Based on Current Zoom Level<\/button>\n\n        <!-- RH Threshold Input and Calculate Button -->\n        <div class=\"form-inline mt-3\" style=\"display: none;\" id=\"threshold-controls\">\n          <label for=\"rh-threshold-input\" class=\"mr-2\" style=\"display: block; text-align: left;\"><strong>Enter Relative Humidity Value (1.0 &#8211; 99.9):<\/strong><\/label>\n          <input type=\"number\" id=\"rh-threshold-input\" class=\"form-control mr-2\" min=\"1.0\" max=\"99.9\" step=\"0.1\" placeholder=\"e.g., 75.0\">\n          <button id=\"calculate-threshold-button\" class=\"btn btn-secondary\">Calculate Threshold Crossings<\/button>\n        <\/div>\n\n        <!-- Statistics Table -->\n        <div id=\"climate-data-stats\">\n          <!-- Table will be inserted here dynamically -->\n        <\/div>\n        <!-- Recalculated Statistics Table -->\n        <div id=\"recalculated-stats\">\n          <!-- Recalculated table will be inserted here dynamically -->\n        <\/div>\n        <!-- Threshold Results -->\n        <div id=\"threshold-results\">\n          <!-- Threshold results will be inserted here dynamically -->\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Upload Climate Data Climate Data Requirements Please ensure the uploaded data file is in .csv format and includes the following headers, each in a separate column: Date Time Temperature Relative Humidity Data format: Date: Format as dd\/mm\/yy or dd\/mm\/yyyy (e.g., 31\/10\/24 or 31\/10\/2024) Time: Format as hh:mm:ss (e.g., 14:30:15) Temperature: Recorded in degrees Celsius Relative &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/predict.kikirpa.be\/index.php\/tools\/visualize-climate-data-rh-threshold\/\"> <span class=\"screen-reader-text\">Visualize Climate Data + RH threshold<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":105,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-239810","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/pages\/239810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/comments?post=239810"}],"version-history":[{"count":33,"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/pages\/239810\/revisions"}],"predecessor-version":[{"id":307725,"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/pages\/239810\/revisions\/307725"}],"up":[{"embeddable":true,"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/pages\/105"}],"wp:attachment":[{"href":"https:\/\/predict.kikirpa.be\/index.php\/wp-json\/wp\/v2\/media?parent=239810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}