Kendo Chart shows Incorrect results on Google Chrome. But correct result in Firefox?

Question

I have a report which generates chart.I am showing this report on pre defined data set.

First Image is from chrome browser.Second is from firefox.Firefox shows the correct data. But chrome is showing incorrect. you can see the month order.

I went through This question in StackOverflow. still I got the result similar to first image. anyone came up with these sort of issue ??

  setDataSource: function (jsonData) {
            myDataSource = new kendo.data.DataSource({
                data: jsonData,
                group: [{ "field": "Series" }],
                sort: [{ "field": "Series", dir: "asc" },  { "field": "SortOrder", dir: "asc" }],
                schema: {
                    model: {
                        fields: {
                            Category: {
                                "type": "string"
                            },
                            Series: {
                                "type": "number"
                            },
                            Value: {
                                "type": "number"
                            }
                        }
                    }
                }
            });
        },

        setupChart: function (id) {
            $("#chart" + id).kendoChart({
                dataSource: myDataSource,
                title: {
                    text: "@Lables.LBL_PlanningProjection"
                },
                legend: {
                    position: "top"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line"
                },
                series: [{
                    field: "Value"
                }],
                valueAxis: {
                    labels: {
                        format: "{0:N0}"
                    },
                    line: {
                        visible: true
                    },
                    majorUnit: 10000
                },
                categoryAxis: {
                    field: "Category",
                    labels: {
                        template: "#: value #",
                        rotation: 0
                    },
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}",
                    template: "#= series.name #: #= value #"
                }
            });
        }

Answer 1

This is a problem occurs with Chrome's implementation of Array.sort; You can fix it by sorting the data source explicitly here.

And as I can see in your code, there is a field named SortOrder here. I think in the original code that you have get this, used that field to sort the dataset explicitly.

Check your Controller or Back-End code inorder to find the SortOrder property. If not you can add that in your back-end logic to sort your dataset explicitly according to the month order.

As I can see you can't do a explicit sort here by adding following line.

 sort: [{ "field": "Series", dir: "asc" },  { "field": "Category", dir: "asc" }],

Because it 'll get your data set sorted as the first image.

Apr , Aug, Dec , Feb , Jan , Jul , Jun, Mar , May, Nov , Oct, Sep

I think that's why the original code has a property called SortOrder.