Remote Data Binding

2 posts, 1 answers
  1. Artem
    Artem avatar
    2 posts
    Member since:
    Apr 2017

    Posted 11 May 2017 Link to this post

    Hello,

    I try create a Stacked chart with remote data

    view model:

    public class PerformanceChartViewModel
        {
            public double[] Zero { get; set; }
            public double[] Standart { get; set; }
            public double[] Premium { get; set; }
            public double[] PremiumPlus { get; set; }
            public string[] Categories { get; set; }
        }

    Controller action:

    public ActionResult UpdateChart()
            {
                var model = new PerformanceChartViewModel();
                model.Zero = new[] {1.0, 13, 12, 10};
                model.Standart = new[] {2.0, 13, 12, 10};
                model.Premium = new[] {3.0, 13, 12, 10};
                model.PremiumPlus = new[] {4.0, 13, 12, 10};
                model.Categories = new[] {"a", "b", "c", "d"};
                return Json(model);
            }

    View:

    @(Html.Kendo().Chart<PerformanceChartViewModel>()
          .Name("performanceChart")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom)
          )
          .DataSource(ds => ds.Read(read => read.Action("UpdateChart", "Dashboards")))
          .SeriesDefaults(seriesDefaults =>
              seriesDefaults.Bar().Stack(ChartStackType.Stack100)
          )
          .Series(series => {
              series.Bar(m => m.Zero).Name("Zero").Color("#f82831");
              series.Bar(m => m.Standart).Name("Standart").Color("#00ae58");
              series.Bar(m => m.Premium).Name("Premium").Color("#ffde56");
              series.Bar(m => m.PremiumPlus).Name("Premium Plus").Color("#033e7b");
          })
          .CategoryAxis(axis => axis
              .Categories(m => m.Categories)
              .MajorGridLines(lines => lines.Visible(false))
          )
          .ValueAxis(axis => axis
              .Numeric()
              .Line(line => line.Visible(false))
              .MajorGridLines(lines => lines.Visible(true))
          )
          .Tooltip(tooltip => tooltip
              .Visible(true)
              .Template("#= series.name #: #= value #")
          )
          )

     

     

    But chart is empty, could You help with it?

  2. Answer
    Georgi
    Admin
    Georgi avatar
    649 posts

    Posted 15 May 2017 Link to this post

    Hello Artem,

    I examined the code and noticed that the PerformanceChartViewModel you are using is not what the Chart expects. You have to change it slightly, replace the type of the properties from double arrays to single double values and create an array of the refactored PerformanceChartViewModel. 

    In the code snippet bellow you can see how the PerfomanceChartViewModel should look after the changes.

    public class PerformanceChartViewModel
        {
            public double Zero { get; set; }
     
            public double Standart { get; set; }
     
            public double Premium { get; set; }
     
            public double PremiumPlus { get; set; }
     
            public string Month{ get; set; }
        }

    And here is how the UpdateChart  sends the data.

    public ActionResult UpdateChart()
           {
               var model = new List<PerformanceChartViewModel>();
               var months = new string[] { "Jan", "Fev", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
               foreach (var month in months)
               {
                   model.Add(new Models.PerformanceChartViewModel {
                       Month = month,
                       Premium = random.Next(1, 50),
                       PremiumPlus = random.Next(1, 50),
                       Standart = random.Next(1, 50),
                       Zero = random.Next(1, 50) });
               }
               return Json(model);
           }


    Regards,
    Georgi
    Telerik by Progress
    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.
Back to Top