New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Bind Chart to Dynamic Series

Description

How can I bind a Telerik UI for ASP.NET MVC Chart to dynamic series?

Example

    @model TelerikAspNetCoreApp4.Models.MyViewModel

    @(Html.Kendo().Chart()
          .Name("Chart")
          .Series(series => {
              foreach (var def in Model.Series) {
                  series.Column(def.Data).Name(def.Name).Stack(def.Stack);
              }
          })
          .CategoryAxis(axis => axis
             .Categories(new string[] { "A", "B", "C" })
          )
    )
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var model = new MyViewModel();
            model.Categories.AddRange(new string[] { "A", "B", "C" });

            model.Series.Add(new MySeriesData()
            {
                Name = "Foo",
                Stack = "A",
                Data = new decimal[] { 1, 2, 3 }
            });

            model.Series.Add(new MySeriesData()
            {
                Name = "Bar",
                Stack = "A",
                Data = new decimal[] { 2, 3, 4 }
            });

            model.Series.Add(new MySeriesData()
            {
                Name = "Baz",
                Stack = "B",
                Data = new decimal[] { 10, 20, 30 }
            });

            return View(model);
        }
    }

To see the full examples, refer to the GitHub repository of the sample project on dynamic series.

More ASP.NET MVC Chart Resources

See Also

In this article