Skip to content

Latest commit

 

History

History
144 lines (118 loc) · 4.85 KB

chart-bind-to-dynamic-series.md

File metadata and controls

144 lines (118 loc) · 4.85 KB
title description type page_title previous_url slug tags res_type
Bind Chart to Dynamic Series
Learn how to bind a Telerik UI for {{ site.framework }} Chart to dynamic series.
how-to
Binding a Chart to dynamic series
/html-helpers/charts/how-to/create-dynamic-series, /helpers/charts/how-to/create-dynamic-series
chart-bind-to-dynamic-series
chart, databound, dynamic, series
kb

Environment

Product {{ site.product }} Chart
Product Version Created with version 2024.4.1112

Description

How can I bind the 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" })
          )
    )

{% if site.core %}

    @addTagHelper *, Kendo.Mvc
    @{ 
        var categories = new string[] { "A", "B", "C" };
    }

    @model TelerikAspNetCoreApp4.Models.MyViewModel
    
    <kendo-chart name="chart">
        <category-axis>
                <category-axis-item name="series-axis">
                    <line visible="false" />
                </category-axis-item>
                <category-axis-item name="label-axis" categories="categories">
                </category-axis-item>
            </category-axis>
        <series>
            @foreach (var def in Model.Series)
            {
                <series-item type="ChartSeriesType.Column"
                             name="@def.Name"
                             stack="@def.Stack"
                             data="@def.Data">
                    <labels background="transparent" visible="true">
                    </labels>
                </series-item>
            }
        </series>
    </kendo-chart>

{% endif %}

    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 complete example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. {% if site.core %}You can use this as a starting point to configure the same setup in an ASP.NET Core project.{% endif %}

More {{ site.framework }} Chart Resources

  • [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})

  • [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)

{% if site.core %}

{% else %}

See Also