Question

I have this issue with the KendoUI Column Chart. I have a set of JSON data that is being returned from a service. The JSON is pretty simple and straightforward.

When I bind this data to the Kendo Chart, without grouping, it works perfect. However, when I do bind it using grouping, it puts data in the wrong columns. I will show you screen shots first, and then a link to the JSFiddle with a working example due to the size of the JSON.

Example 1 with NO grouping:

All the data is displayed correct, and the columns are showing the right category with the tooltip.

Example 2 WITH grouping:

As you can see, the grouping looks right, however they are not. If you mouse over the 4th column (1st one is a 0) under the category CCLF, you will see that it shows GINN, which is in the 3rd category for the chart.

Here is the working example of the problem:

http://jsfiddle.net/v8tsQ/2/

On the JSFiddle, if you go to the section that creates the kendo.data.DataSource() you will see the “group” option which you can remove to get the first chart result.

Any thoughts to what I need to do to ensure the columns are showing up under the right categories?

Answer 1

Your data is displaying in the order that you have it in the DataSource. If you sort the DataSource, the graph should display how you want it.

http://jsfiddle.net/v8tsQ/10/

var ds = new kendo.data.DataSource({
    data: dr,
    group: { field: "FindingQuarter"},
    sort: [{field: "FindingQuarter", dir: "asc"}, 
    {field: "SectionName", dir: "asc"}]

})

The names of the x-axis were displaying the first item in each set.