This is a migrated thread and some comments may be shown as answers.

Remote Data Binding

1 Answer 52 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Artem
Top achievements
Rank 1
Artem asked on 12 May 2017, 02:42 AM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 15 May 2017, 03:47 PM
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.
Tags
Chart
Asked by
Artem
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or