PDA

View Full Version : Chart with two scales



fabio.policeno
9 Oct 2013, 5:58 AM
Hello ,


I have a problem in chart with two scales .The right scale is a sequence of numbers 0, 0.1, ... and the values ??of the chart line range from approximately 10 to 10 (10, 20, 30, ... ) not to mention the position of the point of the chart line is not on the direction of the correct value of the scale right. Any suggestions?


var store = Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'mes', type: 'int'},
{name: 'economia', type: 'float'},
{name: 'postagens', type: 'int'},
{name: 'bloqueio', type: 'int'}
],
data: [{
mes: 1,
economia: 10.5,
postagens: 300,
bloqueio: 8
},{
mes: 2,
economia: 40,
postagens: 200,
bloqueio: 20
},{
mes: 3,
economia: 50,
postagens: 700,
bloqueio: 70
},{
mes: 4,
economia: 40,
postagens: 200,
bloqueio: 20
},{
mes: 5,
economia: 30,
postagens: 200,
bloqueio: 20
},{
mes: 6,
economia: 10,
postagens: 900,
bloqueio: 90
},{
mes: 7,
economia: 20,
postagens: 600,
bloqueio: 60
},{
mes: 8,
economia: 60,
postagens: 300,
bloqueio: 30
},{
mes: 9,
economia: 50,
postagens: 700,
bloqueio: 70
},{
mes: 10,
economia: 20,
postagens: 500,
bloqueio: 50
},{
mes: 11,
economia: 30,
postagens: 700,
bloqueio: 70
},{
mes: 12,
economia: 20,
postagens: 400,
bloqueio: 40
}]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: store,
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['postagens', 'bloqueio'],
title: false,
grid: true,
},{
type: 'Numeric',
minimum: 0,
position: 'right',
fields: ['economia'],
title: false,
grid: true
},{
type: 'Category',
position: 'bottom',
fields: ['mes'],
title: false
}],
series: [{
type: 'column',
xField: 'mes',
yField: ['postagens', 'bloqueio'],
stacked: true
},{
type: 'line',
xField: 'mes',
yField: 'economia',
tips: {
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('economia'));
}
}
}]
});


http://f.cl.ly/items/1i0g2o2S24393f2R0o3s/Captura%20de%20Tela%202013-10-09%20%C3%A0s%2010.51.53.png

Thanks!

scottmartin
14 Oct 2013, 1:03 PM
Try setting your majorTickSteps for your axis ..



Ext.onReady(function(){

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 5 },
{ 'name': 'metric two', 'data': 2 },
{ 'name': 'metric three', 'data': 1 },
{ 'name': 'metric four', 'data': 3 },
{ 'name': 'metric five', 'data': 4 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
//renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,

// added these settings to remove decimals from axis
maximum: 5,
minimum: 0,
majorTickSteps: 4


},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
]
});

});


Scott

fabio.policeno
15 Oct 2013, 1:58 AM
Thank you, but I can not report the maximum value because I do not know what's the maximum that can come in "economia" field.


I also noticed that the graph line is looking for the scale of the left and not the right ... it should be based on the values ??of right and these values ??should be the right 10,20,30,40,50,60, ...

fabio.policeno
15 Oct 2013, 3:16 AM
Solved:

...
type: 'line',
xField: 'mes',
yField: 'economia',
axis: 'right',
...