137 lines
6.7 KiB
HTML
137 lines
6.7 KiB
HTML
|
<!--
|
||
|
|
selectachart.htm v:0.0.1 d:Feb 2021 Neil Thomas
|
||
|
|
Last modified: 2023/02/10 14:48:11
|
||
|
|
Page: 1 main panel plus a sidebar
|
||
|
|
-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="description" content="weather data">
|
||
|
|
<meta name="keywords" content="Cumulus, weather, data, weather station">
|
||
|
|
<title>Cumulus MX</title>
|
||
|
|
<link rel="icon" type="image/png" href="images/favicon.png">
|
||
|
|
|
||
|
|
<!-- jQuery Local -->
|
||
|
|
<script src="lib/jquery/jquery-latest.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Fonts System will default to a sans-serif font if no Internet connection -->
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- All Styles -->
|
||
|
|
<link href="css/w3Pro.css" rel="stylesheet"> <!-- Basic w3shools responsive styles -->
|
||
|
|
<link href="css/colours.css" rel="stylesheet"> <!-- Slightly enhanced w3schools colours -->
|
||
|
|
<link href="css/mx-templates.css" rel="stylesheet"> <!-- Specific styles for these templates. -->
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
<script src="js/setpagedata.js"></script> <!-- Utility javascripts for all pages. -->
|
||
|
|
<style>
|
||
|
|
#chartcontainer {
|
||
|
|
min-height: 550px;
|
||
|
|
margin-top:16px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.graphs-width {
|
||
|
|
max-width:1250px;
|
||
|
|
margin: auto
|
||
|
|
}
|
||
|
|
.narrow-width {
|
||
|
|
max-width: 500px;
|
||
|
|
}
|
||
|
|
.select-value {
|
||
|
|
width:75%;
|
||
|
|
display:inline-block;
|
||
|
|
}
|
||
|
|
.select-color {
|
||
|
|
width:20%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
|
||
|
|
<div class="w3-row-padding site-width">
|
||
|
|
<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
|
||
|
|
<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
|
||
|
|
<div class="w3-right-align" style="max-width:600px;">
|
||
|
|
<h5>Lat<span class="w3-hide-small">itude</span>: <span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>: <span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>: <span data-cmxdata="altitude"></span></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Start of Menu -->
|
||
|
|
<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
|
||
|
|
</div>
|
||
|
|
<!-- Mobile menu -->
|
||
|
|
<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
|
||
|
|
</div> <!-- End of Mobile menu -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="Content"> <!-- Start of main content -->
|
||
|
|
<div class="w3-row-padding w3-theme-light graphs-width"> <!-- Page Title -->
|
||
|
|
<div class="w3-col l12">
|
||
|
|
<h1>Charts based on data you select<span class="subText"></span></h1>
|
||
|
|
</div>
|
||
|
|
</div> <!-- End of title row -->
|
||
|
|
<div class="w3-row-padding w3-theme-light graphs-width"> <!-- First Row -->
|
||
|
|
<div class="w3-col s12"> <!-- Column of first row -->
|
||
|
|
<div class="w3-panel w3-card w3-theme-white">
|
||
|
|
<figure>
|
||
|
|
<div id="chartcontainer"></div>
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> <!-- End of first column of first row -->
|
||
|
|
<div class="w3-row-padding w3-theme-light graphs-width"> <!-- Start of second row -->
|
||
|
|
<div class="w3-col s12">
|
||
|
|
<div class="w3-center">
|
||
|
|
<!-- Selector buttons -->
|
||
|
|
<div class="at-flex-between" style="flex-wrap:wrap"> <!-- Main flex container: between forces content left & right -->
|
||
|
|
<div class="at-flex-justify" style="max-width:550px;flex-wrap:wrap;flex:2"> <!-- Left bar for selectors -->
|
||
|
|
<div class="" style="max-width:170px;min-height:2.5em;">
|
||
|
|
<select class="w3-select select-value" name="data0" id="data0" onchange="procDataSelect(this)"></select>
|
||
|
|
<select class="w3-select select-color" name="colour0" id="colour0" onchange="updateColour(this)"></select>
|
||
|
|
</div>
|
||
|
|
<div class="" style="max-width:170px;min-height:2.5em;">
|
||
|
|
<select class="w3-select select-value" name="data1" id="data1" onchange="procDataSelect(this)"></select>
|
||
|
|
<select class="w3-select select-color" name="colour1" id="colour1" onchange="updateColour(this)"></select>
|
||
|
|
</div>
|
||
|
|
<div class="" style="max-width:170px;min-height:2.5em;">
|
||
|
|
<select class="w3-select select-value" name="data2" id="data2" onchange="procDataSelect(this)"></select>
|
||
|
|
<select class="w3-select select-color" name="colour2" id="colour2" onchange="updateColour(this)"></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="at-flex-justify" style="max-width:550px;flex-wrap:wrap;flex:2"> <!-- Right bar for selectors -->
|
||
|
|
<div class="" style="max-width:170px;min-height:2.5em;">
|
||
|
|
<select class="w3-select select-value" name="data3" id="data3" onchange="procDataSelect(this)"></select>
|
||
|
|
<select class="w3-select select-color" name="colour3" id="colour3" onchange="updateColour(this)"></select>
|
||
|
|
</div>
|
||
|
|
<div class="" style="max-width:170px;min-height:2.5em;">
|
||
|
|
<select class="w3-select select-value" name="data4" id="data4" onchange="procDataSelect(this)"></select>
|
||
|
|
<select class="w3-select select-color" name="colour4" id="colour4" onchange="updateColour(this)"></select>
|
||
|
|
</div>
|
||
|
|
<div class="" style="max-width:170px;min-height:2.5em;">
|
||
|
|
<select class="w3-select select-value" name="data5" id="data5" onchange="procDataSelect(this)"></select>
|
||
|
|
<select class="w3-select select-color" name="colour5" id="colour5" onchange="updateColour(this)"></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-panel">Click on a button to display the corresponding chart. Mouse over the chart to see the values at any given time.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> <!-- End of first column of second row -->
|
||
|
|
</div> <!-- End of content -->
|
||
|
|
<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
|
||
|
|
<div class="w3-row-padding site-width">
|
||
|
|
<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
|
||
|
|
<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
|
||
|
|
<script src="js/selectachart.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|