kendo chart grouping/sorting

Question

This is an example of the issue I'm having: http://jsfiddle.net/zdanev/dRH5y/7

I'm trying to sort the bars of a kendo chart after they are grouped. I want to sort them by a third field (not the category or the group). In the example above, when I click on Sort by Score I want the second group of bars to be sorted descending (sort by CustomOrder field).

What am I missing? Thanks

var group = "Student";
var category = "Test";
var sort = "Student";

function updateChart() {
    var chart = $("#chart").data("kendoChart");

    chart.dataSource.group([{ field: group }]);
    chart.dataSource.sort([{ field: sort }]);
    chart.options.categoryAxis.field = category;

    chart.options.title = "group by " + group + ", sort by " + sort;

    chart.refresh();
}

In your chart definition, set "group":[], "sort":[], and in each of your methods set the vars as you want. You may want to add a direction var, if you want to differentiate 'asc' vs. 'desc'. As @carter pointed out, the ,group and .sort will call a refresh on the dataSource. As you had 'hard-coded' both group and sort in the definition, it takes precedence on the refresh. — gro, Jun 09 '14 at 13:34

carter · Answer 1 · 2014-05-31T18:55:14.230

http://jsfiddle.net/colbycallahan/HRpL8/

Its probably not perfect, but hopefully you get the idea. If you bind to a datasource, then you sort and group on the datasource it will trigger a refresh on the chart.

var myDataSource = new kendo.data.DataSource({
    data: jsonData,
    group: [{ "field": "Student"}],
    sort: [
        { "field": "Test", "dir": "asc" },
        { "field": "CustomOrder", "dir": "asc" }
    ],
    schema: {
        model: {
            fields: {
                Student: {
                    "type": "string"
                },
                Test: {
                    "type": "string"
                },
                Value: {
                    "type": "number"
                },
                CustomOrder: {
                    "type": "number"
                }
            }
        }
    }
});

function groupByTest_click() {    
    group = "Test";
    category = "Student";
    updateChart();
    $('#chart').data('kendoChart').dataSource.group([{ field: group }]);
    $('#chart').data('kendoChart').dataSource.sort([{ field: sort, dir: "desc" }]);    
}

kendo chart grouping/sorting

1 Answers1