PDA

View Full Version : Chart masks



dewit
30 Apr 2012, 11:11 AM
I'm having an issue with the masks on charts in general. I can have a working chart, or be using someone else's chart that supposedly has a working mask, but clicking and dragging accomplishes nothing. I've tried with IE, FF, and Chrome to no avail.

This is directly from the introduction, but I added mask, animate, and the listener just to see if I'm triggering an event even, which I'm not. To clarify further, I'm also getting no visual indication of a mask.


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.application({
name : 'HelloExt',
launch : function() {
Ext.create('Ext.chart.Chart', {
renderTo : Ext.getBody(),
width : 400,
height : 300,
store : store,
animate: true,
mask: true,
listeners : {
select : {
fn : function(me, selection) {
console.log(me);
}
}
},
axes : [{
title : 'Temperature',
type : 'Numeric',
position : 'left',
fields : ['temperature'],
minimum : 0,
maximum : 100
}, {
title : 'Time',
type : 'Time',
position : 'bottom',
fields : ['date'],
groupBy : 'hour',
dateFormat : 'ga'
}],
series : [{
type : 'line',
xField : 'date',
yField : 'temperature'
}]
});
}
});

sawda03
30 Apr 2012, 1:26 PM
I'm having the same problem with getting chart masks to work. The chart that I am working on had a mask working using version 4.0.7, but upgrading to 4.1 has broken it.

It appears the chart mask is no longer even being created despite specifying mask: 'horizontal' on my chart. After some debugging, I found that in the constructor of the chart, it is looking for an 'enableMask' configuration to determine whether or not to create the mask. This config option is currently not in the documentation at all. Setting enableMask: true on my chart does result in an attempt to create a mask but results in the following error:

Uncaught TypeError: Cannot call method 'hasOwnProperty' of undefined

me.hasListeners is what is undefined, but I'm still digging to figure out where this was supposed to be set.

Any help would be much appreciated!

sawda03
8 May 2012, 11:25 AM
bump