Moved weekly stats js in separate script and chart x axis starts from 0

counter/static/js/weeklystats.js

@@ -0,0 +1,35 @@
+'use strict'; 
+
+$(document).ready(function() {
+  var data = JSON.parse($('#data').text()),
+    format = djangoToMomentFmt(django.get_format('SHORT_DATE_FORMAT'));
+  var labels = [], dataset = [];
+  
+  data.forEach(function(d) {
+    labels.push(moment(d.weekStarts).format(format) + ' - ' +
+      moment(d.weekEnds).format(format));
+    dataset.push(d.sum_count);
+  });
+  
+  var chart = new Chart($('#chart'), {
+      type: 'horizontalBar',
+      data: {
+          labels: labels,
+          datasets: [{
+              label: '# of Arrows',
+              data: dataset,
+              borderWidth: 1
+          }]
+      },
+      options: {
+          scales: {
+              xAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }]
+          }
+      }
+  });
+});
+

counter/templates/stats.html

@@ -10,40 +10,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
 <script src="{% static 'js/dateformat.js' %}"></script>
-<script>
+<script src="{% static 'js/weeklystats.js' %}"></script>
-$(document).ready(function() {
-  var data = JSON.parse($('#data').text()),
-    format = djangoToMomentFmt(django.get_format('SHORT_DATE_FORMAT'));
-  console.log(format);
-  var labels = [], dataset = [];
-  data.forEach(function(d) {
-    labels.push(moment(d.weekStarts).format(format) + ' - ' +
-      moment(d.weekEnds).format(format));
-    dataset.push(d.sum_count);
-  });
-  console.log(data);
-  var myChart = new Chart($('#chart'), {
-      type: 'horizontalBar',
-      data: {
-          labels: labels,
-          datasets: [{
-              label: '# of Arrows',
-              data: dataset,
-              borderWidth: 1
-          }]
-      },
-      options: {
-          scales: {
-              yAxes: [{
-                  ticks: {
-                      beginAtZero: true
-                  }
-              }]
-          }
-      }
-  });
-});
-</script>
 {% endblock %}
 
 {% block content %}