Sorting and Grouping Data

[GenXisT]

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

[GenXisT]

for the above.

should be 

dataSource: data

and then

series: [{ field: "AlertTypeCount" }]

sorry...

[Danail Vasilev]

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

[GenXisT]

Great!  Thank you so much.  Worked exactly as  you stated!