From 5fa6de18c4630e2de909cec2c1351978f3bb3efc Mon Sep 17 00:00:00 2001 From: Abhas Bhattacharya Date: Fri, 17 Mar 2017 21:13:53 +0530 Subject: [PATCH] Added pie chart --- js/app.js | 6 +-- js/draw-chart.js | 117 ++++++++++++++++++++++++++++++++++++++++++++--- style.css | 10 ++-- 3 files changed, 120 insertions(+), 13 deletions(-) diff --git a/js/app.js b/js/app.js index 5f84983..ccd1700 100644 --- a/js/app.js +++ b/js/app.js @@ -23,17 +23,17 @@ app.value("allData",{ "Sales":{ "Laptop": 50000, "Mobile": 40000, - "E-reader": 8000 + "E-reader": 25000 }, "Orders":{ "Laptop": 600, "Mobile": 300, - "E-reader": 50 + "E-reader": 250 }, "Revenue":{ "Laptop": 8000, "Mobile": 12000, - "E-reader": 800 + "E-reader": 5000 } } }, diff --git a/js/draw-chart.js b/js/draw-chart.js index 7ca2c34..d17acc1 100644 --- a/js/draw-chart.js +++ b/js/draw-chart.js @@ -3,7 +3,7 @@ function drawChart(type,data,axisLabel) { var typeMapping = { "column" : drawColumnChart, "bar" : drawBarChart, - // "pie" : drawPieChart + "pie" : drawPieChart }; if (typeof(type) === "string"){ var drawFunc = typeMapping[type.toLowerCase()]; @@ -92,14 +92,14 @@ function drawColumnChart(data,axisLabel) .on('mouseout', function () { tip_points.hide.apply(this,arguments); - }); + }); } function drawBarChart(data,axisLabel){ var eleChart = d3.select(".chart").html(""), eleChartBbox = eleChart.node().getBoundingClientRect(), - margin = {top: 15, right: 30, bottom: 60, left: 80}, + margin = {top: 15, right: 80, bottom: 60, left: 80}, width = +eleChartBbox.width - margin.left - margin.right, height = +eleChartBbox.height - margin.top - margin.bottom; @@ -109,7 +109,8 @@ function drawBarChart(data,axisLabel){ y = d3.scaleBand().rangeRound([height, 0]).padding(0.25); var g = svg.append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + .attr("transform", "translate(" + margin.left + "," + margin.top + ")") + .attr("width",width).attr("height",height);; x.domain([0, d3.max(data, function(d) { return d.x; })]); @@ -155,7 +156,9 @@ function drawBarChart(data,axisLabel){ var tip_points = d3.tip() .attr('class', 'd3-tip') - .html(function(d) { return d.x; }); + .html(function(d) { return d.x; }) + .direction("e") + .offset([0,10]); var vis = svg.call(tip_points); @@ -178,12 +181,112 @@ function drawBarChart(data,axisLabel){ } +function drawPieChart (data,axisLabel) { + var eleChart = d3.select(".chart").html(""), + eleChartBbox = eleChart.node().getBoundingClientRect(), + margin = {top: 10, right: 15, bottom: 50, left: 15}, + width = +eleChartBbox.width - margin.left - margin.right, + height = +eleChartBbox.height - margin.top - margin.bottom, + radius = Math.min(width, height) / 2; + + var color = d3.scaleOrdinal().domain(data.map(function(d){return d.x})) + .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); + + var arc = d3.arc() + .outerRadius(radius - 10) + .innerRadius(0); + + var pie = d3.pie() + .sort(null) + .value(function(d) { return d.y; }); + + var svg = eleChart.append("svg") + .attr("width",eleChartBbox.width) + .attr("height",eleChartBbox.height) + + var g = svg + .append("g") + .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")") + .attr("width", width) + .attr("height", height); + var groupArc = g.selectAll(".arc") + .data(pie(data)) + .enter().append("g") + .attr("class", "arc"); + + groupArc.append("path") + .attr("d", arc) + .style("fill", function(d) {return color(d.data.x); }); + + groupArc.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; }) + .style("fill", "white"); + + var xLabel = axisLabel[0]; + var yLabel = axisLabel[1]; + + svg + .append('g').classed("title",true) + .attr('transform', 'translate(' + (width/2 + margin.left/2) + ', ' + (eleChartBbox.height - margin.bottom/2 ) + ')') + .append('text') + .attr('text-anchor', 'middle') + .text(""+yLabel+" vs. "+xLabel); + + var tip_points = d3.tip() + .attr('class', 'd3-tip') + .html(function(d) {return d.data.y; }) + .direction(function(d){ + var availableDirection = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]; + + var midAngle = ((d.startAngle + d.endAngle)/2); + + var midAngle = ((d.startAngle + d.endAngle)/2)*180/Math.PI; + var indexDirection = Math.floor(midAngle/360 *8); + + var direction = availableDirection[indexDirection]; + console.log(direction); + return direction + }) + .offset(function (d) { + var midAngle = ((d.startAngle + d.endAngle)/2); + + midAngle = Math.floor(midAngle/(Math.PI*2/8))*(Math.PI*2/8); + midAngle = midAngle - Math.PI/2; + + var extraRadius = 15; + var posCentre = [-extraRadius*Math.sin(midAngle),-extraRadius*Math.cos(midAngle)]; + + console.log(midAngle*180/Math.PI); + console.log(posCentre); + return posCentre; + }) + + var vis = svg.call(tip_points); + + groupArc + .on('mouseover', function () { + // console.log([event,this]) + if ("path" === event.target.nodeName) + { + tip_points.show.apply(this,arguments); + } + + }) + .on('mouseout', function () { + if ("path" === event.target.nodeName) + { + tip_points.hide.apply(this,arguments); + } + + }); - - +} function cleanChart() { var eleChart = d3.select(".chart").html(""); diff --git a/style.css b/style.css index 2992684..4cac6cc 100644 --- a/style.css +++ b/style.css @@ -149,11 +149,15 @@ ul.unstyled-list /* d3 styles*/ .bar { - fill: steelblue; + fill: steelblue; } -.bar:hover { - fill: brown; +.bar:hover,.arc:hover path{ + -webkit-transition: fill 0.5s; + -o-transition: fill 0.5s; + transition: fill 0.5s; + + fill: brown !important; } .axis--x path {