diff --git a/rowers/interactiveplots.py b/rowers/interactiveplots.py
index ba018f19..3b74b7b8 100644
--- a/rowers/interactiveplots.py
+++ b/rowers/interactiveplots.py
@@ -2864,136 +2864,42 @@ def instroke_interactive_chart(df,metric, workout, spm_min, spm_max,
     except TypeError:
         pass
 
-    TOOLS = 'save,pan,box_zoom,wheel_zoom,reset,tap,crosshair'
-    plot = figure(width=920,tools=TOOLS,
-                  toolbar_location='above',
-                  toolbar_sticky=False)
-
-    #plot.sizing_mode = 'stretch_both'
-
-    plot.title.text = str(workout) + ' - ' + metric
-
-    # add watermark
-    watermarkurl = "/static/img/logo7.png"
-
-    watermarkrange = Range1d(start=0, end=1)
-    watermarkalpha = 0.6
-    watermarkx = 0.99
-    watermarky = 0.01
-    watermarkw = 184
-    watermarkh = 35
-    watermarkanchor = 'bottom_right'
-    plot.extra_y_ranges = {"watermark": watermarkrange}
-    plot.extra_x_ranges = {"watermark": watermarkrange}
-
-    plot.image_url([watermarkurl], watermarkx, watermarky,
-                   watermarkw, watermarkh,
-                   global_alpha=watermarkalpha,
-                   w_units='screen',
-                   h_units='screen',
-                   anchor=watermarkanchor,
-                   dilate=True,
-                   x_range_name="watermark",
-                   y_range_name="watermark",
-                   )
-
-
-    source = ColumnDataSource(
-        df_plot
-    )
-
-
-    TIPS = OrderedDict([
-        ('x','@x'),
-        ('median','@median'),
-        ('high','@high'),
-        ('low','@low')
-    ])
-
-    hover = plot.select(type=HoverTool)
-    hover.tooltips = TIPS
-
-    s = 'SPM: {spm_min} - {spm_max}'.format(
-        spm_min = spm_min,
-        spm_max = spm_max,
-    )
-
-    label = Label(x=50, y=450, x_units='screen',y_units='screen',
-                  text=s,
-                  background_fill_alpha=0.7,
-                  background_fill_color='white',
-                  text_color='black',
-                  )
-
-    s2 = 'Time: {activeminutesmin} - {activeminutesmax}'.format(
-        activeminutesmin=datetime.timedelta(seconds=60*activeminutesmin),
-        activeminutesmax=datetime.timedelta(seconds=60*activeminutesmax)
-    )
-
-    label2 = Label(x=50,y=400, x_units='screen', y_units='screen',
-                   text=s2,
-                   background_fill_alpha=0.7,
-                   background_fill_color='white',
-                   text_color='black',
-                   )
-
-    plot.add_layout(label)
-    plot.add_layout(label2)
-
-    if name:
-        namelabel = Label(x=50, y=480, x_units='screen', y_units='screen',
-                      text=name,
-                       background_fill_alpha=0.7,
-                       background_fill_color='white',
-                       text_color='black',
-                       )
-        plot.add_layout(namelabel)
-
-    if notes:
-        noteslabel = Label(x=50, y=50, x_units='screen', y_units='screen',
-                      text=notes,
-                       background_fill_alpha=0.7,
-                       background_fill_color='white',
-                       text_color='black',
-                       )
-        plot.add_layout(noteslabel)
-
-    if individual_curves:
-        for index,row in df.iterrows():
-            plot.line(xvals,row,color='lightgray',line_width=1)
-    else:
-        plot.varea('x', y1='high', y2='low',source=source,fill_color="lightgray",alpha=0.5)
-
-    plot.line('x','median',source=source,legend_label='median',color="black",
-              line_width=3)
-
-    medrange = mean_vals.max()-mean_vals.min()
-    yrange = Range1d(start=mean_vals.min()-0.2*medrange,
-                     end=mean_vals.max()+0.2*medrange,)
-    plot.y_range = yrange
-
-    plot.add_tools(HoverTool(tooltips=TIPS))
-
+    
     if metric == 'boat accelerator curve':
-        plot.yaxis.axis_label = "Boat acceleration (m/s^2)"
+        ytitle = "Boat acceleration (m/s^2)"
     elif metric == 'instroke boat speed':
-        plot.yaxis.axis_label = "Boat Speed (m/s)"
+        ytitle = "Boat Speed (m/s)"
         vavg = mean_vals.median()
     elif metric == 'oar angle velocity curve':
-        plot.yaxis.axis_label = "Oar Angular Velocity (degree/s)"
+        ytitle = "Oar Angular Velocity (degree/s)"
     elif metric == 'seat curve':
-        plot.yaxis.axis_label = "Seat Speed (m/s)"
+        ytitle = "Seat Speed (m/s)"
+    
 
-    plot.xaxis.axis_label = 'Time (%)'
+    lines_dict = df.to_dict("records")
+    data_dict = df_plot.to_dict("records")
 
-    try:
-        script, div = components(plot)
-    except ValueError:
-        script = ""
-        div = "Something went wrong with the chart"
+    chart_data = {
+        'lines': lines_dict,
+        'data': data_dict,
+        'ytitle': ytitle,
+        'title': str(workout) + ' - ' + metric,
+        'individual_curves': individual_curves,
+        'spmmin': spm_min,
+        'spmmax': spm_max,
+        'timemin' :'{activeminutesmin}'.format(
+            activeminutesmin=datetime.timedelta(seconds=60*activeminutesmin),
+        ),
+        'timemax': '{activeminutesmax}'.format(
+            activeminutesmax=datetime.timedelta(seconds=60*activeminutesmax)
+        ),
+        'analysis_name': name,
+    }
 
-    return (script, div)
+        
+    script, div = get_chart("/instroke", chart_data, debug=False)
 
+    return script, div
 
 
 def interactive_chart(id=0, promember=0, intervaldata={}):
diff --git a/rowers/templates/instroke_interactive.html b/rowers/templates/instroke_interactive.html
index 9c86fdb9..acc2a8d1 100644
--- a/rowers/templates/instroke_interactive.html
+++ b/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">
diff --git a/rowers/tests/test_unit_tests.py b/rowers/tests/test_unit_tests.py
index 0492f3e5..195b9ec1 100644
--- a/rowers/tests/test_unit_tests.py
+++ b/rowers/tests/test_unit_tests.py
@@ -685,7 +685,7 @@ class InteractivePlotTests(TestCase):
 
         startdate = workouts[0].date-datetime.timedelta(days=5)
         enddate = workouts2[0].date+datetime.timedelta(days=5)
-        script, div = interactiveplots.interactive_activitychart(workouts,startdate,enddate)
+        script, div = interactiveplots.interactive_activitychart2(workouts,startdate,enddate)
         self.assertFalse(len(script)==0)
         self.assertFalse(len(div)==0)
 
diff --git a/rowers/tests/testdata/testdata.tcx.gz b/rowers/tests/testdata/testdata.tcx.gz
index 804b5375..3c591223 100644
Binary files a/rowers/tests/testdata/testdata.tcx.gz and b/rowers/tests/testdata/testdata.tcx.gz differ