How do I insert a click event for chart.js using ajax and an external PHP?

See more:

PHP

Ajax

MySQL

So I have created a dropdown menu that has all the 12 months, upon selecting a month it will show a pie chart containing delivery status of that month.

What I am trying to do now is insert a click event for the pie segment, where upon clicking a certain segment it will pop up a table with the clients details of who has or has not been delivered to yet depending on which segment was clicked.

I'm stuck thinking of how to insert the click function, I tried inserting an ajax request within an ajax request because I still need the dropdown values for the table. So here is what I have so far, i'm not sure where the error is

Here is my current script:

$(document).ready(function(){
      $.ajax({
        url: "chartData.php",
        type: "post",
        data: {
          val: "january"
        },
        success: function(pieC){
          $(".container").html(pieC);
          $("#graph").chart = new Chart($("#graph"), $("#graph").data("settings"));
        }
      });
      
      $(".mon").change(function(){
        $.ajax({
          url: "chartData.php",
          type: "post",
          data: {
            val: $(this).val()
          },
          success: function(pieC){
            $(".container").html(pieC);
            $("#graph").chart = new Chart($("#graph"), $("#graph").data("settings"));

            $("#graph").click(
                function(event){
                    var activepoints = $("#graph").getElementsAtEvent(event);
                    if(activepoints.length > 0){
                        //get the index of the slice
                       var clickedIndex = activepoints[0]["_index"];
                       var OatChart = $("#graph").data.labels[clickedIndex];

                       if(OatChart == "Delivered"){
                            $.ajax({
                                url: "tabData.php",
                                type: "post",
                                datatype: "json",
                                data: { val: $(this).val() },
                                success: function(data){
                                    $("#myTable").html(data);
                                }
                            });
                       }
                       else{
                            $.ajax({
                                url: "tabData2.php",
                                type: "post",
                                datatype: "json",
                                data: { val: $(this).val() },
                                success: function(data){
                                    $("#myTable").html(data);
                                }
                            });
                       }
                  
                    }
                }
            )
            }
          })
        });
    });

chartData.php:

<?php

$mysqli = new MySQLi("localhost", "root", "", "oatdistribution");
if($mysqli->connect_errno){
  echo "Failed to connect to MySQL: " . $mysqli->connect_errno;
}

isset($_POST["val"]) ? $val = $_POST["val"] : $val = "";

$stat = "";
$tots = "";
$pieC = "";

$getData = "SELECT Status, count(*) as Total FROM `".$val."` GROUP BY Status";
$rows = $mysqli->query($getData);
$rowcount = $rows->num_rows;
if($rowcount > 0){
  while($r = $rows->fetch_assoc()){
    $stat .= '"' . $r["Status"] . '",';
    $tots .= '"' . $r["Total"] . '",';
  }
}

$stat = substr($stat, 0, -1);
$tots = substr($tots, 0, -1);
$pieC = '
<canvas id="graph" data-settings=
\'{
"type": "pie",
"data": 
{
  "labels": [' . $stat . '],
  "datasets": 
  [{
    "label": "' . $val . ' Personnel",
    "backgroundColor": [
        "rgba(24, 255, 78, 0.5)",
        "rgba(255, 99, 132, 0.5)"
    ],
    "borderColor": [
        "rgba(24, 255, 78, 1)",
        "rgba(255, 99, 132, 1)"
    ],
    "data": [' . $tots . '],
    "borderWidth": 3
  }]
},
"options":
{
  "legend":
  {
    "display": true
  }
}
}\'
></canvas>';

echo $pieC;

?>

tabData.php:

<?php
      if(isset($_POST['val'])){
        $val = $_POST['val'];
        $con = mysqli_connect("localhost","root","","oatdistribution");
        if (!$con) {
          die('Could not connect: ' . mysqli_error($con));
        }

        $sql = "SELECT OatDis.Name, OatDis.LivingCondition, OatDis.OatType, OatDis.NoOfOats, `".$val."`.Status FROM OatDis INNER JOIN `".$val."` ON OatDis.Name = `".$val."`.Name WHERE `".$val."`.Status = 'Delivered'";
        $result = mysqli_query($con,$sql);

        echo "<table>
        <tr>
        <th>Name</th>
        <th>Status</th>
        </tr>";
        while($row=mysqli_fetch_array($result)) {
            echo "<tr>";
            echo "<td>" . $row['Name']."</td>";
            echo "<td>" . $row['LivingCondition']."</td>";
            echo "<td>" . $row['OatType']."</td>";
            echo "<td>" . $row['NoOfOats']."</td>";
            echo "<td>" . $row['Status']."</td>";
            echo "</tr>";
        }
        echo "</table>";
      }
    ?>

What I have tried:

I did tinker around with the code before using ajax and got the results I needed but the code was very lengthy and inefficient.