PDA

View Full Version : ExtJS4 asynchronous tooltip data



script34403
21 Jan 2015, 4:48 AM
I have a problem with my linegraph tooltip. As depicted below (red dot) the tooltip shows a different date than at the x-axis. I am sure the database data is ok. Has anybody a similar problem? I use a Firefox33 browser on a linux system. My code:


var chart = new Ext.chart.Chart({
// define chart parameters
id: 'chart',
width: 700,
height: 450,
style: 'background:#fff',
resizable: false,
animate: false, // makes it a bit slower
// assign as store the predefined store1
store: store1,
shadow: true,
// theme: 'Blue',
// theme: theme,
legend: {
position: 'right'
},
axes: [{ // y-axis
type: 'Numeric',
// grid: true,
minorTickSteps: 5,
length: 2,
decimals: 3,
position: 'left',
// minimum: 68,
// maximum: yaxisMax,
fields: [station],
// fields: ['name'],
// the name of the phenomenon which is chosen (predefined by 'phenom' variable)
title: obsprop + ' [' + unit + '] ',
// title: function(obs,idx){
// new String(obs.result.uom);
// },
grid: {
odd:{
opacity:1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width':0.5
} // end of odd
} // end of grid
}, // end of y-axis
{ // x-axis
type: 'Time',
minorTickSteps: 5,
position: 'bottom',
fields: ['name'],
title: 'Time',
dateFormat: "Y-m-d",
// dateFormat: "Y-m-d H:i",
constrain: true,
fromDate: dateBegin,
toDate: dateEnd,
label: {
rotate: {
degrees: 80
}
}
}
], // end of x-axes
series: [{
/ showMarkers: false, // turn on/off blue line-markers
type: 'line',
smooth: true,
highlight: { //highlight line by hovering
size: 4,
radius: 4
},
axis: 'left',
xField: 'name',
yField: station,
markerCfg: {
type: 'cross',
size: 8, //4
radius: 2, //4
'stroke-width': 0
},
tips: {
// trackMouse: True to have the tooltip follow the mouse as it moves over the target element.
// trackMouse: true,
trackMouse: false,
// tooltip dimensions
width: 170,
height: 20,
// function renderer
renderer: function(storeItem, item) {
var date = new Date(storeItem.get('name')),
formatted = Ext.Date.format(date, 'd.M H:i');
// create the text which is displayed in the tool tip
this.setTitle(formatted + " h -- " + storeItem.get(station) + " " + unit);
}// end of renderer() function
} // end of tips
} // end of series
] // end of series array
}); // end of chart variable
}



51549

lumberjack
23 Jan 2015, 8:57 AM
Here's a demo showing the use of series tips when using a time axis.

My guess is that your issue is occurring when you create a new date instance from the name property.


renderer: function(storeItem, item) {
var date = new Date(storeItem.get('name')),
formatted = Ext.Date.format(date, 'd.M H:i');
// create the text which is displayed in the tool tip
this.setTitle(formatted + " h -- " + storeItem.get(station) + " " + unit);
}

Regards,
Brian

h0p