(function (jsOMS) { "use strict"; jsOMS.Chart.PieChart = function (id) { this.chart = new jsOMS.Chart(id); // Setting default chart values this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0}; this.chart.color = d3.scale.category10(); this.chart.dataSettings.style.strokewidth = 0.3; this.chart.dataSettings.style.padding = 3; this.chart.subtype = 'pie'; }; jsOMS.Chart.PieChart.prototype.getChart = function () { return this.chart; }; jsOMS.Chart.PieChart.prototype.draw = function () { let svg, arc, box = this.chart.chartSelect.node().getBoundingClientRect(); this.chart.dimension = { width: box.width, height: box.height }; let radius = ( Math.min(this.chart.dimension.width, this.chart.dimension.height) / 2 - Math.max(this.chart.margin.right + this.chart.margin.left, this.chart.margin.top + this.chart.margin.bottom) ); arc = d3.svg.arc() .outerRadius(radius) .innerRadius(radius - radius*this.chart.dataSettings.style.strokewidth); svg = this.chart.chartSelect.append("svg") .attr("width", this.chart.dimension.width) .attr("height", this.chart.dimension.height) .append("g").attr("transform", "translate(" + (this.chart.margin.left) + "," + (this.chart.margin.top) + ")"); let dataPoint, dataPointEnter, temp = this.drawData(svg, arc, dataPointEnter, dataPoint); dataPointEnter = temp[0]; dataPoint = temp[1]; // todo: create own legend drawing this.chart.drawLegend(svg, dataPointEnter, dataPoint); this.chart.drawText(svg); if (this.chart.shouldRedraw) { this.redraw(); } }; jsOMS.Chart.PieChart.prototype.redraw = function () { this.chart.shouldRedraw = false; this.chart.chartSelect.select("*").remove(); this.draw(); }; jsOMS.Chart.PieChart.prototype.drawData = function (svg, arc, dataPointEnter, dataPoint) { let self = this, pie = d3.layout.pie() .sort(null) .value(function (d) { return d.value; }); dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset, function (c) { return c.id; }); dataPoint.enter().append("g").attr("class", "dataPoint"); dataPointEnter = dataPoint.selectAll("path") .data(function (d) { return pie(d.points); }).enter().append('path') .attr("transform", "translate(" + ((this.chart.dimension.width - this.chart.margin.left - this.chart.margin.right) / 2 ) + "," + ((this.chart.dimension.height - this.chart.margin.bottom - this.chart.margin.top) / 2) + ")") .attr('fill', function (d) { return self.chart.color(d.data.name); }) .attr('d', arc) .style('stroke', '#fff') .style('stroke-width', this.chart.dataSettings.style.padding); return [dataPointEnter, dataPoint]; }; }(window.jsOMS = window.jsOMS || {})); var c, chart, data, dataGen, i, k, count; dataGen = (function () { return (function (id) { return function () { var tempData, j, nums, y1Seed; nums = Math.ceil(Math.random() * 5) + 2; y1Seed = Math.round(Math.random() * 10); tempData = { id: id, name: "Dataset " + id, points: (function () { var k, ref, results, prev; results = []; for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) { results.push({ name: 'Name ' + j, value: y1Seed + Math.round(Math.random() * 5), }); } return results; })() }; id = id + 1; return tempData; }; })(1); })(); data = []; for (i = k = 1; k <= 1; i = ++k) { count = i; data.push(dataGen()); } /* var mychart = new jsOMS.Chart.PieChart('chart'); mychart.getChart().setData(data); mychart.draw(); */