title: Why thekendo column chart on x-axis values are getting displayed not in order
body: <p>
  
  
     
    
    JS Bin
    
    
    
    
    </p>
  
  <p>
  </p>
  
  <pre><code>    &lt;div id="example" class="k-content"&gt;
          &lt;div class="chart-wrapper"&gt;
              &lt;div id="chart"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
              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);
              });
          &lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  
  <a href="http://jsbin.com/oxakup/17/edit" rel="nofollow">http://jsbin.com/oxakup/17/edit</a></p>