Create charts for registrations

Conflicts:

	app/controllers/admin/stats_controller.rb
	app/views/admin/stats/index.html.haml
This commit is contained in:
differentreality 2013-09-17 15:21:45 +03:00
parent 9cf5c59f28
commit 87551e88f8
9 changed files with 432 additions and 72 deletions

View file

@ -13,7 +13,7 @@ var width = 250,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
.range(["#9ECAE1", "#6baed6", "#DEEBF7"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
@ -24,16 +24,18 @@ var pie = d3.layout.pie()
.value(function(d) { return d.value; });
// Where to put the chart
var svg = d3.select("#charts").append("svg")
var svg = d3.select("#registered_attended").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var registered = '<%= h @pre_registered%>';
var attended = '<%= h @pre_registered_attended %>';
var not_attended = '<%= h @pre_registered - @pre_registered_attended %>';
var data = [
{"status":"did not attend","value":'<%= h @pre_registered - @pre_registered_attended %>'},
{"status":"attended","value":'<%= h @pre_registered_attended %>'}
{"status":"did not attend","value":not_attended, "percent": d3.round(not_attended / registered * 100)},
{"status":"attended","value": attended, "percent": d3.round(attended / registered * 100)}
];
var g = svg.selectAll(".arc")
@ -50,7 +52,8 @@ g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d3.round(d.data.value / registered * 100) + "%"; });
.text(function(d) { return d.data.percent +"%"; });
// Title of chart
svg.append("text")
.attr("class", "title")
@ -59,10 +62,10 @@ svg.append("text")
.text("% of pre-registered");
// Create & position legend
var legend = d3.select("#charts").append("svg")
var legend = d3.select("#registered_attended").append("svg")
.attr("class", "legend")
.attr("width", radius*2)
.attr("height", 230)
.attr("height", radius)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter().append("g")
@ -77,6 +80,6 @@ legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".15em")
.text(function(d) { return d; });
.text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
</script>