first non working attemt with Chart.js

rowers/interactiveplots.py

@@ -2806,16 +2806,13 @@ def interactive_streamchart(id=0,promember=0):
 
     return [script,div]
 
-def interactive_chart(id=0,promember=0,intervaldata = {}, timepos = None):
+def interactive_chart(id=0,promember=0,intervaldata = {}):
     # Add hover to this comma-separated string and see what changes
     if (promember==1):
         TOOLS = 'save,pan,box_zoom,wheel_zoom,reset,tap,hover,crosshair'
     else:
         TOOLS = 'pan,box_zoom,wheel_zoom,reset,tap,hover,crosshair'
 
-    if timepos:
-        TOOLS = ''
-
 
     columns = ['time','pace','hr','fpace','ftime','spm']
     datadf = dataprep.getsmallrowdata_db(columns,ids=[id])
@@ -2934,32 +2931,6 @@ def interactive_chart(id=0,promember=0,intervaldata = {}, timepos = None):
                   right='time_r',source=intervalsource,color='mediumvioletred',
                   y_range_name='spmax',fill_alpha=0.2,line_alpha=0.2)
 
-    if timepos:
-        timepos = datetime.timedelta(seconds=timepos)
-        timeline = ColumnDataSource(
-            data=dict(
-                x = [timepos,timepos],
-                y = [10,100]
-            ))
-        plot.line('x','y',source=timeline,y_range_name='spmax')
-
-        callback = CustomJS(args = dict(timeline=timeline),
-                            code="""
-                            var data = timeline.data
-                            var x = data['x']
-                            var y = data['y']
-                            var sliderpos = cb_obj.value
-                            data['x'] = [sliderpos,sliderpos]
-                            timeline.change.emit();
-                            """
-                            )
-        timemax = int(datadf['time'].max()/1000.)
-        slider = Slider(start=0,end=100,step=1.0,callback=callback)
-        slider.js_on_change('value',callback)
-        layout = layoutcolumn([plot,slider])
-    else:
-        layout = plot
-
 
     hover = plot.select(dict(type=HoverTool))
 
@@ -2975,10 +2946,55 @@ def interactive_chart(id=0,promember=0,intervaldata = {}, timepos = None):
     hover.names = ["spm","pace"]
 
     script, div = components(layout)
-    js_resources = INLINE.render_js()
-    css_resources = INLINE.render_css()
 
-    return [script,div,js_resources,css_resources]
+    return [script,div]
+
+def interactive_chart_video(id=0):
+
+    columns = ['time','pace','hr','fpace','ftime','spm']
+    datadf = dataprep.getsmallrowdata_db(columns,ids=[id])
+
+    datadf.dropna(axis=0,how='any',inplace=True)
+
+    row = Workout.objects.get(id=id)
+    if datadf.empty:
+        return "","No Valid Data Available"
+
+
+    try:
+        spm = datadf['spm']
+    except KeyError:
+        datadf['spm'] = 0
+
+    try:
+        pace = datadf['pace']
+    except KeyError:
+        datadf['pace'] = 0
+
+    div = """
+    <canvas id="myChart">
+    </canvas>
+    """
+
+    script = """
+    var ctx = document.getElementById("myChart").getContext('2d');
+    var data = {
+    x: [1,2,3,4],
+    y: [1,4,9,16]
+    }
+    var myChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            datasets: [{
+                data: data,
+            }]
+        },
+    });
+    """
+
+    return [script,div]
+
+
 
 def interactive_multiflex(datadf,xparam,yparam,groupby,extratitle='',
                           ploterrorbars=False,