Bind Chart to Dynamic Series
Description
How can I bind a Telerik UI for ASP.NET Core 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);
}
}
@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>
To see the full examples, refer to the GitHub repository of the sample project on dynamic series.