Line chart binding to list of custom class

[Attila]

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

[Stefan]

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