PDA

View Full Version : Sencha Line Chart Issue



ranjan12345
17 Sep 2014, 6:34 AM
I am using Line Chart (ExtJs Version 4.2) Bellow is the source code for that.Is there any way to display the label group by YEAR in X-Axis.I tried using label render-er function that did not work

Any help is much appreciated.

Ext.define('MyApp.view.page.MyChart', {
extend : 'Ext.panel.Panel',
overflowY : 'auto',
layout : 'fit',
height : 150,
alias : 'widget.my-line-chart',
initComponent : function() {
var me = this;
var myLineChart = Ext.create('Ext.chart.Chart', {
animate : false,
shadow : false,
store : 'line-chart-store',
axes : [ {
type : 'Numeric',
position : 'left',
fields : ['ySeries'],
title : false,
minorTickSteps : 1,
grid: true,
minimum: 0,
label: {
font:'11px Arial, Helvetica, sans-serif'
}
}, {
type: 'Time',
position: 'bottom',
fields: ['xSeries'],
dateFormat: 'M Y',
step: [Ext.Date.MONTH,6],
minorTickSteps : 1,
label:{
font:'11px Arial, Helvetica, sans-serif'
}

}],
series : [{
type : 'line',
axis : 'left',
xField : 'xSeries',
yField :['ySeries'],
smooth: true,
markerConfig: {
type: 'circle',
size: 2,
radius: 2,
'stroke-width': 0
}
}]
});
this.items =[myLineChart];
me.callParent(arguments);
}
});

scottmartin
17 Sep 2014, 7:05 AM
Renderer is not going to change how it groups, but only how it displays. You would need to convert that data first at the store.

See 'convert' to create calculated field that is by year.
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Field-cfg-convert