working prototype Chart.js

rowers/interactiveplots.py

@@ -2949,42 +2949,31 @@ def interactive_chart(id=0,promember=0,intervaldata = {}):
 
     return [script,div]
 
-def interactive_chart_video(id=0):
+def interactive_chart_video(videodata):
 
-    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"
+    spm = videodata['spm']
+    time = range(len(spm))
 
 
-    try:
-        spm = datadf['spm']
-    except KeyError:
-        datadf['spm'] = 0
 
-    try:
-        pace = datadf['pace']
-    except KeyError:
-        datadf['pace'] = 0
-
-    time = datadf['time']
-
-    data = zip(time.tolist(),spm.tolist())
+    data = zip(time,spm)
 
     data2 = []
 
-    for time,spm in data:
+    for t,s in data:
         data2.append(
             {
-                'x':time/1000.,
-                'y':spm,
+                'x':t,
+                'y':s,
             }
         )
 
+    markerpoint = {
+        'x': time[0],
+        'y': spm[0],
+        'r': 10,
+    }
+
     div = """
     <canvas id="myChart">
     </canvas>
@@ -2993,28 +2982,7 @@ def interactive_chart_video(id=0):
     script = """
     var ctx = document.getElementById("myChart").getContext('2d');
     var data = %s
-    var marker = {
-     datapoint: {
-       'x': 0,
-       'y': 0,
-       'r': 10,
-     },
-     setLatLng: function (LatLng) {
-       var lat = LatLng.lat;
-       var lng = LatLng.lng;
-       this.datapoint = {
-          'x': lat,
-          'y': lng,
-          'r': 10,
-       }
-       console.log(this.datapoint);
-    }
-   }
-   marker.setLatLng({
-   'lat': data[0]['x'],
-   'lng': data[0]['y']
-   })
-   console.log(marker.datapoint);
+
    var myChart = new Chart(ctx, {
         type: 'scatter',
         label: 'pace',
@@ -3024,7 +2992,7 @@ def interactive_chart_video(id=0):
             {
                 type: 'bubble',
                 label: 'now',
-                data: [marker.datapoint],
+                data: [ %s ],
                 backgroundColor: '#36a2eb',
             },
             {
@@ -3036,7 +3004,26 @@ def interactive_chart_video(id=0):
         },
 
     });
-    """ % data2
+    var marker = {
+     datapoint: %s ,
+     setLatLng: function (LatLng) {
+       var lat = LatLng.lat;
+       var lng = LatLng.lng;
+       this.datapoint = {
+          'x': lat,
+          'y': lng,
+          'r': 10,
+       }
+       myChart.data.datasets[0].data[0] = this.datapoint;
+       myChart.update();
+    }
+   }
+   marker.setLatLng({
+   'lat': data[0]['x'],
+   'lng': data[0]['y']
+   })
+
+    """ % (data2, markerpoint, markerpoint)
 
     return [script,div]