PDA

View Full Version : Line chart Tool tip says "undefined"



dillu5c5
6 May 2014, 6:53 AM
I've used the lineChart example that came in extjs folder and added tooltip for the chart. The value shows up properly but I couldn't retrieve the series value properly :s
My target is to display the "series label {appropriate legend name} and the value" but not "xaxis label and value"
Basically I don't have complete knowledge on the item and storeItem.get properties which I couldn't find on google or in docs :-|
"item.yField" is showing undefined. but the same worked in case of Column chart. :(

PFA the screenshots showing the problem.4892748928
The code I've used is

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);


Ext.onReady(function () {
store1.loadData(generateData(8));
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3'],
data: [
{name: 2005, data1: 20, data2: 30, data3: 40},
{name: 2006, data1: 20, data2: 20, data3: 60},
{name: 2007, data1: 12, data2: 55, data3: 21},
{name: 2008, data1: 12, data2: 67, data3: 54}
]
});
var y_axes = ['data1', 'data2', 'data3'];
var legend = ['data1', 'data2', 'data3'];
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
store: store,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['data1', 'data2', 'data3'],
title: 'Number of Hits',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',

xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
// trackMouse: true,
width: 200,
height: 40,
constrainPosition: true,
renderer: function(storeItem, item) {
var label;
var position;
for(var i=0; i< legend.length; i++)
{
position = i;
alert(item.yField+".yField");
if((item.yField == storeItem.get(y_axes[i])))
{
label = legend[i];
break;
}
}
this.setTitle(label+','+ storeItem.get('name')+ ': ' + item.value[1]);
}
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
// trackMouse: true,
width: 200,
height: 40,
constrainPosition: true,
renderer: function(storeItem, item) {
var label;
var position;
for(var i=0; i< legend.length; i++)
{
position = i;
// alert(item.legend+".data2 yfield");
if((item.value[1] == storeItem.get(y_axes[i]))) //&& (item.yField == y_axes[i]))
{
label = legend[i];
break;
}
}
this.setTitle(label+','+ storeItem.get('name')+ ': ' + item.value[1]);
}
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'name',
yField: 'data3',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});




var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
store1.loadData(generateData(8));
});
}
}],
items: chart
});
});

Please help me out :(( Thanks in advance

scottmartin
9 May 2014, 12:49 PM
Did you inspect your item?



console.log(item); // series.yfield

dillu5c5
11 May 2014, 10:22 PM
Hey Scott,
Thanks a lot, I've inspected it, the "yField" thingy is hidden under series of item. So the way to access it is "item.series.yField" which I've not realized =P~
Thank you once again