PDA

View Full Version : While zooming line chart, lines and data points disappears



sandeepsukhani
11 Aug 2013, 11:37 PM
Hi,


I was trying out on ExtJs zoom chart feature with 4.2 version. Below is the code:

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 800,
height: 800,
resizable:true,
id:"lineChart",
animate: true,
enableMask: true,
mask:true,
listeners: {
select: {
fn: function(me, selection) {
me.setZoom(selection);
me.mask.hide();
}
}
},
store: store,
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'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
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
}
}]
});


Events are firing properly, but after zooming lines and markers disappears from the chart no matter what portion I select from chart to zoom. I have attached screenshots of it.

4529645297

Please let me know if there is something wrong in my code or there is possible workaround available of it.

Gary Schlosberg
14 Aug 2013, 11:15 AM
Any chance you can include the store code with some sample data so I can try to run your code?

sandeepsukhani
15 Aug 2013, 8:43 PM
Hi,

Below is the data for trying out the code:

data: [{
'name': 'metric one',
'data1': 10,
'data2': 12
}, {
'name': 'metric two',
'data1': 7,
'data2': 8
}, {
'name': 'metric three',
'data1': 5,
'data2': 2
}, {
'name': 'metric four',
'data1': 2,
'data2': 14
}, {
'name': 'metric five',
'data1': 4,
'data2': 4
}]

Gary Schlosberg
16 Aug 2013, 9:11 AM
Thanks. I created a store and model to load this data, but I'm still not seeing anything in the chart to test with. Generally one gets better responses from the community if one can post a compete working test case that others can load and troubleshoot. Please post a working test case and we can proceed.

sievers.a
22 Aug 2013, 2:54 AM
I have the same problem in [v4.2.0.883] ... testing in Ch,FF,IE9 with various chart types, the axes are correctly redrawn but no series are visible. Playing with the live preview at http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.chart.series.Column it seems that the issue may be related to the presence of a legend:

Adding the following lines, the zoom works properly:


enableMask: true,
mask: true,
listeners: {
select: {
fn: function(me, selection) {
me.setZoom(selection);
me.mask.hide();
}
}
}


However also adding the following lines, then the series are not visible:


legend: {
position: 'right'
}


Unfortunately removing the legend from my own chart does not similarly fix the problem.

Gary Schlosberg
22 Aug 2013, 9:03 AM
I'm not seeing any difference with or without a legend, and that bar chart example renders pretty well for me. I did see some issues with the line chart example zooming, and am looking into that.