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:
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
Comments
Post a Comment