Hourly, Daily, Monthly Helper+Model methods

Question

I have a web portal, parsing the API, to a web URL, where it goes through JSON.

This data is configured using Charts and we are currently using flot.js

The code for the hourlyData is already there and gets plugged into the json charts.

I'm trying to recreate this for Monthly and Yearly.

The current code for hourlyData looks like this:

  List<dynamic> hourlyData = new List<dynamic>();             DateTime hourIterator = StartDate.Value;             while (hourIterator.Hour <= ddvm.CurrentHour)             {                 if (ddvm.HourlyPaymentTotal != null && ddvm.HourlyPaymentTotal.Count() > 0 )                 {                     HourlyPaymentTotalModel hour = ddvm.HourlyPaymentTotal.FirstOrDefault(hpt => hpt.DateTimeStamp == hourIterator);                     if (hour == null) { hour = new HourlyPaymentTotalModel() { DateTimeStamp = hourIterator }; };                     hourlyData.Add(new List<dynamic> {hourIterator.Hour,                                                         hour.Amount,                                                          new { tooltip = String.Format("{0} : {1}", hour.Count, hour.Amount.ToString("C")) } });                 }                 hourIterator = hourIterator.AddHours(1);             }              ddvm.GraphData.LineChart_HourlyTotal.Add(new             {                 data = hourlyData,                 color = "#A1345E",                 label = "Total Amount Paid"             }); 

How can I recreate hourlyData into monthlyData and yearlyData?

Edit:

    public class HourlyPaymentTotalModel : ViewModelBase     {         public int Hour          {             get { return DateTimeStamp.Hour; }             set { DateTimeStamp  = new DateTime(1, 1, 1, value, 0, 0); }          }         public string FormattedHour         {             get { return DateTimeStamp.ToShortTimeString().Replace(":00 ", ""); }             set { DateTimeStamp = DateTime.Parse(value); }         }         public DateTime DateTimeStamp { get; set; }         public decimal Amount { get; set; }         public int Count { get; set; }     } } 

This is from the API solution:

public IQueryable<PaymentSummary> GetHourlyPaymentTotals(DateTime startDate, DateTime endDate, string PaymentProcessor = null, string merchantID=null)         {             transactionRepository = GetTransactionRepository(PaymentProcessor);             IQueryable<IPayment> allPayments = transactionRepository.GetAllPayments(startDate, endDate, merchantID);             var retVal = from ap in allPayments                          group ap by new                          {                              PaymentDateYear = ap.PaymentDate.Value.Year,                              PaymentDateMonth = ap.PaymentDate.Value.Month,                              PaymentDateDay = ap.PaymentDate.Value.Day,                              PaymentDateHour = ap.PaymentDate.Value.Hour                          }                              into grp_ap                              select (new                              {                                  PaymentDateString = grp_ap.Key.PaymentDateMonth.ToString() + "/" + grp_ap.Key.PaymentDateDay.ToString() + "/" + grp_ap.Key.PaymentDateYear.ToString() + " " + grp_ap.Key.PaymentDateHour + ":00",                                  Amount = grp_ap.Sum(grp => grp.Amount),                                  Count = grp_ap.Count()                              });             return (IQueryable<PaymentSummary>)retVal.ToList().Select(p => new PaymentSummary()             {                 PaymentDate = (DateTime?)DateTime.Parse(p.PaymentDateString),                 Amount = p.Amount,                 Count = p.Count             }).ToList().AsQueryable();         } 

---

Update: I created more models based on the solution Mairaj Ahmad proposed. This is using the dailyData model.

I'm still not sure why the <canvas> is showing a blank under my chart fields. This is probably an error with the data or the flot.js options made to the specified charts.

var  area_chart_payment_by_day_options = {         series: {             lines: {                 show: true,                 fill: .5             },             points: { show: true }         },         grid: {             borderWidth: 0,             hoverable: true         },         tooltip: true,         tooltipOpts: {             content: "%x : $ %y"         },         xaxis: {             //mode: "categories",             tickDecimals: 0,             min:1,             max:31         },         yaxis: {             tickFormatter: function (y) { return "$ " + y + " "; },             tickDecimals:0         }     } 

data function

 $(function () {             var data = [];             @Html.Raw("data = " + Json.Encode(Model.GraphData.LineChart_DailyTotal) + ";");   //TODO: LineChart_Daily             $.plot($("#area_chart_payment_by_day"), area_chart_payment_by_day,  

update function

$.plot($("#area_chart_payment_by_day"), area_chart_payment_by_day, area_chart_payment_by_day_options); 

Answer 1

You can create daily,monthly and yearly data by using the same logic. You just have to replace Hour with Day,Month or Year.

List<dynamic> dailyData = new List<dynamic>();         DateTime dayIterator = StartDate.Value;         while (dayIterator.Hour <= ddvm.CurrentDay)         {             if (ddvm.DailyPaymentTotal != null && ddvm.DailyPaymentTotal.Count() > 0 )             {                 DailyPaymentTotalModel day = ddvm.DailyPaymentTotal.FirstOrDefault(hpt => hpt.DateTimeStamp == dayIterator);                 if (day == null) { hour = new DailyPaymentTotalModel() { DateTimeStamp = dayIterator }; };                 dailyData.Add(new List<dynamic> {dayIterator.Day,                                                     day.Amount,                                                      new { tooltip = String.Format("{0} : {1}", day.Count, day.Amount.ToString("C")) } });             }             dayIterator = dayIterator.AddDays(1);         }          ddvm.GraphData.LineChart_DailyTotal.Add(new         {             data = dailyData,             color = "#A1345E",             label = "Total Amount Paid"         }); 

And this will be your DailyModel.

public class DailyPaymentTotalModel : ViewModelBase {     public int Day      {         get { return DateTimeStamp.Day; }         set { DateTimeStamp  = new DateTime(1, 1, value, 0, 0, 0); }      }      public DateTime DateTimeStamp { get; set; }     public decimal Amount { get; set; }     public int Count { get; set; } } 

}

And you data fetching logic looks to be in this function you need to make changes in it accordingly to make it work with day,month,year

transactionRepository.GetAllPayments(startDate, endDate, merchantID);