flotr display data series name when mouse hovers over line

Question

I'm using flotr to graph 90 data sets. On average, only two of the 90 sets of data will actually produce a graphable line. The other 88 or so will have y values so low that they will barely peak above the x axis. Here is an example...

My problem is that I don't know what data set those two lines are. I could make a legend, but that legend would be huge because there are about 90 data sets. So I was wondering if flotr has a function to label these data sets when the mouse hovers over graphed data for that data set. Does such a function exist? Thanks.

Snuff

Answer 1

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

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

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

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

and changed it to this...

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 this...

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

Below is an example of the changes I made. Now the mouse hover shows x and y values and whatever data label you enter.

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'
            }
        }
    );

Snuff