Why thekendo column chart on x-axis values are getting displayed not in order

Question

JS Bin

    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="chart"></div>
        </div>
        <script>
            var internetUsers = [ {
                    "Month": "1",
                    "year": "2010",
                    "value": 1
                }, {
                    "Month": "2",
                    "year": "2010",
                    "value": 2
                }, {
                    "Month": "3",
                    "year": "2010",
                    "value": 3
                }, {
                    "Month": "4",
                    "year": "2010",
                    "value": 4

                }, {
                    "Month": "5",
                    "year": "2010",
                    "value": 5
                },
                                {
                    "Month": "6",
                    "year": "2010",
                    "value": 6
                }, {
                    "Month": "7",
                    "year": "2010",
                    "value": 7
                }, {
                    "Month": "8",
                    "year": "2010",
                    "value": 8

                },
                                {
                    "Month": "9",
                    "year": "2010",
                    "value": 9
                }, {
                    "Month": "10",
                    "year": "2010",
                    "value": 10
                }, {
                    "Month": "11",
                    "year": "2010",
                    "value": 11

                },
                                {
                    "Month": "12",
                    "year": "2010",
                    "value": 17117.00
                },
                                 {
                    "Month": "1",
                    "year": "2011",
                    "value": 12
                }, {
                    "Month": "2",
                    "year": "2011",
                    "value": 13
                }, {
                    "Month": "3",
                    "year": "2011",
                    "value": 4
                }, {
                    "Month": "4",
                    "year": "2011",
                    "value": 6

                }, {
                    "Month": "5",
                    "year": "2011",
                    "value": 24
                },
                                {
                    "Month": "6",
                    "year": "2011",
                    "value": 3
                }, {
                    "Month": "7",
                    "year": "2011",
                    "value": 35
                }, {
                    "Month": "8",
                    "year": "2011",
                    "value": 34

                },
                                {
                    "Month": "9",
                    "year": "2011",
                    "value": 22
                }, {
                    "Month": "10",
                    "year": "2011",
                    "value": 21
                }, {
                    "Month": "11",
                    "year": "2011",
                    "value": 215

                },
                                {
                    "Month": "12",
                    "year": "2011",
                    "value": 12
                }];

            function createChart() {
                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    dataSource: {
                        data: internetUsers,
                        group: {
                         field: "year"
                        },
                      sort: {
                            field: "year",
                            dir: "asc"
                        }
                    },
                    title: {
                        text: "Sales"
                    },
                    legend: {
                        position: "bottom"
                    },
                    seriesDefaults: {
                        type: "column"

                    },
                    series: [{

                        field: "value"


                    }],
                  valueAxis: {
                        labels: {
                            format: "{0}$"
                        },

                        line: {
                            visible: false
                        },
                        axisCrossingValue: 0
                    },
                    categoryAxis: {
                        field: "Month"

                    },

                    tooltip: {
                        visible: true,
                        format: "{0}%",
                        template: "#= series.name #: #= value #"
                    }
                });
            }

            $(document).ready(function() {
                setTimeout(function() {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();

                    $("#example").bind("kendo:skinChange", function(e) {
                        createChart();
                    });
                }, 400);
            });
        </script>
    </div>

http://jsbin.com/oxakup/17/edit

Answer 1

You need to sort your dataSource by month instead of year like the following:

sort: { field: "Month", dir: "asc" }

Now your months are sorting correctly based off your values, although the month data types are string instead of number, hence the reason this will now sort by 1, 10, 11, 12, 2, 3 etc..

You can work around this by fixing it in your JSON data source, but if you're unable to change that, you can use the following to format the data in the dataSource before processing:

schema: {
  data: function(response) {
    for (var i = 0; i < response.length; i++) {
      response[i].Month = new Number(response[i].Month);
    }
    return response;
  }
}