represent bar chart data depending on dropdown menu

Question

I'm trying to display the data in a bar chart depending on a year selected and a specific driver name/id

Right now I have the chart displaying the # of the rides per month. However, I want to add a drop down menu for the years with default year as 2020 and an other drop down menu for the driver name/ id that made the rides.

Basically, I want to show the rides that have been made by specific driver by month. on other words, How many rides a driver has made per month. my code for representing the rides and the driver is working. but I don't know how to represent it by drop down menu on the UI here is the code that calculate # of rides a driver made by month:

private List<MonthWise> GetRidersPerMonthByYear(int driverId,int year)
        {
            var context = new RidesDbContext();

            var collections=  context.RideAssignments.Where(x => x.Completion.Year == year && x.driverId == driverId)
                .Select(y => new {
                date = y.Completion,
                driverId = y.driverId
                }).ToList();

          var groupBy =  collections.GroupBy(g => g.date.Month)
                .Select(d => new MonthWise
                {
                Month = d.First().date.ToString("MMMM"),
                Total = d.Count()
                }).ToList();

            return groupBy;

 and this is the dashboard I'm trying to represent it on:

public ActionResult Index()
       {
           ViewBag.noOfCustomers = GetNoOfcustomers();
           ViewBag.noOfDrivers = GetNoOfDrivers();
           ViewBag.noOfRides = GetNoOfRides();

           // this is for testing (21 = driverId, 2020 = the year
           var groupByData = GetRidersPerMonthByYear(21, 2020);

           var allMonths = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.MonthNames;

           var monthWiseRides = new List<MonthWise>();
           foreach (var month in allMonths)
           {
               var monthWiseRide = new MonthWise();
               monthWiseRide.Month = month;

               var ride = groupByData.FirstOrDefault(x => x.Month == month);
               if (ride != null)
               {
                   monthWiseRide.Total = ride.Total;
               }
               else {
                   monthWiseRide.Total = 0;
               }

               monthWiseRides.Add(monthWiseRide);
           }


           ViewData["total"] = monthWiseRides.Select(x => x.Total).ToArray();
           ViewData["months"] = monthWiseRides.Select(x => x.Month).ToArray();


           return View();
       }

 my view looks like this :

<div class="jumbotron-fluid ">
    <canvas id="barchart" max-width="100" max-height="100"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<script type="text/javascript">
 var totalArray, monthsArray;

      $(function () {

          totalArray = @Html.Raw(Json.Encode(ViewData["total"]));
          monthsArray = @Html.Raw(Json.Encode(ViewData["months"]));
          console.log(totalArray);
          console.log(monthsArray);

          var ctx2 = document.getElementById("barchart");
          var myChart = new Chart(ctx2, {
              type: 'bar',
              data: {
                  labels: monthsArray,
                  datasets: [{
                      label: '# of Rides',
                      data: totalArray,
                      backgroundColor: [
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(54, 162, 235, 0.2)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)',
                          'rgba(255, 159, 64, 0.2)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)'
                      ],
                      borderColor: [
                          'rgba(255,99,132,1)',
                          'rgba(54, 162, 235, 1)',
                          'rgba(255, 206, 86, 1)',
                          'rgba(75, 192, 192, 1)',
                          'rgba(153, 102, 255, 1)',
                          'rgba(255, 159, 64, 1)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)'
                      ],
                      borderWidth: 1
                  }]
              },
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  }
              }
      });


});
</script>

 

How would I filter the data so when I choose 2019 with a driverid for example it will show all the rides that has been made that year by that driver?

I would Appreciate your help. Thank you.