PDA

View Full Version : Hide column series in chart & zooming to selection



JSGuy
27 Nov 2011, 12:01 PM
Hello

I am using Ext JS 4.0.7-gpl and want to hide a column series in chart. Below is my example code.



Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);

Ext.onReady(function() {

Ext.define('Point', {
extend : 'Ext.data.Model',
fields : ['y', 'x']
});

var store = Ext.create('Ext.data.Store', {
model : 'Point',
data : [{
y : 1,
x : 0
}, {
y : 30,
x : 1
}, {
y : 34,
x : 2
}, {
y : 4,
x : 3
}, {
y : 6,
x : 4
}, {
y : 4,
x : 5
}]
});

var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
store : store,
mask : 'horizontal',
listeners : {
select : {
fn : function(bla, selection) {
bla.setZoom(selection);
bla.mask.hide();
}
}
},
legend : {
position : 'right'
},
axes : [{
type : 'Numeric',
minimum : 0,
position : 'left',
fields : 'y',
title : 'Y',
minorTickSteps : 1
}, {
type : 'Numeric',
position : 'bottom',
fields : 'x',
title : 'X'
}],
series : [{
type : 'column',
axis : 'left',
xField : 'x',
yField : 'y'
}]
})

var win = Ext.create('Ext.Window', {
width : 800,
height : 600,
minHeight : 400,
minWidth : 550,
hidden : false,
maximizable : true,
title : 'Line Chart',
renderTo : Ext.getBody(),
layout : 'fit',
tbar : [{
text : 'Hide',
handler : function() {
chart.series.get(0).hideAll();
}
},{
text : 'Show',
handler : function() {
chart.series.get(0).showAll();
}
},{
text : 'Reset Zoom',
handler : function() {
chart.restoreZoom();
}
}],
items : chart
});
});


I am using the hideAll() and showAll() methods, but somehow they are not working with a column series. As soon as I am using a line series the example is working as expected. Additionally I am wondering why clicking on the legend is hiding/unhiding the series.


Besides of that I have some troubles with zooming. I want to select an area of the chart and zoom in to the selection. So I added "mask : 'horizontal'". The mask is showing, but completely shifted to the top and left. The zooming is partially working for the axes but not for the series. Also the restoreZoom() method is not working.


Please help me.

mitchellsimoens
28 Nov 2011, 6:37 AM
If hideAll doesn't work on the column series then I would say this is a bug.