Legend Sort Order Issue

4 posts, 0 answers
  1. Nate
    Nate avatar
    23 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    Hey Guys,

    First, I want to say you guys did a great Job on Kendo UI, we are planing to upgrade from MVC extension to Kendo.
    My issue is on the grouped line chart the legend is taking the default sort of the group data and showing as the attached image.
    Is there a way to control the order on the legend?

    <%= Html.Kendo().Chart<TestOrders>()
            .Name("Hl7Line")
            .Title("Number of NEW ORDERS PER HOUR BY MONTH  -  RUNNING TOTAL")
            .ChartArea(chartArea => chartArea.Background("transparent"))
            .Legend(legend => legend.Position(Kendo.Mvc.UI.ChartLegendPosition.Right))
            .DataSource(ds => ds
                .Read(read => read.Action("AJaxOrdersPerHourByMonth", "Dashboard"))
                .Group(group => group.Add(m => m.MonthName))
                .Sort(sort => sort.Add(m => m.Hour).Ascending())
            )
            .Series(series => series
                .Line(model => model.NumberOfOrders)
                .GroupNameTemplate("#= group.value #")
            )
            .CategoryAxis(axis => axis
                .Categories("12AM", "1AM", "2AM", "3AM", "4AM", "5AM", "6AM", "7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM")
                .Title("Hours of Day")
            )
            .ValueAxis(axis => axis
                .Numeric().Labels(labels => labels.Format("{0}"))
                .Title("Number of Orders")
            )
            .Tooltip(t => t.Visible(true).Format("{0}").Template("#=series.name# (#= value#)"))
            .Transitions(true)
        %>
  2. Nate
    Nate avatar
    23 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    Anybody has an answer or workaround for this issue?
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 19 Sep 2012 Link to this post

    Hi Netsanet,

     

    You can set custom order of the groups for example by creating another field in your model which holds custom order number. Then you should create grouping by this field and get the label for the groups from the old field -  in your case MonthName. 


    E.g.:

    new StockDataPoint {
        Close = 544.1,
        Volume = 3522997,
        Open = 540,
        High = 544.1,
        Low = 538.51,
        MonthName = "Feb",
        //New order field
        MonthNumber = 2
    }

    .DataSource(dataSource => dataSource
                .Read(read => read.Action("_StockData", "Scatter_Charts"))
                .Group(group => group.Add(model => model.MonthNumber))
            )
            .Series(series => {
                series.Line(model => model.Close)
                    .Name("close")
                    .GroupNameTemplate("#= group.items[0].MonthName #");


    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Nate
    Nate avatar
    23 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    Hey Vladimir you rock!! it solved my problem, i didn't know you could use "group.items[0]" inside the the template.

    Thanks
Back to Top