The name of the flotr data series when the mouse hovers over a line

I use flotr for a 90 chart set. On average, only two out of 90 data sets will actually create a graphic line. The other 88 or so will have y values ​​so low that they will barely exceed the x axis. Here is an example ...

enter image description here

My problem is that I do not know what data these two lines set. I could make a legend, but this legend will be huge, because there are about 90 data sets. Therefore, I was wondering if there is a flotr function for marking these data sets when the mouse hangs over the graphic data for this data set. Is there such a function? Thanks.

+7
source share
1 answer

Ok, I found my answer. I saw this example ...

http://phenxdesign.net/projects/flotr/examples/prototype/mouse-tracking.html

This one uses tracking support, but only shows x and y values. I saw this line ....

trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; } 

and changed it to that ...

 trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y +', Data Series = ' + obj.series.label; } 

Then I specified a data label for each data set and passed them to Flotr.draw in an associative array. I did this by changing this ...

 [dataset1, dataset2] 

to that...

 [{data:dataset1,label:'label_for_dataset1'}, {data:dataset2,label:'label_for_dataset2'}] 

Below is an example of the changes I made. Now the mouse pointer shows the x and y values ​​and any data label entered.

Before:

 var dataset1 = [[100, 4.09453e-29], [99, 1.41672e-28],...... ]; var dataset2 = [[100, 9.48582e-19], [99, 1.88215e-18],...... ]; var f = Flotr.draw( $('container'), [dataset1, dataset2], { mouse:{ track: true, lineColor: 'purple', relative: true, position: 'ne', sensibility: 1, // => The smaller this value, the more precise you've to point trackDecimals: 2, trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; } }, crosshair:{ mode: 'xy' } } ); 

After:

 var dataset1 = [[100, 4.09453e-29], [99, 1.41672e-28],...... ]; var dataset2 = [[100, 9.48582e-19], [99, 1.88215e-18],...... ]; var f = Flotr.draw( $('container'), [{data:dataset1,label:'enter_label_for_dataset1_here'}, {data:dataset2,label:'enter_label_for_dataset2_here'}], { mouse:{ track: true, lineColor: 'purple', relative: true, position: 'ne', sensibility: 1, // => The smaller this value, the more precise you've to point trackDecimals: 2, trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y +', Data Series = ' + obj.series.label; } }, crosshair:{ mode: 'xy' } } ); 
+9
source

All Articles