Bar chart

app/assets/javascripts/working_time_graphs.js

@@ -17,6 +17,7 @@ $(function() {
 
       }
 
+      // GET ALL THE DATA ------------------------------------------------------------------------------
       minutes_array = _.map(working_times,function(item){return get_minutes(item)});
       maximum_minutes = _.max(minutes_array);
       var minutes_count = new Array(maximum_minutes + 1);
@@ -33,16 +34,9 @@ $(function() {
 
       minutes_count[(maximum_minutes + 1)] = 0;
       //$('.graph-functions').html("<p></p>")
-      //console.log(minutes_count) // THIS SHOWS THAT THE FINAL VALUES ARE 1 AND NOT ACTUALLY 0
-
-      // good to test at: localhost:3333/exercises/69/statistics
-
-      var width_ratio = .8;
-      var height_ratio = .7; // percent of height
+      //console.log(minutes_count); // THIS SHOWS THAT THE FINAL VALUES ARE 1 AND NOT ACTUALLY 0
 
 
-      // currently sets as percentage of window width, however, unfortunately
-      // is not yet responsive
       function getWidth() {
           if (self.innerHeight) {
               return self.innerWidth;
@@ -57,6 +51,19 @@ $(function() {
           }
       }
 
+
+      // DRAW THE LINE GRAPH ------------------------------------------------------------------------------
+      function draw_line_graph() {
+
+          // good to test at: localhost:3333/exercises/69/statistics
+
+          var width_ratio = .8;
+          var height_ratio = .7; // percent of height
+
+
+          // currently sets as percentage of window width, however, unfortunately
+          // is not yet responsive
+
           var margin = {top: 100, right: 20, bottom: 70, left: 70},//30,50
               width = (getWidth() * width_ratio) - margin.left - margin.right,
               height = (width * height_ratio) - margin.top - margin.bottom;
@@ -82,8 +89,13 @@ $(function() {
               .outerTickSize(0);
 
           var line = d3.svg.line()
-          .x(function(d,i) { return x(i); })
-          .y(function(d) { return y(d/minutes_count[0]*100); });
+              .x(function (d, i) {
+                  return x(i);
+              })
+              .y(function (d) {
+                  return y(d / minutes_count[0] * 100);
+              });
+
 
           var svg = d3.select("#chart_1").append("svg")  //PLACEMENT GOES HERE  <---------------
               .attr("width", width + margin.left + margin.right)
@@ -91,14 +103,20 @@ $(function() {
               .append("g")
               .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-      x.domain(d3.extent(minutes_count, function(d,i) { return (i); }));
-      y.domain(d3.extent(minutes_count, function(d) { return (d/minutes_count[0]*100); }));
+
+          x.domain(d3.extent(minutes_count, function (d, i) {
+              return (i);
+          }));
+          y.domain(d3.extent(minutes_count, function (d) {
+              return (d / minutes_count[0] * 100);
+          }));
 
           svg.append("g") //x axis
               .attr("class", "x axis")
               .attr("transform", "translate(0," + height + ")")
               .call(xAxis);
 
+
           svg.append("text")// x axis label
               .attr("class", "x axis")
               .attr("text-anchor", "middle")
@@ -137,12 +155,17 @@ $(function() {
               .attr("stroke", "black")
               .attr("stroke-width", 5)
               .attr("fill", "none")// end new
-          .attr("d", line)//---
-          .on("mousemove", mMove)//new again
-          .append("title");
-
+              .attr("d", line);//---
+          //.on("mousemove", mMove)//new again
+          //.append("title");
 
+          function type(d) {
+              d.frequency = +d.frequency;
+              return d;
+          }
+      }
 
+      draw_line_graph();
 
       // THIS SHOULD DISPLAY THE X AND Y VALUES BUT
       // THE RESULTS ARE WRONG AT THE END FOR SOME REASON
@@ -163,14 +186,146 @@ $(function() {
 
 
 
-      //svg.append("rect") // border
-      //    .attr("x", 0)
-      //    .attr("y", 0)
-      //    .attr("height", height)
-      //    .attr("width", width)
-      //    .style("stroke", "#229")
-      //    .style("fill", "none")
-      //    .style("stroke-width", 3);
+      // DRAW THE SECOND GRAPH ------------------------------------------------------------------------------
+
+      //<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
+      function draw_bar_graph() {
+          var group_incrament = 10;
+          var group_ranges = group_incrament;
+          var minutes_array_for_bar = [];
+
+          do {
+              var section_value = 0;
+              for (var i = 0; i < minutes_array.length; i++) {
+                  if ((minutes_array[i] < group_ranges) && (minutes_array[i] >= (group_ranges - 10))) {
+                      section_value++;
+                  }
+              }
+              minutes_array_for_bar.push(section_value);
+              group_ranges += 10;
+          }
+          while (group_ranges < maximum_minutes);
+
+          //console.log(minutes_array_for_bar); // this var used as the bars
+          //minutes_array_for_bar = [39, 20, 28, 20, 39, 34, 26, 23, 16, 8];
+
+          var max_of_array = Math.max.apply(Math, minutes_array_for_bar);
+          var min_of_array = Math.min.apply(Math, minutes_array_for_bar);
+
+
+          var width_ratio = .8;
+          var height_ratio = .7; // percent of height
+
+          var margin = {top: 100, right: 20, bottom: 70, left: 70},//30,50
+              width = (getWidth() * width_ratio) - margin.left - margin.right,
+              height = (width * height_ratio) - margin.top - margin.bottom;
+
+          var x = d3.scale.ordinal()
+              .rangeRoundBands([0, width], .1);
+
+          var y = d3.scale.linear()
+              .range([0,height-(margin.top + margin.bottom)]);
+
+
+          var xAxis = d3.svg.axis()
+              .scale(x)
+              .orient("bottom");
+
+
+          var yAxis = d3.svg.axis()
+              .scale(d3.scale.linear().domain([0,max_of_array]).range([height,0]))//y
+              .orient("left")
+              .ticks(10)
+              .innerTickSize(-width);
+
+          var tip = d3.tip()
+              .attr('class', 'd3-tip')
+              .offset([-10, 0])
+              .html(function(d) {
+                  return "<strong>Students:</strong> <span style='color:orange'>" + d + "</span>";
+              });
+
+          var svg = d3.select("#chart_2").append("svg")
+              .attr("width", width + margin.left + margin.right)
+              .attr("height", height + margin.top + margin.bottom)
+              .append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+          svg.call(tip);
+
+          x.domain(minutes_array_for_bar.map(function (d, i) {
+              i++;
+              var high_side = i * group_incrament;
+              var low_side = high_side - group_incrament;
+              return (low_side+"-"+high_side);
+          }));
+
+          y.domain(minutes_array_for_bar.map(function (d) {
+              return (d);
+          }));
+
+          svg.append("g")
+              .attr("class", "x axis")
+              .attr("transform", "translate(0," + height + ")")
+              .call(xAxis);
+
+          svg.append("g")
+              .attr("class", "y axis")
+              .call(yAxis)
+              .append("text")
+              .attr("transform", "rotate(-90)")
+              .attr("y", 6)
+              .attr("dy", ".71em");
+              //.style("text-anchor", "end")
+              //.text("Students");
+
+          svg.append("text") // y axis label
+              .attr("transform", "rotate(-90)")
+              .attr("x", -height / 2)
+              .attr("dy", "-3em")
+              .style("text-anchor", "middle")
+              .text("Students")
+              .style('font-size', 14);
+
+          svg.append("text")// x axis label
+              .attr("class", "x axis")
+              .attr("text-anchor", "middle")
+              .attr("x", width / 2)
+              .attr("y", height)
+              .attr("dy", ((height / 20) + 20) + 'px')
+              .text("Working Time (Minutes)")
+              .style('font-size', 14);
+
+          y = d3.scale.linear()
+              .domain([(0),max_of_array])
+              .range([0,height]);
+
+
+          svg.selectAll(".bar")
+              .data(minutes_array_for_bar)
+              .enter().append("rect")
+              .attr("class", "bar")
+              .attr("x", function(d,i) {    var bar_incriment = width/ minutes_array_for_bar.length;
+                                            var bar_x = i * bar_incriment;
+                                            return (bar_x)})
+              .attr("width", x.rangeBand())
+              .attr("y", function(d) { return height - y(d); })
+              .attr("height", function(d) { return y(d); })
+              .on('mouseover', tip.show)
+              .on('mouseout', tip.hide);
+
+          svg.append("text")// Title
+              .attr("class", "x axis")
+              .attr("text-anchor", "middle")
+              .attr("x", (width / 2))//+300)
+              .attr("y", 0)
+              .attr("dy", '-1.5em')
+              .text("Distribution of Time Spent by Students")
+              .style('font-size', 20)
+              .style('text-decoration', 'underline');
+
+      }
+      draw_bar_graph()
 
   }
 

app/assets/stylesheets/exercises.css.scss

@@ -38,3 +38,49 @@ input[type='file'] {
 div#chart_1 {
   background-color: #FAFAFA;
 }
+
+div#chart_2 {
+  background-color: #FAFAFA;
+}
+
+
+
+
+.bar {
+  fill: orange;
+}
+
+.bar:hover {
+  fill:  #ffd897;
+}
+
+
+
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+}
+
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
+}

app/views/exercises/statistics.html.slim

@@ -1,3 +1,4 @@
+script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"
 h1 = @exercise
 
 = row(label: '.participants', value: @exercise.users.distinct.count)
@@ -21,8 +22,10 @@ h1 = @exercise
     hr
     .hidden#data data-working-time=ActiveSupport::JSON.encode(working_time_array)
     div#chart_1
-      .graph-functions
     hr
+    div#chart_2
+    hr
+    .graph-functions
   .table-responsive
     table.table.table-striped.sortable
       thead

config/action_mailer.yml

@@ -0,0 +1,21 @@
+default: &default
+  default_options:
+    from: codeocean@hpi.de
+  delivery_method: :smtp
+
+development:
+  <<: *default
+  default_url_options:
+    host: localhost
+
+production:
+  <<: *default
+  default_url_options:
+    host: CHANGE_ME
+
+test:
+  <<: *default
+  default_url_options:
+    host: localhost
+    port: 3000
+  delivery_method: :test

config/code_ocean.yml

@@ -0,0 +1,19 @@
+default: &default
+  flowr:
+    enabled: false
+  code_pilot:
+    enabled: false
+
+development:
+  flowr:
+    enabled: true
+    url: http://example.org:3000/api/exceptioninfo?id=&lang=auto
+  code_pilot:
+    enabled: false
+    url: //localhost:3000
+
+production:
+  <<: *default
+
+test:
+  <<: *default

config/database.yml

@@ -0,0 +1,18 @@
+default: &default
+  adapter: postgresql
+  encoding: unicode
+  password: 
+  pool: 16
+  username: postgres
+
+development:
+  <<: *default
+  database: code_ocean_development
+
+production:
+  <<: *default
+  database: code_ocean_production
+
+test:
+  <<: *default
+  database: code_ocean_test

config/secrets.yml

@@ -0,0 +1,22 @@
+# Be sure to restart your server when you modify this file.
+
+# Your secret key is used for verifying the integrity of signed cookies.
+# If you change this key, all old signed cookies will become invalid!
+
+# Make sure the secret is at least 30 characters and all random,
+# no regular words or you'll be exposed to dictionary attacks.
+# You can use `rake secret` to generate a secure secret key.
+
+# Make sure the secrets in this file are kept private
+# if you're sharing your code publicly.
+
+development:
+  secret_key_base: CHANGE_ME
+
+test:
+  secret_key_base: CHANGE_ME
+
+# Do not keep production secrets in the repository,
+# instead read values from the environment.
+production:
+  secret_key_base: CHANGE_ME

config/sendmail.yml

@@ -0,0 +1,11 @@
+default: &default
+  arguments: CHANGE_ME
+
+development:
+  <<: *default
+
+production:
+  <<: *default
+
+test:
+  <<: *default

config/smtp.yml

@@ -0,0 +1,14 @@
+default: &default
+  address: CHANGE_ME
+  password: CHANGE_ME
+  port: CHANGE_ME
+  user_name: CHANGE_ME
+
+development:
+  <<: *default
+
+production:
+  <<: *default
+
+test:
+  <<: *default