Added average score line to progress graph

coffee/plot.coffee

-$.jqplot 'plot',  [window.data],
+avg = 0
+avg += value for [label, value] in window.data
+avg /= window.data.length
+
+$.jqplot 'plot', [window.data],
     title: window.text.title
     axes:
         xaxis:
@@ -11,3 +15,16 @@ $.jqplot 'plot',  [window.data],
     seriesDefaults:
         markerOptions:
             size: 20
+    canvasOverlay:
+        show: true
+        objects: [
+            horizontalLine:
+                name: 'avg'
+                y: avg
+                lineWidth: 1
+                color: '#b5b5b5'
+                shadow: false
+                showTooltip: true
+                tooltipFormatString: 'avg: %2$.4f'
+                showTooltipPrecision: .1
+        ]

locale/nl_NL/LC_MESSAGES/archery.po

@@ -158,8 +158,8 @@ msgstr "%d meter"
 msgid "YYYY-MM-DD"
 msgstr "JJJJ-MM-DD"
 
-msgid "Average score over time"
-msgstr "Gemiddelde score over tijd"
+msgid "Average arrow score over time"
+msgstr "Gemiddelde pijlscore over tijd"
 
 msgid "Progress graph"
 msgstr "Voortgangsgrafiek"

templates/user/plot.latte

 {extends "../layout.latte"}
 
+{block head}
+<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
+{/block}
+
 {block content}
 <div id="plot" class="plot"></div>
 {$form}
@@ -9,6 +13,7 @@
 <script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
 <script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
 <script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
+<script type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
 <script type="text/javascript">
     window.data = [
         {foreach $matches as $match}
@@ -16,12 +21,8 @@
         {/foreach}
     ];
     window.text = {
-        title: {_'Average score over time'}
+        title: {_'Average arrow score over time'}
     };
 </script>
 <script type="text/javascript" src="js/plot.js"></script>
 {/block}
-
-{block head}
-<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
-{/block}