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

5 posts, 0 answers
  1. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 24 Aug Link to this post

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

  2. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 25 Aug in reply to Mike Link to this post

    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. 
  3. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 25 Aug Link to this post

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

     

     

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2086 posts

    Posted 28 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Mike
    Mike avatar
    9 posts
    Member since:
    Aug 2017

    Posted 30 Aug in reply to Konstantin Dikov Link to this post

    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 #")

                      )
                      )  

     

Back to Top