htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #237 from openHPI/repair_charts

Browse Source 
Improve working time bar graph
This commit is contained in:
MrSerth
2018-12-18 15:24:23 +01:00
committed by GitHub
parent 86f2f42fa1 95503c7b7d
commit ebd8b56ebf
2 changed files with 83 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
app/assets/javascripts/working_time_graphs.js
View File

@ -1,18 +1,16 @@
$(document).on('turbolinks:load', function() { $(document).on('turbolinks:load', function() {
// http://localhost:3333/exercises/38/statistics good for testing // /38/statistics good for testing
// originally at--> localhost:3333/exercises/69/statistics
if ($.isController('exercises') && $('.graph-functions').isPresent()) { if ($.isController('exercises') && $('.working-time-graphs').isPresent()) {
var working_times = $('#data').data('working-time'); var working_times = $('#data').data('working-time');
function get_minutes (time_stamp){ function get_minutes (timestamp){
try{ try{
hours = time_stamp.split(":")[0]; hours = timestamp.split(":")[0];
minutes = time_stamp.split(":")[1]; minutes = timestamp.split(":")[1];
seconds = time_stamp.split(":")[2]; seconds = timestamp.split(":")[2];
minutes = parseFloat(hours * 60) + parseInt(minutes); return parseFloat(hours * 60) + parseInt(minutes);
return minutes
} catch (err){ } catch (err){
return 0; return 0;
} }
@ -39,7 +37,7 @@ $(document).on('turbolinks:load', function() {
} }
function getWidth() { function getWidth() {
if (self.innerHeight) { if (self.innerWidth) {
return self.innerWidth; return self.innerWidth;
} }
@ -53,15 +51,12 @@ $(document).on('turbolinks:load', function() {
} }
// DRAW THE LINE GRAPH ------------------------------------------------------------------------------ // DRAW THE LINE GRAPH ------------------------------------------------------------------------------
function draw_line_graph() { function drawLineGraph() {
var width_ratio = .8; var width_ratio = .8;
if (getWidth() * width_ratio > 1000){ if (getWidth() * width_ratio > 1000){
width_ratio = 1000 / getWidth(); width_ratio = 1000 / getWidth();
} }
var height_ratio = .7; // percent of height var height_ratio = .7;
// 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 var margin = {top: 100, right: 20, bottom: 70, left: 70},//30,50
width = (getWidth() * width_ratio) - margin.left - margin.right, width = (getWidth() * width_ratio) - margin.left - margin.right,
@ -139,90 +134,85 @@ $(document).on('turbolinks:load', function() {
svg.append("path") svg.append("path")
.datum(minutes_count) .datum(minutes_count)
.attr("class", "line") .attr("class", "line")
.attr('id', 'myPath')// new .attr('id', 'myPath')
.attr("stroke", "orange") .attr("stroke", "orange")
.attr("stroke-width", 5) .attr("stroke-width", 5)
.attr("fill", "none")// end new .attr("fill", "none")
.attr("d", line);//--- .attr("d", line);
//.on("mousemove", mMove)//new again
//.append("title");
// function type(d) {
// d.frequency = +d.frequency;
// return d;
// }
} }
draw_line_graph(); drawLineGraph();
// THIS SHOULD DISPLAY THE X AND Y VALUES BUT
// THE RESULTS ARE WRONG AT THE END FOR SOME REASON
//function mMove() {
// var x_width = getWidth() * width_ratio;
// //var x_value = m[0]*(minutes_count.length/x_width);
//
// var y_height = x_width * height_ratio;
// //var y_value = (((y_height - m[1])/y_height)*100);
//
// //console.log('y is: ' + y_value);
// var m = d3.mouse(this);
// d3.select("#myPath").select("title")
// .text((y_height-m[1])/(y_height) * 100 + "% of Students" +"\n"+
// (m[0]*(minutes_count.length/x_width)) +" Minutes");//text(m[1]);
//}
// DRAW THE SECOND GRAPH ------------------------------------------------------------------------------ // DRAW THE SECOND GRAPH ------------------------------------------------------------------------------
function draw_bar_graph() { function drawBarGraph() {
var number_of_bars = 40; var groupWidth = 5;
var group_increment = Math.ceil(maximum_minutes / number_of_bars); // range in minutes var groupRanges = 0;
var group_ranges = group_increment; // just for the start var workingTimeGroups = [];
var minutes_array_for_bar = [];
do { do {
var section_value = 0; var clusterCount = 0;
for (var i = 0; i < minutes_array.length; i++) { for (var i = 0; i < minutes_array.length; i++) {
if ((minutes_array[i] < group_ranges) && (minutes_array[i] >= (group_ranges - group_increment))) { if ((minutes_array[i] >= groupRanges) && (minutes_array[i] < (groupRanges + groupWidth))) {
section_value++; clusterCount++;
} }
} }
minutes_array_for_bar.push(section_value); workingTimeGroups.push(clusterCount);
group_ranges += group_increment; groupRanges += groupWidth;
} }
while (group_ranges < maximum_minutes + group_increment); while (groupRanges < maximum_minutes);
console.log(maximum_minutes);
//console.log(minutes_array_for_bar); // this var used as the bars var clusterCount = 0,
//minutes_array_for_bar = [39, 20, 28, 20, 39, 34, 26, 23, 16, 8]; sum = 0,
maxVal = 0;
var max_of_array = Math.max.apply(Math, minutes_array_for_bar); for (var i = 0; i < minutes_array.length; i++) {
var min_of_array = Math.min.apply(Math, minutes_array_for_bar); if (minutes_array[i] > maximum_minutes) {
currentValue = minutes_array[i];
sum += currentValue;
if (currentValue > maxVal) {
maxVal = currentValue;
}
clusterCount++;
}
}
// ToDo: Take care of x axis description if this is added
// workingTimeGroups.push(clusterCount);
var maxStudentsInGroup = Math.max.apply(Math, workingTimeGroups);
var width_ratio = .8; var width_ratio = .8;
// Scale width to fit into bootsrap container
if (getWidth() * width_ratio > 1000){ if (getWidth() * width_ratio > 1000){
width_ratio = 1000 / getWidth(); width_ratio = 1000 / getWidth();
} }
var height_ratio = .7; // percent of height
var margin = {top: 100, right: 20, bottom: 70, left: 70},//30,50 var height_ratio = .7;
var margin = {top: 100, right: 20, bottom: 70, left: 70},
width = (getWidth() * width_ratio) - margin.left - margin.right, width = (getWidth() * width_ratio) - margin.left - margin.right,
height = (width * height_ratio) - margin.top - margin.bottom; height = (width * height_ratio) - margin.top - margin.bottom;
var x = d3.scaleBand() var x = d3.scaleBand()
.range([0, width], .1); .rangeRound([0, width])
.paddingInner(0.1)
var y = d3.scaleLinear() .domain(workingTimeGroups.map(function (d, i) {
.range([0,height-(margin.top + margin.bottom)]); return i * groupWidth;
}));
var xAxis = d3.axisBottom(x) var xAxis = d3.axisBottom(x)
.ticks(10);
var yAxis = d3
.axisLeft(d3.scaleLinear().domain([0,max_of_array]).range([height,0]))//y
.ticks(10) .ticks(10)
.tickSizeInner(-width); .tickValues(x.domain().filter(function(d, i){
return (d % 10) === 0
}))
.tickFormat(function(d) { return d + "-" + (d + groupWidth) });
var y = d3.scaleLinear()
.domain([0, maxStudentsInGroup])
.range([height, 0]);
var yAxis = d3.axisLeft(y)
.ticks(10);
var tip = d3.tip() var tip = d3.tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')
@ -239,17 +229,6 @@ $(document).on('turbolinks:load', function() {
svg.call(tip); svg.call(tip);
x.domain(minutes_array_for_bar.map(function (d, i) {
i++;
var high_side = i * group_increment;
var low_side = high_side - group_increment;
return (low_side+"-"+high_side);
}));
y.domain(minutes_array_for_bar.map(function (d) {
return (d);
}));
svg.append("g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") .attr("transform", "translate(0," + height + ")")
@ -269,10 +248,8 @@ $(document).on('turbolinks:load', function() {
.attr("transform", "rotate(-90)") .attr("transform", "rotate(-90)")
.attr("y", 6) .attr("y", 6)
.attr("dy", ".71em"); .attr("dy", ".71em");
//.style("text-anchor", "end")
//.text("Students");
svg.append("text") // y axis label svg.append("text")
.attr("transform", "rotate(-90)") .attr("transform", "rotate(-90)")
.attr("x", -height / 2) .attr("x", -height / 2)
.attr("dy", "-3em") .attr("dy", "-3em")
@ -280,7 +257,7 @@ $(document).on('turbolinks:load', function() {
.text("Students") .text("Students")
.style('font-size', 14); .style('font-size', 14);
svg.append("text")// x axis label svg.append("text")
.attr("class", "x axis") .attr("class", "x axis")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("x", width / 2) .attr("x", width / 2)
@ -289,36 +266,31 @@ $(document).on('turbolinks:load', function() {
.text("Working Time (Minutes)") .text("Working Time (Minutes)")
.style('font-size', 14); .style('font-size', 14);
y = d3.scaleLinear()
.domain([(0),max_of_array])
.range([0,height]);
svg.selectAll(".bar") svg.selectAll(".bar")
.data(minutes_array_for_bar) .data(workingTimeGroups)
.enter().append("rect") .enter().append("rect")
.attr("class", "bar") .attr("class", "bar")
.attr("x", function(d,i) { var bar_increment = width / minutes_array_for_bar.length; .attr("x", function(d, i) {
var bar_x = i * bar_increment; return x(i * groupWidth);
return (bar_x)}) })
.attr("width", x.bandwidth()) .attr("width", x.bandwidth())
.attr("y", function(d) { return height - y(d); }) .attr("y", function(d) { return y(d); })
.attr("height", function(d) { return y(d); }) .attr("height", function(d) { return height - y(d); })
.on('mouseover', tip.show) .on('mouseenter', tip.show)
.on('mouseout', tip.hide); .on('mouseout', tip.hide);
svg.append("text")// Title svg.append("text")
.attr("class", "x axis") .attr("class", "x axis")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("x", (width / 2))//+300) .attr("x", (width / 2))
.attr("y", 0) .attr("y", 0)
.attr("dy", '-1.5em') .attr("dy", '-1.5em')
.text("Distribution of Time Spent by Students") .text("Distribution of Time Spent by Students")
.style('font-size', 20) .style('font-size', 20)
.style('text-decoration', 'underline'); .style('text-decoration', 'underline');
} }
draw_bar_graph();
drawBarGraph();
} }
}); });

2
app/views/exercises/statistics.html.slim
View File

@ -33,7 +33,7 @@ h1 = @exercise
-working_time_array.push working_time -working_time_array.push working_time
hr hr
.d-none#data data-working-time=ActiveSupport::JSON.encode(working_time_array) .d-none#data data-working-time=ActiveSupport::JSON.encode(working_time_array)
.graph-functions .working-time-graphs
div#chart_1 div#chart_1
hr hr
div#chart_2 div#chart_2