How to display Tips in Group Line Chart in Extjs 4? - charts

Question

I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.