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.

Data In Chrome Data in Mozilla

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

Am I missing something obvious, or is the SortOrder in `{ "field": "SortOrder", dir: "asc" }` undefined? Judging by the thread you linked to, SortOrder should be replaced with either Category or Value. — Sculper, Jul 13 '15 at 23:38
Please put your code into a live demo so that we can help to deal it. — North, Jul 14 '15 at 02:34
If I replaced SortOrder with Category it is sorted by alphabetic order of the months. — Aslam Jiffry, Jul 14 '15 at 04:57

score 1 · Accepted Answer · answered Jul 14 '15 at 04:57

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.

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

1 Answers1