title: Extjs 4 Category axis grouping
body: <p>When I tried to create a scatter extjs chart I've come across such a problem:
  Category axis the names are not grouped (array elements with identic name are not treated as the same). It seems like the chart tries to draw it as a mathmatical function (with only one element of y for each x) but I deliberately chose scatter chart to avoid it.</p>
  
  <p>Tried to find the anser in google but the only result I found is just to accept...</p>
  
  <p>This is the code:</p>
  
  <pre><code>window.store_direct = Ext.create('Ext.data.JsonStore', {
  fields: ['id','line','bidder','data0','data1','data2','data3'],
  data: [
  {'line':1000.00,'id':0,'bidder':'Пок','data0':1000.00},
  
  {'line':800.00,'id':1,'bidder':'Пок','data0':800.00},
  
  {'line':950.00,'id':0,'bidder':'Брг','data1':950.00},
  
  {'line':599.00,'id':1,'bidder':'Брг','data1':599.00},
  
  {'line':1.00,'id':2,'bidder':'Брг','data1':1.00},
  
  {'line':500.00,'id':0,'bidder':'КВВ','data2':500.00},
  
  {'line':900.00,'id':0,'bidder':'Buy4','data3':900.00},
  
  {'line':600.00,'id':1,'bidder':'Buy4','data3':600.00}
  ], 
  </code></pre>
  
  <p>});</p>
  
  <pre><code>var chart = function () {
  var win = Ext.create('Ext.Window', {
      renderTo: Ext.getBody(),
      width: 500,
      height: 300,
      animate: true,
      hidden: false,
      maximizable: true,
      title: 'Процесс торгов',
      layout: 'fit',
      items:{xtype: 'chart',style: 'background:#fff;',animate: true,store: store_direct,shadow: true,legend: {position: 'right'},
      axes: [{
          type: 'Numeric',
          position: 'left',
          fields: ['data0','data1','data2','data3'],
          label: {
              renderer: Ext.util.Format.numberRenderer('0,0')
          },
          title: 'Sample Values',
          grid: true,
          minimum: 0
      }, {
          type: 'Category',
          position: 'bottom',
          fields: ['bidder'],
          title: 'Sample Metrics'
      }],
      series: [
       {
          type: 'Scatter',
          highlight: {size: 7,radius: 7},
          axis: 'left',
          xField: 'bidder',
          yField: 'data0',
          markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
      }
      , {
          type: 'Scatter',
          highlight: {size: 7,radius: 7},
          axis: 'left',
          xField: 'bidder',
          yField: 'data1',
          markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
      }
      , {
          type: 'Scatter',
          highlight: {size: 7,radius: 7},
          axis: 'left',
          xField: 'bidder',
          yField: 'data2',
          markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
      }
      , {
          type: 'Scatter',
          highlight: {size: 7,radius: 7},
          axis: 'left',
          xField: 'bidder',
          yField: 'data3',
          markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
      }
               ]
      }
  });
  </code></pre>
  
  <p>}</p>