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']
+    spm = videodata['spm']
-    datadf = dataprep.getsmallrowdata_db(columns,ids=[id])
+    time = range(len(spm))
-
-    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:
+    data = zip(time,spm)
-        pace = datadf['pace']
-    except KeyError:
-        datadf['pace'] = 0
-
-    time = datadf['time']
-
-    data = zip(time.tolist(),spm.tolist())
 
     data2 = []
 
-    for time,spm in data:
+    for t,s in data:
         data2.append(
             {
-                'x':time/1000.,
+                'x':t,
-                'y':spm,
+                '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]
 

rowers/templates/embedded_video.html

@@ -158,6 +158,7 @@
             {% endfor %}
             // gauge.set(catch_now);
             var newLatLng = new L.LatLng(lat, lon);
+            console.log(newLatLng);
             marker.setLatLng(newLatLng);
           }
           if(videotime !== oldTime) {

rowers/views/workoutviews.py

@@ -203,7 +203,9 @@ def workout_video_create_view(request,id=0):
         mapscript, mapdiv = leaflet_chart_video(data['latitude'],data['longitude'],
                                                 w.name)
     else:
-        mapscript, mapdiv = interactive_chart_video(w.id)
+        mapscript, mapdiv = interactive_chart_video(data)
+        data['longitude'] = data['spm']
+        data['latitude'] = list(range(len(data['spm'])))
 
     breadcrumbs = [
             {
@@ -225,6 +227,8 @@ def workout_video_create_view(request,id=0):
 
     template = 'embedded_video.html'
 
+    print(data['latitude'],'aap')
+
     return render(request,
                   template,
                   {