javascript - How to correctly passed php mysql data to ChartJs -

i want able produce bar chart , pie charts using chartjs. i'm using php , mysql data. bar chart want produce chart shows stats of students male or female , sum of students also. here example of how want result appear:

it may not it, feels gives idea. i'm problems code don't seem understand, because i'm novice chartjs , trying out, since morris.js isn't being supported. here how code looks:

html

<div class="box box-success">         <div class="box box-header with-border">           <h3 class="box-title">student chart</h3>           <div class="box-tools pull-right">             <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>             </button>             <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>           </div>           <div class="box-body">             <canvas id="mycanvas" style="height:230px;"></canvas>           </div>         </div> 

script:

$.ajax({       url: 'data.php',       type: 'get',       success:function(data){         console.log(data);          var male = [];         var female = [];          for(var count in data){           male.push(data[count].male);           female.push(data[count].female);         }          var chartdata = {             labels: male,             datasets: [               {                 label: 'student gender',                 backgroundcolor: 'rgba(200, 200, 200, 0.75)',                 bordercolor: 'rgba(200, 200, 200, 0.75)',                 hoverbackgroundcolor: 'rgba(200, 200, 200, 1)',                 hoverbordercolor: 'rgba(200, 200, 200, 1)',                 data:female               }             ]          };          var ctx = $('#mycanvas');          var bargraph = new chart(ctx, {           type:'bar',           data: chartdata         });       },       error:function(data){         console.log(data);       }     }); 

data.php

$query = "select               sum(case when gender = 'male' 1 else 0 end) male,             sum(case when gender = 'female' 1 else 0 end) female           students";  $output = array();  if ($result = mysqli_query($connection, $query)) {     # code...     foreach ($result $row) {         # code...         $output[] = $row;     } } else {     die("there problem". mysqli_error($connection)); }  echo json_encode($output); 

here result i'm getting console:

[{"male":"5","female":"2"}]

will appreciate suggestion on how can make better , same pie chart also.

based on i've done how chart displaying:

note please ignored frequency on photo.

would suggest change sql query following.

$query = "select gender,count(gender) count students group gender"; $output = array();  if ($result = mysqli_query($connection, $query)) {     # code...     foreach ($result $row) {         # code...         $output[] = $row;     } } else {     die("there problem". mysqli_error($connection)); }  echo json_encode($output); 

script:

$.ajax({       url: 'data.php',       type: 'get',       success:function(data){         console.log(data);          var gender = [];         var sum = [];          for(var count in data){           gender.push(data[count].gender);           sum.push(data[count].total);         }          var chartdata = {             labels: gender,             datasets: [               {                 label: 'student gender',                 backgroundcolor: 'rgba(200, 200, 200, 0.75)',                 bordercolor: 'rgba(200, 200, 200, 0.75)',                 hoverbackgroundcolor: 'rgba(200, 200, 200, 1)',                 hoverbordercolor: 'rgba(200, 200, 200, 1)',                 data:sum               }             ]          };          var ctx = $('#mycanvas');          var bargraph = new chart(ctx, {           type:'bar',           data: chartdata         });       },       error:function(data){         console.log(data);       }     });