Question

I wanna use a chart in my new ExtJS4 application.
The axes render just fine, and I get a line, too; but it does not make any sense. Here’s a screenshot of my problem:

So as you can see, I got the axes just fine and the data left of the chart should be drawn; but obviously, it doesn’t really do what I expected 😉

I tried to hardcode the data, so here’s my store:

Ext.define('MR.store.ResultChartStore', {
 extend: 'Ext.data.Store',
 model: 'MR.model.ResultPoint',
 data: [
   {rings: 400, date: new Date(1970, 1, 1)},
   {rings: 398, date: new Date(1970, 1, 2)},
   {rings: 275, date: new Date(1970, 1, 3)}
 ]
});

The referenced model looks like this:

Ext.define('MR.model.ResultPoint', {
 extend: 'Ext.data.Model',
 fields: ['rings', 'date']
});

And finally my chart looks like this:

{
  xtype: 'chart',
  width: 600,
  height: 300,
  theme: 'Green',
  store: 'ResultChartStore',
  axes: [
    {
      title: 'Ringe',
      type: 'Numeric',
      position: 'left',
      fields: ['rings'],
      minimum: 0,
      maximum: 400
    },
    {
      title: 'Datum',
      type: 'Time',
      position: 'bottom',
      fields: ['date'],
      dateFormat: 'd.m.Y'
    }
  ],
  series: [
    {
      type: 'line',
      xField: 'date',
      yField: 'rings'
    }
  ]
}

Can anybody spot my mistake? I just can’t seem to find it, in my eyes it looks just like the examples in the docs …

Greetz and thanks in advance
gilaras

————————————-UPDATE—————————————

I guess I know where the problem is, but I don’t know how to solve it :-/
When I add more data to the store, the chart looks like this:

So the problem seems to be that Ext does not “know” how to connect my points…
In my opinion it finds a point, draws a line through it and repeats it for every point specified in my store.

My chart looks like this now:

{
  xtype: 'chart',
  width: 600,
  height: 300,
  theme: 'Base',
  store: 'ResultChartStore',
  axes: [
    {
      title: 'Ringe',
      type: 'Numeric',
      position: 'left',
      fields: ['rings'],
      minimum: 0,
      maximum: 400,
      minorTickSteps: 1,
      grid: {
        odd: {
          opacity: 1,
          fill: '#ddd',
          stroke: '#bbb',
          'stroke-width': 0.5
        }
      }
    },
    {
      title: 'Datum',
      type: 'Time',
      position: 'bottom',
      fields: ['date'],
      dateFormat: 'd'
    }
  ],
  series: [
    {
      type: 'line',
      xField: 'date',
      yField: 'rings',
      highlight: {
        size: 7,
        radius: 7
      },
      markerConfig: {
        type: 'cross',
        size: 4,
        radius: 4,
        'stroke-width': 0
      }
    }
  ]
}

Anyone got an idea what I may be doing wrong?

Answer 1

First, you’re missing an important configuration in your series. The axis config binds the points in your store to the axes on the chart. The Sencha documentation on this config is misleading, however; Sencha says the config takes a string when in fact it takes either a string or an array of strings. In your case, use axis: ['left', 'bottom'].

Second (and I’m less sure about this), you might try using the fully qualified store name in your chart config. So, 'MR.store.ResultChartStore' instead of just 'ResultChartStore'. Although you appear to be getting the points just fine, I wouldn’t be surprised if there was some sort of side-effect.

Third, the Time axis can be a bit buggy. If you’re having trouble with it, try setting it to Category and converting the date to a string. The referenced question above does state that Category axes are bugged too, but I’ve personally not experienced any problems with them.