adding default plotly

NOAA-CEFI-Portal · Sep 27, 2024 · cb84683 · cb84683
1 parent 4cf4555
commit cb84683
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/forecast_mhw.html b/forecast_mhw.html
@@ -153,14 +153,15 @@ <h3 class="sliderTitle"> Initialization : <span class="initTimeValueFcastMHW"></
         <div id='mhwProb' class="tab-pane view col-12 active">
             <h3>Probability Forecast</h3>
             <div class = "row position-relative">
-                <div id="plotly-fcastmhw-spread" class="col-xs-12 col-md-6"></div>
-                <div id="plotly-fcastmhw-box" class="col-xs-12 col-md-6"></div>
+                <div id="plotly-fcastmhw-prob" class="col-xs-12"></div>
                 <div id="loading-spinner-fcastmhw-spread" class="col-12 position-absolute top-0 start-0 w-100 h-100 loading-spinner"></div>
             </div>
         </div>
         <div id='mhwDist' class="tab-pane view col-12">
             <h3>Forecast Spread</h3>
             <div class = "row position-relative">
+                <div id="plotly-fcastmhw-mag" class="col-xs-12"></div>
+                <div id="loading-spinner-fcastmhw-spread" class="col-12 position-absolute top-0 start-0 w-100 h-100 loading-spinner"></div>
             </div>
         </div>
     </div>

diff --git a/forecast_mhw.js b/forecast_mhw.js
@@ -55,6 +55,8 @@ window.createMomCobaltOpt_singleID('statMOMCobaltFcastMHW',momCobaltStatsFcastMH
 // setup colorbar option (using historical.js function)
 window.createMomCobaltCbarOpt('cbarOptsFcastMHW','inferno');
 
+// initialize the plotly
+window.initializePlotly('mhwForecast')
 
 /////////////////  event listener  ////////////////
 // screen size adjustment trigger by window resizing

diff --git a/historical.html b/historical.html
@@ -191,7 +191,7 @@ <h3>Time Series Analyses</h3>
             <div class="row">
                 <div class="col-xs-12 col-md-6">
                     <label class='tsOptions' for="dropdown">Select 2nd variable:</label>
-                    <select name="variableTS2" id="varMOMCobaltTS2" class="col-xs-12 col-md-6"></select>
+                    <select name="variableTS2" id="varMOMCobaltTS2"></select>
                 </div>
                 <div class="col-xs-12 col-md-3">
                     <label class='tsOptions' for="dropdown">Select depth:</label>

diff --git a/historical.js b/historical.js
@@ -402,7 +402,8 @@ function initializePlotly(flag) {
     } else if (flag ==='transect') {
         Plotly.newPlot('plotly-transect', [trace], layout2,config);
     } else if (flag ==='mhwForecast') {
-
+        Plotly.newPlot('plotly-fcastmhw-prob', [trace], layoutTS,config);
+        Plotly.newPlot('plotly-fcastmhw-mag', [trace], layoutTS,config);
     }
 };