Added rudimentary chart generation for benchmarks

public/js/reports.js

@@ -0,0 +1,68 @@
+$(document).ready(function() {
+
+  $('#generate_button').on('click', function(e) {
+    e.preventDefault();
+
+    $.ajax({
+      method: 'POST',
+      url: '/reports',
+      data: {
+        type: $('#report_type').val(),
+        choice: $('#report_choice').val(),
+        compare: $('#report_compare').val(),
+      }
+    }).done(function(data) {
+      benchChart.options.title.text = data.choice;
+      benchChart.data.labels = data.names;
+      benchChart.data.datasets[0].data = data.avg_results;
+      benchChart.data.datasets[1].data = data.min_results;
+      benchChart.update();
+    });
+  });
+
+});
+
+var benchChart = new Chart(document.getElementById('chart_canvas').getContext('2d'), {
+  type: 'horizontalBar',
+  data: {
+    labels: [],
+    datasets: [
+      {
+        label: 'Average FPS',
+        data: [],
+        backgroundColor: 'hotpink',
+        borderColor: '#212121',
+        borderWidth: 1,
+      },
+      {
+        label: 'Minimum FPS',
+        data: [],
+        backgroundColor: 'cornflowerblue',
+        borderColor: '#212121',
+        borderWidth: 1,
+      }
+    ]
+  },
+  options: {
+    title: {
+      display: true,
+      text: 'N/a'
+    },
+    scales: {
+      xAxes: [{
+        display: true,
+        ticks: {
+          beginAtZero: true
+        }
+      }]
+    },
+    animation: {
+      onComplete: function() {
+        var dwnbtn = $('#download_button');
+        dwnbtn.attr('href', benchChart.toBase64Image());
+        dwnbtn.attr('download', 'benchmark_chart.png');
+        dwnbtn.attr('disabled', false);
+      },
+    }
+  }
+});