View Full Version : xAxis with decimal values

25 Aug 2009, 1:43 PM
Hello friends,

I have a stacked bar char, everything is OK except the xAxis values... despite the JSON values are integers the chart is drawed with decimals values in their xAxis.
See attached image, please.

I have the follow JSON returned from my MySQL database:

{"results":[{"id":"1","iso":"LUSCHER","name":"Colores de Max Luscher","pending":"3","abandon":"0","complete":"0"},{"id":"2","iso":"16PF","name":"16 Factores de la Personalidad","pending":"1","abandon":"2","complete":"2"},{"id":"3","iso":"IPV","name":"Inventario de la Personalidad del Vendedor","pending":"3","abandon":"1","complete":"0"},{"id":"4","iso":"MMPI-2","name":"Inventario Multifasico de la Personalidad","pending":"5","abandon":"0","complete":"0"},{"id":"5","iso":"CLEAVER","name":"Test de Cleaver","pending":"2","abandon":"0","complete":"0"},{"id":"6","iso":"MOSS","name":"Test de Moss","pending":"0","abandon":"0","complete":"2"},{"id":"7","iso":"ALLPORT","name":"Test de Valores AllPort","pending":"1","abandon":"0","complete":"1"},{"id":"8","iso":"TERMAN","name":"Test de Terman","pending":"3","abandon":"0","complete":"0"},{"id":"9","iso":"RAVEN","name":"Test de Raven","pending":"0","abandon":"0","complete":"2"},{"id":"10","iso":"DOMINOS","name":"Test Dominos","pending":"2","abandon":"1","complete":"0"},{"id":"11","iso":"TCG","name":"Test de Cultura General","pending":"2","abandon":"0","complete":"0"},{"id":"12","iso":"INGLES","name":"Test de Ingl\u00e9s","pending":"2","abandon":"0","complete":"1"},{"id":"13","iso":"COMPUTAC","name":"Test de Computacion","pending":"1","abandon":"0","complete":"1"}]}

And the follow code in chartTestStatus.js

chartTestStatus = function(){
var storeTestStatus = new Ext.data.JsonStore({
autoLoad: true,
url: '../../../modules/view.php?action=populateChartTestStatus',
chartTestStatus.superclass.constructor.call(this, {
items: {
xtype: 'stackedbarchart',
store: storeTestStatus,
yField: 'iso',
xAxis: new Ext.chart.NumericAxis({
stackingEnabled: true,
labelRenderer: Ext.util.Format.numberRenderer('0,0')
tipRenderer : function(chart, record, index, series){
if(series.xField == 'pending'){
return record.data.name + '\n'+Ext.util.Format.number(record.data.pending, '0,0') + ' Pendientes';
}else if(series.xField == 'abandon'){
return record.data.name + '\n'+Ext.util.Format.number(record.data.abandon, '0,0') + ' Abandonados';
} else {
return record.data.name + '\n'+Ext.util.Format.number(record.data.complete, '0,0') + ' Completados';
series: [{
xField: 'pending',
displayName: 'Pendientes',
style: {color:0x5C73FE, length:25}
xField: 'abandon',
displayName: 'Abandonados',
style: {color:0xFF002A}
xField: 'complete',
displayName: 'Completados',
style: {color:0x029C02}
Ext.extend(chartTestStatus, Ext.Panel);

I would like in the xAxis only integer values depending of JSON values (1,2,3,4 and 5)
What can I do?
Best regards,


25 Aug 2009, 11:44 PM
what you want is a grouping xAxis which is not implemented as i see, you get one point for each record.

btw - properties for NumericAxis are not in doc and not in source, eg stackingEnabled, but you use it?
Edit: found in example, but missing in docs

26 Aug 2009, 2:12 AM
I recommend looking at the YUI API docs (http://developer.yahoo.com/yui/docs/module_charts.html) when searching for a chart config option.

26 Aug 2009, 12:30 PM
:s I was reviewing the YUI API Docs without found an answer.
The YAHOO.widget.NumericAxisdoesn't have a property for controlling how many vertical divisions will have the chart.
In my case... for the "pending", "abandon" and "complete" fields, the JSON return integer values between 0 and 5... and I expected the horizontal bars and 5 vertical lines with the possible values (0, 1, 2, 3, 4, 5)... instead that, the chart is showing 0, 0.45, 0.9, 1.35, 1.8, etc... or 0,0,0,0,1,1,2,2,2,2, etc; if I use Ext.util.Format.numberRenderer('0,0')
Help, please!!!