PDA

View Full Version : Problem with bar chart



marxan
28 Jan 2014, 5:19 AM
Hello,

I generate a bar chart with data but it doesn't take the good maximum value. For example, I have a set of data where the max value is 103 but the chart shows 100 as maximum so I don't see the end of the bar greater than 100.
It's the same when I have a max of 1300 the max is 900. I don't understand why it doesn't take the max value of my store to initiate the maximum.

Anyone could help me on this ? Is there any configuration to add to make it works? I tried to put a maximum value to 2000 but when I have a max value of 30, it doesn't show up really nice...

scottmartin
28 Jan 2014, 11:52 AM
What version of Ext4 are you using? 4.2.1+ handles this lot better

Paste code in our Fiddle:
https://fiddle.sencha.com/#home



Ext.application({
name: 'Fiddle',

launch: function() {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [{
'name': 'metric one',
'data': 10
}, {
'name': 'metric two',
'data': 7
}, {
'name': 'metric three',
'data': 5
}, {
'name': 'metric four',
'data': 203 // 2000
}, {
'name': 'metric five',
'data': 27
}]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});



}
});

marxan
29 Jan 2014, 8:57 AM
Thanks for your answer, in the meantime I've found my mistake.

I defined the field with the values in the model with a type "string" instead of "integer"...


Ext.define('STAT.model.GS', { extend: 'Ext.data.Model',
fields: [
{name:"SELECTED_DATE", type:"string"},
{name:"WEBQUERYCOUNTER", type:"integer"},
{name:"QUERYCOUNTER", type:"integer"},
{name:"TOTAL", type:"integer"}
]

});

scottmartin
29 Jan 2014, 10:04 AM
Yep, that mistake has bitten me as well.