Remote Data Binding

[Artem]

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?

[Georgi]

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