d3.js - how to add legend and tool tip in stacked bar chat -

i working on stacked bar chat.but not able add legend(request,served,waiting),title,x-label,y-label , tool tip in below code need more clarity on it.please me out how add these thing on it

i have modified code , able add legend not able add tool tip please me out when click bar should show tooltip total request": 10 "serverd": 8 , "wating": 2

edit code here

 var data = [ { "date": "5/2014", "total request": 10, "serverd": 8, "wating": 2 }, { "date": "6/2014", "total request": 20, "serverd": 12, "wating": 8 }, { "date": "7/2014", "total request": 30, "serverd": 20, "wating": 10 }, { "date": "8/2014", "total request": 40, "serverd": 30, "wating": 10 }, { "date": "9/2014", "total request": 10, "serverd": 5, "wating": 5 }, { "date": "10/2014", "total request": 34, "serverd": 30, "wating": 4 }, { "date": "11/2014", "total request": 32, "serverd": 22, "wating": 10 }, { "date": "12/2014", "total request": 40, "serverd": 20, "wating": 20}];           var margin = { top: 25, right: 40, bottom: 35, left: 85 },     width = 550 - margin.left - margin.right,     height = 250 - margin.top - margin.bottom;          var x = d3.scale.ordinal()     .rangeroundbands([0, width], .1);          var y = d3.scale.linear()     .rangeround([height, 0]);          var color = d3.scale.ordinal()     .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);          var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom");          var yaxis = d3.svg.axis()     .scale(y)     .orient("left")     .tickformat(d3.format(".2s"));          var svg = d3.select("#showstackedchart").append("svg")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)   .append("g")     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");               color.domain(d3.keys(data[0]).filter(function (key) { return key !== "date"; }));              data.foreach(function (d) {                 var y0 = 0;                 d.ages = color.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; });                 d.total = d.ages[d.ages.length - 1].y1;             });              data.sort(function (a, b) { return b.total - a.total; });              x.domain(data.map(function (d) { return d.date; }));             y.domain([0, d3.max(data, function (d) { return d.total; })]);              svg.append("g")       .attr("class", "x axis")       .attr("transform", "translate(0," + height + ")")       .call(xaxis);              svg.append("g")       .attr("class", "y axis")       .call(yaxis);              var state = svg.selectall(".state")       .data(data)     .enter().append("g")       .attr("class", "g")       .attr("transform", function (d) { return "translate(" + x(d.date) + ",0)"; });              state.selectall("rect")       .data(function (d) { return d.ages; })     .enter().append("rect")       .attr("width", x.rangeband())       .attr("y", function (d) { return y(d.y1); })       .attr("height", function (d) { return y(d.y0) - y(d.y1); })       .style("fill", function (d) { return color(d.name); });              var legend = svg.selectall(".legend")       .data(color.domain().slice().reverse())     .enter().append("g")       .attr("class", "legend")       .attr("transform", function (d, i) { return "translate(0," + * 20 + ")"; });              legend.append("rect")       .attr("x", width - 18)       .attr("width", 18)       .attr("height", 18)       .style("fill", color);              legend.append("text")       .attr("x", width - 24)       .attr("y", 9)       .attr("dy", ".35em")       .style("text-anchor", "end")       .text(function (d) { return d; });