I am using asp.net mvc 5 and KendoUi charts. I want to create line chart that vertical axis is Poulation, horizantal axis is Year and for each country add series. Country List is not fixed. how can i do it?
My model is:
public class ChartDataViewModel
{
public string Country { get; set; }
public int Poulation { get; set; }
public int Year { get; set; }
}
my Controller:
public ActionResult ChartPage()
{
var model = GetData().Select(item => new ChartDataViewModel
{
Year = item.Year,
Population = item.Population,
Country = item.Country,
}).ToList();
return View(model);
}
My Razor View:
@(Html.Kendo().Chart(Model)
.Name("mychart")
.Series(series =>
{
foreach (var item in Model.Select(item => item.Country).Distinct().ToList())
{
series.Line(m => m.Country).Field(item).CategoryField("Year");
}
})
.CategoryAxis(axis => axis
.Labels(labels => labels.Padding(0).Rotation(0))
.Categories(m=> m.Year)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Visible(true))
.Line(line => line.Visible(true))
.Name("Poulation")
)
)