Category names in line chart with dynamic series

[Brian]

Using this link: https://docs.telerik.com/aspnet-mvc/helpers/chart/how-to/create-dynamic-series#create-view-model-bound-dynamic-series

I managed to get a working chart with multiple series, but I can't get the category names at the same time.  From the link it appears that I should be able to provide an IEnumerable (or something?) to give the list of category names (see the commented part in the code I provide below) but when I do this I just get [object] as the result.  The data type is a List<string>.

 

@(Html.Kendo().Chart(Model.ApplicationStepsByDayResults.ValuesForLineChart)
    .Name("applicationStepsByDay")
    .Legend(legend => legend.Visible(true))
    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.Line().Style(ChartLineStyle.Smooth)
    )
    .CategoryAxis(axis => axis
        .Categories(Model.ApplicationStepsByDayResults.CategoryNames) // <- from example looks like I can add names here
        .MajorGridLines(lines => lines.Visible(false))
    )
    .Series(series =>
    {
        foreach(var s in Model.ApplicationStepsByDayResults.ValuesForLineChart)
        {
            series.Line(s.Points).Name(s.Name);
        }
    })
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Format("{0}"))
        .Line(lines => lines.Visible(false))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Shared(true)
        .Format("{0}")
    )
)

 

I am not sure how to use the .Categories(a => a.Categories.... to insert the category names when they are dynamic.

 

As a side note I can get the category names to appear is I create a field for it for each series point and use the .CategoryField(xxx) function when setting up the series but then I lose the data points.

 

One last question, I would love to be able to see the docs for these functions.  Visual studio indicates there are overloads but the UI does not provide them and I can't find any docs on the telerik site.  It would be easier to sort this out on my own if there was documentation for the MVC helper methods.

 

Thanks,

Brian

 

 

[Tsvetina]

Hi Brian,

Have you seen the example project linked in the help article that you are working with:
Dynamic Series Project

It contains the full implementation of this scenario. Categories are declared like this:

public class MyViewModel
{
    public MyViewModel()
    {
        Series = new List<MySeriesData>();
        Categories = new List<string>();
    }

    public List<MySeriesData> Series
    {
        get;
        private set;
    }

    public List<string> Categories
    {
        get;
        private set;
    }
}

and populated like this:

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);
}

I am also attaching an ASP.NET Core version of the sample project, so you can use it as a reference.

Can you show how the list of categories is declared and populated in your project? You mentioned that you are using a List<string> and this is what the Categories property of the Chart expects. So, there is probably just a small issue in the coding or the hierarchy of properties in your model.

Regards,
Tsvetina
Progress Telerik

[Brian]

Thanks for your response, the demo project provided has the same issue that my project does in that when you provide the List<string> it concatenates the values with a comma (like it is calling .Join).

In the attached image, captured from the provided example project, you'll see 'A,B,C' as the category label for the first series rather than one letter for each series.  I get the same result in my own project.

 

 

[Tsvetina]

Hello Brian,

Sorry about this, it seems I overlooked the problem when I converted the project. In the Core Grid it seems that the categories need to be passed as an array, in order to get the initialization script generated correctly.

Here are two ways to make this work:
1) Keep the current implementation and call ToArray on the Categories list:

.CategoryAxis(axis => axis
   .Categories(Model.Categories.ToArray())
)

2) Change the model to use an array instead of a List:

public class MyViewModel
{
    public MyViewModel()
    {
        Series = new List<MySeriesData>();
    }

    public List<MySeriesData> Series
    {
        get;
        private set;
    }

    public string[] Categories
    {
        get;
        set;
    }
}

public ActionResult Index()
{
    var model = new MyViewModel();
    model.Categories = 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);
}

.CategoryAxis(axis => axis
   .Categories(Model.Categories)
)

Regards,
Tsvetina
Progress Telerik

[Brian]

Thank you! That fixed it.

 

[Nhir]

This works perfectly as expected. But now if I callback and update the chart series, how do I redraw in javascript?

[Tsvetina]

Hello Nihir,

The page model will reload only during a full page refresh, which means that the Chart will be re-created from scratch and the series will correspond to the current data. 

If you are trying to change the series list through an ajax request, this will not work automatically with this configuration. You can use the Chart setOptions method to apply a new list of series to the Chart at runtime.

Regards,
Tsvetina
Progress Telerik