kvs
kvs

Reputation: 466

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

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

Upvotes: 1

Views: 2177

Answers (1)

boniestlawyer
boniestlawyer

Reputation: 707

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;
  }
}

Upvotes: 3

Related Questions