v1 instroke interactive chart

rowers/templates/instroke_interactive.html

@@ -13,7 +13,6 @@
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
-
 <script>
   function submit_form() {
     console.log("form changed");
@@ -29,8 +28,8 @@
       dataType: 'json',
 
       success: function(data) {
-          $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
           $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'</d'+'iv>');
+          $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
 	  
 	
 	  $("#dd").empty();
@@ -121,12 +120,10 @@ $( function() {
   Bokeh.set_log_level("info");
 </script>
 
-<div id="id_script">
-  {{ the_script |safe }}
-</div>
 
 <h1>In Stroke Metrics</h1>
 <ul class="main-content">
+  <canvas hidden id="canvas"></canvas>
   <li class="grid_4" >
     {% if user.rower|is_basic %}
 
@@ -167,9 +164,13 @@ $( function() {
     </p>
   </li>
   <li class="grid_4">
+      <script src="https://d3js.org/d3.v6.js"></script>
     <div id="id_chart" class="flexplot">
       {{ the_div|safe }}
     </div>
+    <div id="id_script">
+      {{ the_script |safe }}
+    </div>
   </li>
   <script src="https://d3js.org/d3.v6.js"></script>
   <li class="grid_2" id="interactive">