Sorting and Grouping Data

4 posts, 1 answers
  1. GenXisT
    GenXisT avatar
    8 posts
    Member since:
    Apr 2016

    Posted 18 Jul Link to this post

    Hi, what am I doing wrong here?  I can get the data out properly, but it won't sort.  It seems to work the same in both MVC (razor) and in javascript.
    It should have all the names (Resource) in alpha order... but it seems to be sorting by the PriorityColorString

    MVC

    @(Html.Kendo().Chart<Model>()
                  .Name("Resources")
                  .Title("Resource")
                    .Legend(leg => leg.Visible(false))
                  .DataSource(ds => ds.Read(
                          read => read.Action("GetAlertResources", "Hierarchy"))
                              .Group(grp =>
                              {
                                  grp.Add(x => x.AlertTypeCount);
                              }
                            ).Sort(x => x.Add(srt => srt.Resource)))
                            //)
                  .ChartArea(chart => chart
                      .Width(600).Height(600))
                  .SeriesDefaults(seriesDefaults =>
                    seriesDefaults
                    .Bar().Gap(0)
                    .Stack(true))
                  .Series(series =>
                  {
                      series.Bar(x => x.AlertTypeCount)
                          .Labels(lab => lab.Position(ChartBarLabelsPosition.Center).Opacity(0).Visible(true))
                          .Field("AlertTypeCount")
                          .CategoryField("Resource")
                          .ColorField("ColorField");
                  })
                    .CategoryAxis(ct => ct.MajorGridLines(maj => maj.Visible(false)))
                  .Tooltip(tooltip => tooltip
                      .Visible(true)
                          .Template("<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>" +
                                    "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>" +
                                      "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #")
          ))

    javascript:

    var data =
    [
    { AlertTypeCount:1,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Albert },
    { AlertTypeCount:6,ColorField:"#BCBD22",ColorText:"2=Medium",PriorityColorString:"2",Resource:Simon },
    { AlertTypeCount:12,ColorField:"#FF7F0E",ColorText:"4=Other",PriorityColorString:"4",Resource:Theodore },
    { AlertTypeCount:9,ColorField:"#BCBD22",ColorText:"3=Low",PriorityColorString:"3",Resource:Albert },
    { AlertTypeCount:30,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Albert },
    { AlertTypeCount:10,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Theodore },
    { AlertTypeCount:3,ColorField:"#1F77B4",ColorText:"2=Low",PriorityColorString:"3",Resource:Simon },
    { AlertTypeCount:1,ColorField:"#1F77B4",ColorText:"3=Low",PriorityColorString:"3",Resource:Pedro },
    { AlertTypeCount:4,ColorField:"#BCBD22",ColorText:"2=Medium",PriorityColorString:"2",Resource:Marvin }
    ]
     
    $("#chart").kendoChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "/Hierarchy/GetAlertResources",
                            dataType: "json"
                        }
                    },
                    group:
                    [
                        { field: "AlertTypeCount" }
                    ],
                    sort:
                    [
                        { field: "Resource", dir: "asc" },
                    ]
                },
                chartArea: {
                    width: 600,
                    height: 600
                },
                title: {
                    align: "left",
                    text: "Resources"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar",
                    gap: 0.1,
                    stack: true
                },
                series: [{
                    field: "PriorityColorString",
                    categoryField: "Resource",
                    colorField: "ColorField",
                    labels: {
                        visible: true,
                        opacity: 0,
                        position: "center"
                    }
                }],
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>" +
                            "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>" +
                            "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #"
                }
            });

  2. GenXisT
    GenXisT avatar
    8 posts
    Member since:
    Apr 2016

    Posted 18 Jul Link to this post

    for the above.

    should be 

    dataSource: data

    and then

    series: [{ field: "AlertTypeCount" }]

    sorry...

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 21 Jul Link to this post

    Hi,

    This is so because the grouping overrides the sorting. You can handle it like that:

    dataBound: function(e) {
      var axis = e.sender.options.categoryAxis;
      axis.categories = axis.categories.sort();
    },

    A fully runnable sample is available in this dojo - http://dojo.telerik.com/OWonI

    You can read more information about that specific case in this article - http://docs.telerik.com/kendo-ui/controls/charts/how-to/sort-category-groups

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. GenXisT
    GenXisT avatar
    8 posts
    Member since:
    Apr 2016

    Posted 21 Jul Link to this post

    Great!  Thank you so much.  Worked exactly as  you stated!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready