PDA

View Full Version : Unable to zoom chart in ExtJS 4.2.2



varshalodha
27 Jan 2014, 3:32 PM
I am trying to zoom chart following extjs docs but not sure where am I going wrong :(
/*global Ext:false */
Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 12,
'data3': 14,
'data4': 8,
'data5': 13
}, {
'name': 'metric two',
'data1': 7,
'data2': 8,
'data3': 16,
'data4': 10,
'data5': 3
}, {
'name': 'metric three',
'data1': 5,
'data2': 2,
'data3': 14,
'data4': 12,
'data5': 7
}, {
'name': 'metric four',
'data1': 2,
'data2': 14,
'data3': 6,
'data4': 1,
'data5': 23
}, {
'name': 'metric five',
'data1': 4,
'data2': 4,
'data3': 36,
'data4': 13,
'data5': 33
}]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
mask:true,
listeners : {
select: {
fn: function(me, selection) {
me.setZoom(selection);
me.mask.hide();
}
}


},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid:true
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
highlight: true,
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
});

scottmartin
29 Jan 2014, 6:50 AM
Add 'enableMask: true' to your config.

varshalodha
29 Jan 2014, 3:01 PM
It doesn't zoom smoothly :(

scottmartin
29 Jan 2014, 3:23 PM
On all browsers?

varshalodha
29 Jan 2014, 3:40 PM
Yes. I tried in chrome and FF

scottmartin
29 Jan 2014, 4:39 PM
Is this with the example, or a chart with lots of data .. I am not aware of any reports of choppy zoom.

varshalodha
30 Jan 2014, 9:51 AM
It is example in sencha where I am trying to add zoom functionality. Though eventually I want to have scrollbar zoom similar to highchart but am unable to get basic zoom feature.