MVC Razor - Having problems displaying date and time on category axis

[Mike]

Below is my code.  Kendo chart is taking my date time data and displaying the axis by date not date and time.  I've tried many ways to get this to work.  When I tried Labels(labels => labels.DateFormats(formats => formats.Days("dd/MM/yyyy hh tt"))) and it displays all dates as 12 AM.    Why wont it display my data on the axis natively without formatting?  It seems to convert the data to a day range defaulted to 12 AM.   What am I doing wrong?

Data is like:

8/24/2017 1:00 

8/24/2017 2:00 

8/24/2017 3:00 

 

 

                 @(Html.Kendo().Chart<ElmahErrorsHourCountModel>()

                  .Name("HourlyErrorTotals")
                  .DataSource(ds => ds.Read(read => read.Action("HourlyErrorsCountByDate_Read", "Grid")))
                  .HtmlAttributes(new { style = "height:225px; width= 100%" })
                  .Series(series =>
                  {
                      series
                          .Line(model => model.ErrorCount);
                  })
                  .CategoryAxis(axis => axis
                      .Categories(model => model.HourlyDateTime)
                      .Labels(label => label.Rotation(-90))
                      .Crosshair(c => c.Visible(true))
                      
                  )
                  .ValueAxis(axis => axis.Numeric()
                      .Labels(labels => labels.Format("{0:N0}"))
                  )

                  .Tooltip(tooltip => tooltip
                      .Visible(true)
                      .Shared(true)
                      .Format("{0:N0}")
                  )
                  )  

[Mike]

It would also be great to know where the documentation is for the razor on formatting of the axis.  I searched and searched and found nothing.  It's been very frustrating. 

[Mike]

Attached is the data that is transformed into JSON.  I've also attached what the chart is doing when ran with axis formatting like this

 

.CategoryAxis(axis => axis
                      .Date()
                      .Labels(labels => labels.DateFormats(formats => formats.Days("MM/dd/yyyy HH tt")))
                      .Categories(model => model.HourlyDateTime)
                      .Labels(label => label.Rotation(-90))
                      .Crosshair(c => c.Visible(true))
                  )

 

 

Below is from the gridcontroller.cs   The

        public ActionResult HourlyErrorsCountByDate_Read([DataSourceRequest]DataSourceRequest request)
        {
            try
            {
                ElmahService es = new ElmahService();
                var newErrors = es.GetErrorsHourCount().ToList();

                return Json(newErrors, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                throw;
            }
        }

 

 

 

[Konstantin Dikov]

Hi Mike,

You could set the BaseUnits to "Hours" and change the displayed format as shown below:

.CategoryAxis(axis => axis
        .Date()
        .BaseUnit(ChartAxisBaseUnit.Hours)
        .Labels(labels => labels.Format("MM/dd/yyyy HH tt"))
    )

However, please note that the above will be usable only if all of the dates are from the same date.


Regards,
Konstantin Dikov
Progress Telerik

[Mike]

That didnt work.  I needed to display the data I presented to the chart.  Date + time.  I got it to work after several hours of painful trial and error.  For some reason sorting the data source allowed me to present the data as I sent to the chart.  It is very frustrating as I could find nothing that spoke if this in the docs.  

      @(Html.Kendo().Chart<ElmahErrorsHourCountModel>()
                  .Name("HourlyErrorTotals")
                  .Events(e => e.SeriesClick("click")
                  )
                  .DataSource(ds => ds.Read(read => read.Action("HourlyErrorsCountByDate_Read", "Grid"))
                    .Sort(sort=>sort.Add(model=>model.HourlyDateTime).Ascending())
                  )
                  .HtmlAttributes(new { style = "height:225px; width= 100%" })
                  .Series(series =>
                  {
                      series
                          .Line(model => model.ErrorCount);
                  })
                  .CategoryAxis(axis => axis
                      .Date()
                      .Labels(l => l.Format("MM/dd hh tt"))
                      .Categories(model => model.HourlyDateTime)
                      .Crosshair(c => c.Visible(true))
                  )
                  .ValueAxis(axis => axis.Numeric()
                      .Labels(labels => labels.Format("{0:N0}"))
                  )

                  .Tooltip(tooltip => tooltip
                      .Visible(true)
                      .Shared(false)
                      .Format("{0:N0}")
                      .Template("#= category #:  Errors: #= value #")

                  )
                  )