Chart Line series not rendered correctly

**marcoas** · 1 Mar 2013 8:11 PM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1

Browser versions tested against:

Chrome Versión 25.0.1364.97 m

DOCTYPE tested against:

<html xmlns="http://www.w3.org/1999/xhtml">

Description:

(Translated by Google)
The series marks do not align with the X axis points.
In my tests, I always used integers numbers.

Test Case:

Code:

<div id="gpf"></div>

<script>
  chart([{"O_Etap":10,"O_Fase":10,"Jorn":1,"gf1":13,"gf2":9,"gtot":22},{"O_Etap":10,"O_Fase":10,"Jorn":2,"gf1":18,"gf2":13,"gtot":31},{"O_Etap":10,"O_Fase":10,"Jorn":3,"gf1":17,"gf2":16,"gtot":33},{"O_Etap":10,"O_Fase":10,"Jorn":4,"gf1":9,"gf2":6,"gtot":15},{"O_Etap":10,"O_Fase":10,"Jorn":5,"gf1":12,"gf2":7,"gtot":19},{"O_Etap":10,"O_Fase":10,"Jorn":6,"gf1":14,"gf2":11,"gtot":25},{"O_Etap":10,"O_Fase":10,"Jorn":7,"gf1":14,"gf2":14,"gtot":28},{"O_Etap":10,"O_Fase":10,"Jorn":8,"gf1":15,"gf2":8,"gtot":23},{"O_Etap":10,"O_Fase":10,"Jorn":9,"gf1":12,"gf2":4,"gtot":16},{"O_Etap":10,"O_Fase":10,"Jorn":10,"gf1":14,"gf2":9,"gtot":23},{"O_Etap":10,"O_Fase":10,"Jorn":11,"gf1":13,"gf2":9,"gtot":22},{"O_Etap":10,"O_Fase":10,"Jorn":12,"gf1":7,"gf2":9,"gtot":16},{"O_Etap":10,"O_Fase":10,"Jorn":13,"gf1":11,"gf2":8,"gtot":19},{"O_Etap":10,"O_Fase":10,"Jorn":14,"gf1":23,"gf2":5,"gtot":28},{"O_Etap":10,"O_Fase":10,"Jorn":15,"gf1":16,"gf2":13,"gtot":29},{"O_Etap":10,"O_Fase":10,"Jorn":16,"gf1":21,"gf2":4,"gtot":25},{"O_Etap":10,"O_Fase":10,"Jorn":17,"gf1":9,"gf2":12,"gtot":21},{"O_Etap":10,"O_Fase":10,"Jorn":18,"gf1":23,"gf2":14,"gtot":37},{"O_Etap":10,"O_Fase":10,"Jorn":19,"gf1":14,"gf2":19,"gtot":33}]);

function chart( data ){
    
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['O_Etap', 'O_Fase', 'Jorn', 'gf1', 'gf2', 'gtot'],
    data: data
});

var newDIV = Ext.DomHelper.append(
  Ext.get('gpf'),{
    tag:'div'
  });

Ext.create('Ext.chart.Chart', {
  renderTo: newDIV,
  width: 700,
  height: 300,
  store: store,
  legend: {
    position: 'right',
    boxFill:'#dedede'    
  },
  axes: [{
    title: 'Goles',
    type: 'Numeric',
    position: 'left',
    fields: ['gtot'],
    grid: true,
    minimum: 0
  },{
    title: 'Fecha',
    type: 'Numeric',
    position: 'bottom',
    fields: ['Jorn'],
    minimum: 1,
    grid: true
  }],    
  series: [{
    type: 'line',
    axis: 'left',
    title: 'Goles Locales',
    highlight: true,
    xField: 'Jorn',
    yField: 'gf1',
    style: {
      stroke: '#FFF'
    },
    tips: {
      trackMouse: true,
      width: 180,
      renderer: function(storeItem, item) {
        this.setTitle('Fecha ' + storeItem.get('Jorn') + ' con ' + storeItem.get('gf1') + ' goles locales');
      }
    },
    markerConfig: {
      type: 'circle',
      radius: 4,
      'fill': '#f00'
    }
 },{
    type: 'line',
    axis: 'left',
    title: 'Goles Visitantes',
    highlight: true,
    xField: 'Jorn',
    yField: 'gf2',
    style: {
      stroke: '#00F'
    },
    tips: {
      trackMouse: true,
      width: 180,
      renderer: function(storeItem, item) {
        this.setTitle('Fecha ' + storeItem.get('Jorn') + ' con ' + storeItem.get('gf2') + ' goles visitantes');
      }
    },
    markerConfig: {
      type: 'circle',
      radius: 4,
      'fill': '#FFF'
    }
  },{
    type: 'line',
    axis: 'left',
    title: 'Goles Totales',
    highlight: true,
    xField: 'Jorn',
    yField: 'gtot',    
    markerConfig: {
      type: 'circle',
      radius: 4,
      'fill': '#FF0'
    },
    tips: {
      trackMouse: true,
      width: 180,
      renderer: function(storeItem, item) {
        this.setTitle('Fecha ' + storeItem.get('Jorn') + ' con ' + storeItem.get('gtot') + ' goles totales');
      }
    },
    style: {
      stroke: '#F05'
    },
  }]
});  

}

</script>

Operating System:

Win 7 Ultimate

**mitchellsimoens** · 2 Mar 2013 10:59 AM

I don't see you doing Ext.onReady.

**marcoas** · 3 Mar 2013 4:16 AM

(Translated by Google)
That piece of code is received from an AJAX request (load method), which automatically loads a PANEL.

That's why you do not see a onReady

**marcoas** · 7 Mar 2013 1:54 AM

any help?

**marcoas** · 3 Apr 2013 2:19 PM

Bump!

Sorry for this....I don't find solution to this problem

Chart Line series not rendered correctly

Thread Tools

Search Thread

Display

Chart Line series not rendered correctly

Chart Line series not rendered correctly

Tags for this Thread