osem-fcy/app/views/admin/stats/_registered_attended.html

<style>

.arc path {
  stroke: #fff;
}

</style>

<script>

var width = 250,
    height = 250,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#9ECAE1", "#6baed6", "#DEEBF7"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; });

// Where to put the chart
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":not_attended, "percent": d3.round(not_attended / registered * 100)},
{"status":"attended","value": attended, "percent": d3.round(attended / registered * 100)}
];

var g = svg.selectAll(".arc")
    .data(pie(data))
  .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.status); });

// Put text inside every piece of the pie-chart
g.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.percent +"%"; });

// Title of chart
svg.append("text")
    .attr("class", "title")
    .attr("x", radius)
    .attr("y", -radius+10)
    .text("% of pre-registered");

// Create & position legend
var legend = d3.select("#registered_attended").append("svg")
    .attr("class", "legend")
    .attr("width", radius*2)
    .attr("height", radius)
  .selectAll("g")
    .data(color.domain().slice().reverse())
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".15em")
        .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>