Basic stats

Pearlception/Gemfile

@@ -20,6 +20,7 @@ gem 'uglifier', '>= 1.3.0'
 gem 'coffee-rails', '~> 4.2'
 # See https://github.com/rails/execjs#readme for more supported runtimes
 # gem 'therubyracer', platforms: :ruby
+gem 'chart-js-rails'
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'

Pearlception/Gemfile.lock

@@ -53,6 +53,8 @@ GEM
     bootstrap-popover-rails (0.1.0)
     builder (3.2.2)
     byebug (9.0.6)
+    chart-js-rails (0.1.2)
+      railties (> 3.1)
     coderay (1.1.1)
     coffee-rails (4.2.1)
       coffee-script (>= 2.2.0)
@@ -213,6 +215,7 @@ DEPENDENCIES
   bcrypt (~> 3.1.7)
   bootstrap-popover-rails
   byebug
+  chart-js-rails
   coffee-rails (~> 4.2)
   devise
   hirb

Pearlception/app/assets/javascripts/application.js

@@ -15,3 +15,4 @@
 //= require turbolinks
 //= require bootstrap/bootstrap-rails-tooltip
 //= require bootstrap/bootstrap-rails-popover
+//= require Chart 

Pearlception/app/assets/javascripts/statistics.coffee

@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/

Pearlception/app/assets/javascripts/statistics.js

@@ -0,0 +1,37 @@
+var ctx = document.getElementById("gradesChart");
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: ["Grade1", "Grade2", "Grade3", "Grade4", "Grade5", "Grade6"],
+        datasets: [{
+            label: 'Count for each grade',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+                'rgba(255,99,132,1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                }
+            }]
+        }
+    }
+});

Pearlception/app/assets/stylesheets/statistics.scss

@@ -1,3 +1,7 @@
 // Place all the styles related to the statistics controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+#myChart{
+    width:100%;
+    height: 100%;
+}

Pearlception/app/views/statistics/index.html.erb

@@ -47,5 +47,17 @@
         </div>
       </div>
     </div>
+    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+        <div class="col-md-4">
+            <canvas id="gradesChart"></canvas>   
+        </div>
+        <div class="col-md-4">
+            <canvas id="secondChart"></canvas>   
+        </div>
+        <div class="col-md-4">
+            <canvas id="thirdChart"></canvas>   
+        </div>
+    </div>
+    <%= javascript_include_tag "statistics.js" %>
     <%= javascript_include_tag "bootstrap.min" %>_
 </body>

Pearlception/config/initializers/assets.rb

@@ -2,7 +2,7 @@
 
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = '1.0'
-Rails.application.config.assets.precompile += %w(bootstrap.css styles.css.erb bootstrap.min.js runs.js dashboard.css)
+Rails.application.config.assets.precompile += %w( statistics.js bootstrap.css styles.css.erb bootstrap.min.js runs.js dashboard.css)
 # Add additional assets to the asset load path
 # Rails.application.config.assets.paths << Emoji.images_path