PDA

View Full Version : How to restrict the drawing region in line chart



respect
10 Aug 2013, 11:31 PM
Hi,

I implemented zoom-in for line chart using extjs 4.2.1.

When I zoom in the graph, I'd like to see the lines only inside of yellow box(1st quadrant), and I don't want to see the lines outside the axes (as shown in the red boxes).

I understand that it is reasonable to show minus values or similar, but it's not what I want.

Is there any way to do that?

Thanks,
Hojae

45292

Gary Schlosberg
14 Aug 2013, 9:12 AM
I created an example from the docs but I am unable to reproduce this issue. Instead for me, the line is stopped short of the edge at the last point that falls within the selection. Does the following code run off the edge for you too? If so, in what browser are you seeing this?



Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});


var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
});



Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store,
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'ga'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
],
enableMask: true,
mask: 'horizontal',
listeners: {
select: {
fn: function(me, selection) {
me.setZoom(selection);
me.mask.hide();
}
}
}
});