summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2015-02-24 16:39:46 +0100
committerDaniel Friesel <derf@finalrewind.org>2015-02-24 16:39:46 +0100
commita37f5d3aee752de6ea5c25e6047efbe569f85d75 (patch)
tree7e747379edccdfc0687b0b5b1e7ab892bd835a9a
parent8ad5eb58b01e068428652aabcb519281ab6c0461 (diff)
add piechart
-rw-r--r--public/css/default.css4
-rw-r--r--public/js/d3funcs.js60
2 files changed, 63 insertions, 1 deletions
diff --git a/public/css/default.css b/public/css/default.css
index 6769b31..fae8452 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -2,6 +2,10 @@ body {
font: 10px sans-serif;
}
+arc path {
+ stroke: #fff;
+}
+
.axis path,
.axis line {
fill: none;
diff --git a/public/js/d3funcs.js b/public/js/d3funcs.js
index f7f698d..ec6699d 100644
--- a/public/js/d3funcs.js
+++ b/public/js/d3funcs.js
@@ -94,4 +94,62 @@ show_bargraph = function(datasource, title, xLabel, yLabel, yFormat, width, heig
d.y = +d.y;
return d;
}
-}
+};
+
+show_piechart = function(datasource, title, yFormat, width, height) {
+
+ var margin = {top: 40, right: 20, bottom: 30, left: 40};
+
+ if (!width) {
+ width = 960;
+ }
+ if (!height) {
+ height = 500;
+ }
+ width -= margin.left + margin.right;
+ height -= margin.top + margin.bottom;
+
+ var width = 960,
+ height = 500,
+ radius = Math.min(width, height) / 2;
+
+ var color = d3.scale.ordinal()
+ .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+ var arc = d3.svg.arc()
+ .outerRadius(radius - 10)
+ .innerRadius(0);
+
+ var pie = d3.layout.pie()
+ .sort(null)
+ .value(function(d) { return d.y; });
+
+ var svg = d3.select("body").append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .append("g")
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+ d3.tsv(datasource, function(error, data) {
+
+ data.forEach(function(d) {
+ d.y = +d.y;
+ });
+
+ 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.x); });
+
+ 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.x; });
+
+ });
+};