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
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