1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Braunschweig, Germany
    Posts
    18
    Answers
    1
    Vote Rating
    0
    gilaras is on a distinguished road

      0  

    Question Answered: Chart with type 'line' does not connect points...

    Answered: Chart with type 'line' does not connect points...


    Hi there,

    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 (although i disabled the labeling of the x-axis meanwhile...):

    extjs4chartproblem2.jpg
    I hardcoded the data into my store, it looks like this:
    Code:
    Ext.define('MR.store.ResultChartStore', {
      extend: 'Ext.data.Store',
      model: 'MR.model.ResultPoint',
      data: [
        {rings: 400, date: new Date(1970, 1, 1,0,0)},
        {rings: 200, date: new Date(1970, 1, 2,0,0)},
        {rings: 256, date: new Date(1970, 1, 3,0,0)},
        {rings: 356, date: new Date(1970, 1, 4,0,0)},
        {rings: 375, date: new Date(1970, 1, 5,0,0)},
        {rings: 378, date: new Date(1970, 1, 6,0,0)},
        {rings: 352, date: new Date(1970, 1, 8,0,0)},
        {rings: 107, date: new Date(1970, 1, 9,0,0)},
        {rings: 254, date: new Date(1970, 1, 10,0,0)},
        {rings: 285, date: new Date(1970, 1, 11,0,0)},
        {rings: 100, date: new Date(1970, 1, 12,0,0)},
        {rings: 0, date: new Date(1970, 1, 13,0,0)},
        {rings: 248, date: new Date(1970, 1, 14,0,0)},
        {rings: 354, date: new Date(1970, 1, 15,0,0)},
        {rings: 398, date: new Date(1970, 1, 16,0,0)},
        {rings: 400, date: new Date(1970, 1, 17,0,0)},
        {rings: 255, date: new Date(1970, 1, 18,0,0)},
        {rings: 128, date: new Date(1970, 1, 19,0,0)},
        {rings: 100, date: new Date(1970, 1, 20,0,0)}
      ]
    });
    My chart looks like this:
    Code:
    {
          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: 'Zeit',
              type: 'Time',
              label: {
                renderer: function() {
                  return '';
                }
              },
              position: 'bottom',
              fields: ['date']
            }
          ],
          series: [
            {
              type: 'line',
              hightlight: {
                size: 7,
                radius: 7
              },
              axis: 'left',
              smooth: true,
              fill: true,
              xField: 'date',
              yField: 'rings',
              markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
              }
    
            }
          ]
        }
    I really can't find my mistake, and I read documentation again and again and went along the kind of "tutorial" in the docs ... But it just won't work :/

    Anyone can spot my mistake and tell me what to do to get it working? :-)

    Thanks in advance and greetz
    gilaras

    Edit: I think it draws a line through each point, but it doesn't connect them ... is this right or am I looking in the wrong direction?
    Last edited by gilaras; 26 Jan 2012 at 3:27 AM. Reason: see "Edit:"

  2. axis: 'left'

    has to be

    axis: ['left', 'bottom']

  3. #2
    Sencha User
    Join Date
    Dec 2011
    Location
    Braunschweig, Germany
    Posts
    18
    Answers
    1
    Vote Rating
    0
    gilaras is on a distinguished road

      0  

    Default Maybe someone will read this some time and it may help..

    Maybe someone will read this some time and it may help..


    axis: 'left'

    has to be

    axis: ['left', 'bottom']

Tags for this Thread