0
Answer

represent bar chart data depending on dropdown menu

Hadeel e

Hadeel e
4y
444
1

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:

  1. private List<MonthWise> GetRidersPerMonthByYear(int driverId,int year)  
  2.         {  
  3.             var context = new RidesDbContext();  
  4.   
  5.             var collections=  context.RideAssignments.Where(x => x.Completion.Year == year && x.driverId == driverId)  
  6.                 .Select(y => new {   
  7.                 date = y.Completion,  
  8.                 driverId = y.driverId  
  9.                 }).ToList();  
  10.   
  11.           var groupBy =  collections.GroupBy(g => g.date.Month)  
  12.                 .Select(d => new MonthWise  
  13.                 {   
  14.                 Month = d.First().date.ToString("MMMM"),  
  15.                 Total = d.Count()  
  16.                 }).ToList();  
  17.   
  18.             return groupBy; 
 and this is the dashboard I'm trying to represent it on:
  1. public ActionResult Index()  
  2.        {  
  3.            ViewBag.noOfCustomers = GetNoOfcustomers();  
  4.            ViewBag.noOfDrivers = GetNoOfDrivers();  
  5.            ViewBag.noOfRides = GetNoOfRides();  
  6.   
  7.            // this is for testing (21 = driverId, 2020 = the year   
  8.            var groupByData = GetRidersPerMonthByYear(21, 2020);  
  9.   
  10.            var allMonths = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.MonthNames;  
  11.   
  12.            var monthWiseRides = new List<MonthWise>();  
  13.            foreach (var month in allMonths)  
  14.            {  
  15.                var monthWiseRide = new MonthWise();  
  16.                monthWiseRide.Month = month;  
  17.   
  18.                var ride = groupByData.FirstOrDefault(x => x.Month == month);  
  19.                if (ride != null)  
  20.                {  
  21.                    monthWiseRide.Total = ride.Total;  
  22.                }  
  23.                else {  
  24.                    monthWiseRide.Total = 0;  
  25.                }  
  26.   
  27.                monthWiseRides.Add(monthWiseRide);  
  28.            }  
  29.   
  30.   
  31.            ViewData["total"] = monthWiseRides.Select(x => x.Total).ToArray();  
  32.            ViewData["months"] = monthWiseRides.Select(x => x.Month).ToArray();  
  33.   
  34.   
  35.            return View();  
  36.        } 
 my view looks like this :
  1. <div class="jumbotron-fluid ">  
  2.     <canvas id="barchart" max-width="100" max-height="100"></canvas>  
  3. </div>  
  4.   
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>  
  6. <script type="text/javascript">  
  7.  var totalArray, monthsArray;  
  8.   
  9.       $(function () {  
  10.   
  11.           totalArray = @Html.Raw(Json.Encode(ViewData["total"]));  
  12.           monthsArray = @Html.Raw(Json.Encode(ViewData["months"]));  
  13.           console.log(totalArray);  
  14.           console.log(monthsArray);  
  15.   
  16.           var ctx2 = document.getElementById("barchart");  
  17.           var myChart = new Chart(ctx2, {  
  18.               type: 'bar',  
  19.               data: {  
  20.                   labels: monthsArray,  
  21.                   datasets: [{  
  22.                       label: '# of Rides',  
  23.                       data: totalArray,  
  24.                       backgroundColor: [  
  25.                           'rgba(255, 99, 132, 0.2)',  
  26.                           'rgba(54, 162, 235, 0.2)',  
  27.                           'rgba(255, 206, 86, 0.2)',  
  28.                           'rgba(75, 192, 192, 0.2)',  
  29.                           'rgba(153, 102, 255, 0.2)',  
  30.                           'rgba(255, 159, 64, 0.2)',  
  31.                           'rgba(255, 206, 86, 0.2)',  
  32.                           'rgba(75, 192, 192, 0.2)',  
  33.                           'rgba(153, 102, 255, 0.2)'  
  34.                       ],  
  35.                       borderColor: [  
  36.                           'rgba(255,99,132,1)',  
  37.                           'rgba(54, 162, 235, 1)',  
  38.                           'rgba(255, 206, 86, 1)',  
  39.                           'rgba(75, 192, 192, 1)',  
  40.                           'rgba(153, 102, 255, 1)',  
  41.                           'rgba(255, 159, 64, 1)',  
  42.                           'rgba(255, 206, 86, 0.2)',  
  43.                           'rgba(75, 192, 192, 0.2)',  
  44.                           'rgba(153, 102, 255, 0.2)'  
  45.                       ],  
  46.                       borderWidth: 1  
  47.                   }]  
  48.               },  
  49.               options: {  
  50.                   scales: {  
  51.                       yAxes: [{  
  52.                           ticks: {  
  53.                               beginAtZero: true  
  54.                           }  
  55.                       }]  
  56.                   }  
  57.               }  
  58.       });  
  59.   
  60.   
  61. });  
  62. </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.

 
Next Recommended Forum