add piechart

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; });
+  
+  });
+};