Chartjs-How to correctly passed php mysql data to ChartJs

Would suggest you to change your sql query to following.

$query = "select gender,count(gender) as count from students group by gender";
$output = array();

if ($result = mysqli_query($connection, $query)) {
    # code...
    foreach ($result as $row) {
        # code...
        $output[] = $row;
    }
} else {
    die("There was a 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);
      }
    });

I realize that the problem was with my script. Big thanks to @milan kumar for helping with the query. What was missing was specification of the type of data I was sending to ajax. All I had to do was to add the dataType with value ‘json’ before the success function, and it work perfectly. This is how the code should look:

script:

$.ajax({
      url: 'data.php',
      type: 'GET',
      // this was what I needed to make it work.
      dataType: 'json',
      success:function(data){

        var gender = [];
        var sum = [];

        for(var i in data){
          gender.push(data[i].gender);
          sum.push(data[i].total);
        }

        var ChartData = {
            labels: ['Student Gender'],
            datasets: [
              {
                label: gender[0],
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data:sum[0]
              },
              {
                label: gender[1],
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "rgba(60,141,188,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data:sum[1]
              }
            ] 
        };
      });

I have added some optional attributes to beautify my chart.