Search code examples
javascriptextjschartsextjs4extjs-chart

ExtJs time chart showing incorrect labels


What's wrong with ExtJS 4.0.7 charts? In this fiddle: http://jsfiddle.net/JPEEv/377/

var store = Ext.create('Ext.data.Store', {
  storeId: 'MyStore',
  fields: [{
    name: 'date', type: 'date'
  },{
    name: 'duration', type: 'float'
  }],
  data: [
    { date: new Date(2014,1,1), duration: 0.3}, 
    { date: new Date(2014,1,2), duration: 0.2}, 
    { date: new Date(2014,1,3), duration: 1.5}, 
    { date: new Date(2014,1,4), duration: 0.7}
  ]
});

var chart = Ext.widget('chart', {
  renderTo: Ext.getBody(),
  width: 800,
  height: 400,
  store: 'MyStore',
  axes: [{
    type: 'Time',
    position: 'bottom',
    fields: ['date'],
    dateFormat: 'd.M'
  }, {
    type: 'Numeric',
    position: 'left',
    fields: ['value']
  }],
  series: [{
    type: 'column',
    axis: ['left'],
    xField: 'date',
    yField: 'duration'
  }]
});
  1. there are 5 date labels instead of 4
  2. the third value is 1.5, but the limit of y axis is not adjusted
  3. is there a way to place labels in the gaps between the labels?

Solution

    1. You used type: 'Time' for your X-axis which builds a continuous time axis and puts labels at arbitrary places. If you want 1 label per column, use type: 'Category' and format string values instead of date values.
    2. For the Y-axis replace fields: ['value'] by fields: ['duration'] so that it has the same name as your field in the store.
    3. The framework doesn't provide such configuration, I haven't found it in their documentation.