View Full Version : Display 'marker' on line chart, on mouseover grid row.

16 Jan 2012, 1:15 PM
Hi, I have a Line Chart and a Grid Panel that shares the same Store.

I want to make it so when an user hovers the mouse over a record on my grid, the same "point" is displayed on my line chart.

Any ideas?

16 Jan 2012, 3:02 PM
Check out the example: http://docs.sencha.com/ext-js/4-0/#!/example/charts/FormDashboard.html

You can setup a listener on the itemmouseenter (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.panel.Table-event-itemmouseenter) event instead of the selectionchange event used in the example.

17 Jan 2012, 5:43 AM
I can't seem to find the source code for that example. Anyway, I found something else but I am only able to highlight the line. I can't find a way to show a marker.

17 Jan 2012, 5:51 PM
Did you even look at the example??? Did you try to right-click and view source??? Did you download the framework? The URL of the example gives you a clue as to where in the framework the source code is saved.

18 Jan 2012, 4:23 AM
I was looking for some "view source" hehe, I totally ignored the obvious way.

Anyway, I did it =D

'itemmouseenter': function(component, record, itemhtml,indice,event,options) {
for (s = 0; s < chart.series.length; s++){
serie = chart.series.get(s);
serie.highlight = true;
for (i = 0, items = serie.items, l = items.length; i < l; i++) {
if (record.data == items[i].storeItem.data) {
serie.highlight = false;