PDA

View Full Version : Chart series single data point itemclick



Nam
28 May 2013, 11:28 PM
Hey Guys, I am trying to figure out if there is any way to get a single itemclick on a chart series. I have a Chart which has multiple lines in it, and if I click when multiple lines are highlighted, a itemclick event is triggered for each highlighted dot within the series. I want to have it so that I can click on a single item and have a window pop up showing additional data related to that data point.
I have also noticed this behavior applies to mouseover tooltips. When tips show up, sometimes it's more than just one overlapping eachother. When I tried to have a grid show up in the tooltip, I found that the only way it would work is if I had a grid instance for each series.
Does anyone know of away to accomplish getting a single itemclick instance when clicking on a chart series data point?

slemmon
30 May 2013, 12:45 PM
You may need to adjust the selectionTolerance (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Line-cfg-selectionTolerance) for the series to match the size of the marker (at least I believe that's as close as you'll get to what you're looking for):



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 4, 'data2': 4, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
selectionTolerance: 4,
listeners: {
itemclick: function () {
console.log('line 1');
}
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
selectionTolerance: 4,
listeners: {
itemclick: function () {
console.log('line 2');
}
}
}
]
});

Nam
1 Jun 2013, 4:59 AM
Hmm... close, but that doesn't really fix the problem. I posted some additional information in the premium support forums...
http://www.sencha.com/forum/showthread.php?264819-Chart-series-single-data-point-itemclick
In some instances, there may be 5+ data points overlapping. When am itemmousedown event occurs the listener would trigger 5+ windows to be opened... or 5+ actions to occur for each series. Same with the tooltips. You cannot see it occur, but when multiple data points exist from different series, each of the tooltips is rendered, but only 1 is visible at a time. I believe this is somewhat of a bug. I went to display a rich tooltip in the chart with a single grid/bar chart which displays data based upon which data points it's over, but was unable to without making a separate grid/bar chart instance for each series. Even when I did do that, it was horribly slow, because it was doing the same actions for multiple tooltips at the same time in the background, but only displaying one... Somewhat understandable behavior, but could also be considered a bug I think.
There should be some way to just get a single data point to trigger the events as opposed to one event triggered for each series when the event takes place.

slemmon
4 Jun 2013, 1:57 PM
So, to clarify, for something like in the test case below I click on a line marker and I get two itemclick events firing since there are two series markers completely overlapping - you're wanting just one of them to pick up the event in this case?

Nam
5 Jun 2013, 2:05 AM
Hi slemmon,

Yes, you get two of all events... if you look at the code for the onMouseMove/onMouseDown/onMouseUp on the Ext.chart.Chart code it is designed to always trigger for all series in the chart.

Arthur Kay provided me with some code via support which helped me with the mousedown event, but the tooltip issue which is due to the same thing is still present.


var itemMouseDownHandler = function (obj, eventObj) {
if (event.srcElement === obj.sprite.el.dom) {
console.log(
'itemmousedown: ' +
obj.series.seriesId + ' | ' +
obj.sprite.id + ' | ' +
obj.value[1]
);
}
else {
console.log('click on different series!');
}
};

I tried to create an override to build my own custom mouse handlers, but I just don't know enough about how to do it.

If you take a look at this example from highcharts (http://www.highcharts.com/demo/line-ajax) which used to be recommended to people before extjs added the chart components you will see that only one series get highlighted at a time. I've asked support about the possibility of this feature being implemented in the tooltip code, and possibly an option to flag that functionality on and off since both current functionality as well as singular series events make logical sense depending upon what is intended with the chart... although, triggering all series tooltips at the same time does not make any logical sense and appears to kind of be a bug. Since only one series tooltip can actually be displayed at a time correctly, triggering them all just wastes resources.