Line chart binding to list of custom class

2 posts, 1 answers
  1. Attila
    Attila avatar
    16 posts
    Member since:
    Oct 2016

    Posted 06 Oct Link to this post

    Hi! 

    My problem is, that I have a custom class with 3*2 fileds (DateTime and an integer value for 3 different things, so I want to see 3 series in my charts):

    My viewmodel:

    public class RiportViewModels
        {
            private DateTime _firstDate;
            private DateTime _secondDate;
            private DateTime _thirdDate;

            public DateTime FirstDate
            {
                get => _firstDate;
                set
                {
                    if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                    _firstDate = new DateTime(value.Year, value.Month, 1);
                }
            }
            public int FirstAmount { get; set; }

            public DateTime SecondDate
            {
                get => _secondDate;
                set
                {
                    if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                    _secondDate = new DateTime(value.Year, value.Month, 1);
                }
            }
            public int SecondAmount { get; set; }

            public DateTime ThirdDate
            {
                get => _thirdDate;
                set
                {
                    if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                    _thirdDate = new DateTime(value.Year, value.Month, 1);
                }
            }
            public int ThirdAmount { get; set; }
        }

     

    My controller:

     

    public class RiportController:Controller
    {

    [HttpGet]
    public ActionResult Show()
    {
    return View();
    }

    [HttpPost]
    public async Task<ActionResult> Show([DataSourceRequest] DataSourceRequest request)
    {
    List<RiportViewModels> result = new List<RiportViewModels>();
    //here I fill up this list
    return Json(result, JsonRequestBehavior.AllowGet);
    }
    }

     

    And the Chart is empty:

    @(Html.Kendo().Chart<RiportViewModels>()
              .Name("chart")
              .Title("My results")
              .Legend(legend => legend
                  .Position(ChartLegendPosition.Top)
              )
              .DataSource(x => x
                  .Read(read => read.Action("Show", "Riport"))
                  )
              .ChartArea(chartArea => chartArea
                  .Background("transparent")
              )
              .SeriesDefaults(seriesDefaults =>
                  seriesDefaults.Line().Style(ChartLineStyle.Smooth)
              )
              .Series(series =>
              {
                  series.Line(model => model.FirstAmount, category => category.FirstDate).Name("My first amount");
                  series.Line(model => model.SecondAmount, category => category.SecondDate).Name("My second amount");
                  series.Line(model => model.ThirdAmount, category => category.ThirdDate).Name("My third amount");
              })
              .CategoryAxis(axis => axis
              .ValueAxis(axis => axis
              .Numeric()
              .Labels(labels => labels.Format("{0}"))
              .Line(line => line.Visible(false))
              .Max(30000)
              )
              .Tooltip(tooltip => tooltip
                  .Visible(true)
                  .Format("{0}")
              )
        )

     

    I would like to see 3 lines, on the X axis the dates showing only the year and the month, on the Y axis the amount field.

    Can you please help me, why my chart is totally empty?

    Many thanks

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1143 posts

    Posted 10 Oct Link to this post

    Hello, Attila,

    Thank you for the provided code.

    After inspecting it the code looks good. There is only a syntax difference from the categoryAxis and the valueAxis, but I can assume that it is a copy paste issue as otherwise, the code should not compile.

    I can suggest checking our demo using a similar approach and inspect the response from the server and compare it to the one in the real application:

    http://demos.telerik.com/aspnet-mvc/line-charts/remote-data-binding



    The demo is also available in the runnable sample application:

    https://docs.telerik.com/aspnet-mvc/introduction#sample-application

    View - Views/Line_Chart/Remote_Data_Bindings.cshtml
    Controller - Controllers/Line_Chart/Remote_Data_BindingController.cs

    If additional assistance is needed, please provide a fully runnable example and I will gladly assist.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top