Helper orario, giornaliero, mensile + metodi modello

Question

Ho un portale Web, analizzando l'API, a un URL Web, dove passa attraverso JSON.

Questi dati vengono configurato mediante grafici e stiamo attualmente utilizzando flot.js

Il codice per la hourlyData è già lì e viene inserito nella classifica JSON.

Sto cercando di ricreare questo per mensile e annuale.

Il codice corrente per hourlyData assomiglia a questo:

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" 
      }); 

Come posso ricreare hourlyData in monthlyData e 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; } 
    } 
} 

Questo è dalla soluzione API:

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(); 
     } 

---

Aggiornamento: Ho creato più modelli basati sulla soluzione Mairaj Ahmad proposto. Questo sta usando il modello dailyData.

Non sono ancora sicuro del motivo per cui lo <canvas> mostra uno spazio vuoto sotto i campi del grafico. Questo è probabilmente un errore con i dati o le opzioni flot.js apportate ai grafici specificati.

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 
     } 
    } 

funzione dei dati

$(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, 

funzione di aggiornamento

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

Answer 1

È possibile creare tutti i giorni, i dati mensili e annuali utilizzando la stessa logica. Devi solo sostituire l'ora con giorno, mese o anno.

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" 
     }); 

E questo sarà il tuo 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; } 
} 

}

E voi dati recupero logica sembra essere in questa funzione è necessario apportare modifiche di conseguenza per farlo funzionare con giorno, mese, anno

transactionRepository.GetAllPayments(startDate, endDate, merchantID);