PDA

View Full Version : ExtJS Bar Chart x-axis to be distributed uniformly.



VedvratSharma
22 Nov 2012, 10:41 PM
Hi,

Context:
I am using a ExtJS Bar chart for my project. The ExtJS version is 4.1.1a.

Problem:
The x-axis chart numbering should be proper.
http://www.sencha.com/forum/image/png;base64,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
40270
In the above chart, 0(Zero) - spans to 2 columns. 1 - spans 5 columns, 2 - spans 4 columns
Ideally, there needs to be only one column span for 0, 1 & 2.

The chart works fine if the values are increased above 2
40271
ISSUE : The chart needs to behave/distribute uniformly across all the scenarios.

Code:
Have attached the Code used for the same:


Ext.chart.theme.White = Ext.extend(Ext.chart.theme.Base, {
constructor: function() {
Ext.chart.theme.White.superclass.constructor.call(this, {
axis: {
stroke: 'rgb(8,69,148)',
'stroke-width': 1
},
axisLabel: {
fill: 'rgb(8,69,148)',
font: '12px Lucida Grande',
'font-family': 'Arial, Helvetica, sans-serif',
spacing: 2,
padding: 5,
renderer: function(v) { return v; }
},
axisTitle: {
font: 'bold 18px Lucida Grande'
}
});
}
});

var colors = ['rgb(158, 195, 222)'];
Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colors
}, config));
}
});

barChart = Ext.create('Ext.chart.Chart',{
renderTo: 'contentTab10',
id: 'chartCmp',
xtype: 'chart',
width: 400,
height: 110,
animate: true,
store: storeIDMgmt,
theme: 'Browser:gradients',
style:{
marginLeft: '25px',
marginTop: '-7px'
},
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
label: {
style:{
font:'bold 11px Arial',
whiteSpace:'normal'
}
}
}],
series: [{
type: 'bar',
axis: 'bottom',
xField: 'name',
yField: 'data1',
highlight: true,
tips: {
trackMouse: true,
width: 250,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' Users');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
});
}


It will be a great help if a solution that helps the chart to distribute x-axis(single column) uniformly across the above mentioned scenarios can be achieved. Please help me with the code change.

Thanks,
Vedvrat

mitchellsimoens
26 Nov 2012, 7:42 AM
In your series, be careful of using duplicate configs, you have two xField and two yField and may lead to confusing. Last one wins.

So currently it works good if things increment by two but you want labels like the first image?

VedvratSharma
27 Nov 2012, 10:48 PM
Thanks for pointing out the duplicate xfield, yfield.

Yes, i need a uniform label spread.
So ideally it should be a unique label not a repeatation of labels as displayed in first image.

trebor
25 Apr 2013, 9:59 AM
Any resolution on this - seeing same problem in 4.2.0

thanks