Multiple series names

3 posts, 0 answers
  1. Etra
    Etra avatar
    2 posts
    Member since:
    Apr 2012

    Posted 04 Feb 2015 Link to this post


    I am trying to set the name for multiple series on the legend of the chart, but I do not want to set them via code, I want to retreive it from the server side.
    My .aspx code is:

     <div id="divChart">
                .CategoryAxis(axis => axis.Labels(l => l.Rotation(90)).Type(ChartCategoryAxisType.Date).Date().MajorGridLines(lines => lines.Visible(true)).BaseUnit(ChartAxisBaseUnit.Minutes).BaseUnitStep(60).MinorGridLines(lines => lines.Visible(false)))
                .Tooltip(tooltip => tooltip.Visible(true))
                .Series(s => s.Line("command0", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("command1", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("command2", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("command3", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("command4", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("energy_consumption", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("energy_cost", "instant").Style(ChartLineStyle.Step))
                .Series(s => s.Line("qos", "instant").Style(ChartLineStyle.Step))
                .Legend(l => l.Position(Kendo.Mvc.UI.ChartLegendPosition.Bottom))
                .DataSource(ds => ds.Read(read =>  read.Action("GetPLValues", "Optimizations").Type(HttpVerbs.Get)))

    How can I set those names from the server side code?

    Thank you in advance

  2. Daniel
    Daniel avatar
    2230 posts

    Posted 06 Feb 2015 Link to this post


    I am not sure if I understand the question but you should set the series name option to set the name in the legend:
    .Series(s => s.Line("command0", "instant").Name("command0 name").Style(ChartLineStyle.Step))
    If the name should be set dynamically based on the loaded data then you can use the dataBound event to change the options:
    function onDataBound(e) {
        var data =;
        var series = this.options.series;
        for (var i = 0; i < series.length; i++) {
            series[i].name = getNameForField(series[i].field, data);

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Etra
    Etra avatar
    2 posts
    Member since:
    Apr 2012

    Posted 09 Feb 2015 in reply to Daniel Link to this post

    Thank you, it worked.

    Just for completing your solution, on the definition of the Html.Kendo().Chart y added:
    .Events(events => events.DataBound("onDataBound"))

Back to Top