javascript - How to add legend to php mysql ChartJs -

i have been able nicely display pie chart in page , have tooltips onhover shows name , value of chart area. now, want able add legend chart. chart shows total number of male , female students. want legend display above , atleast have values of number of male , female students. have view these threads , none work me:

1. pie chart legend - chart.js
2. how add label in chart.js pie chart

here how script looks:

$.ajax({       url: 'data.php',       type: 'get',       datatype: 'json',       success:function(data){         console.log(data);          var gender = [];         var sum = [];          for(var in data){           gender.push(data[i].gender);           sum.push(data[i].total);         }          var piedata = [           {             value: sum[0],             color: "#f56954",             highlight: "#f56954",             label: gender[0]           },           {             value: sum[1],             color: "#00a65a",             highlight: "#00a65a",             label: gender[1]           }         ];          var piechartcanvas = $("#mycanvas").get(0).getcontext("2d");         var piechart = new chart(piechartcanvas);          var pieoptions = {           //boolean - whether should show stroke on each segment           segmentshowstroke: true,           //string - colour of each segment stroke           segmentstrokecolor: "#fff",           //number - width of each segment stroke           segmentstrokewidth: 2,           //number - percentage of chart cut out of middle           percentageinnercutout: 0, // 0 pie charts           //number - amount of animation steps           animationsteps: 100,           //string - animation easing effect           animationeasing: "easeoutbounce",           //boolean - whether animate rotation of doughnut           animaterotate: true,           //boolean - whether animate scaling doughnut centre           animatescale: false,           //boolean - whether make chart responsive window resizing           responsive: true,           // boolean - whether maintain starting aspect ratio or not when responsive, if set false, take entire container           maintainaspectratio: true,            //string - legend template           legendtemplate: "<ul class=\"<%=name.tolowercase()%>-legend\"><% (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillcolor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"         };          //create pie or douhnut chart         // can switch between pie , douhnut using method below.         piechart.doughnut(piedata, pieoptions);        },       error:function(data){         console.log(data);       }     });   }); 

for library i'm using chart.min.js