Thanks for replying! I got the integration like effect working by creating a small graph which is say 5 units wide, but otherwise follows the main graph for Y coordinates. I set this to be filled, and then get the code to move in conjunction with the mouse.

W

Great work – I have a quick question – or request for a feature – is it possible to do some introspection on the Flotr object. I’d like to be able to get back things like xaxis.max or ticsize.

The other question – I was to highlight an area under a line graph (like in integration). I’ve done a crude version by mouse event adding a 2nd data series, which is just a single Bar – but obviously it over shoots the line itself.

document.observe('dom:loaded', function(){
                                /**
                                 * Fill series d1 and d2.
                                 */
                                var d1 = [[7,0],[8,0],[9,0],[10,0],[11,0],[12,0],[13,0],[14,0],[15,0],[15,0],[16,1],[17,1],[18,1],[19,2],[20,3],[21,4],[22,5],[23,\
5],[24,6],[25,7],[26,7],[27,7],[28,8],[29,9],[30,11],[31,12],[31,15],[32,17],[33,20],[34,24],[35,28],[36,33],[37,40],[38,51],[39,66],[40,92],[41,131],[42,187],[43\
,259],[44,338],[45,409],[46,456],[46,470],[47,452],[48,413],[49,365],[50,320],[51,285],[52,260],[53,242],[54,230],[55,222],[56,217],[57,214],[58,213],[59,214],[60\
,216],[61,217],[62,218],[62,218],[63,217],[64,214],[65,209],[66,203],[67,196],[68,189],[69,182],[70,176],[71,170],[72,164],[73,156],[74,148],[75,139],[76,129],[77\
,119],[77,110],[78,100],[79,90],[80,80],[81,70],[82,61],[83,52],[84,44],[85,36],[86,29],[87,23],[88,17],[89,12],[90,9],[91,6],[92,4],[93,2],[93,1],[94,1],[95,0],[\
96,0],[97,0],[98,0],[99,0],[100,0]];
                                var d2 = [[0,0],[1,0],[2,0],[3,0],[4,1],[5,2],[6,3],[7,5],[8,7],[8,9],[9,12],[10,14],[11,18],[12,21],[13,26],[14,32],[15,37],[16,4\
1],[17,45],[18,49],[18,54],[19,61],[20,68],[21,76],[22,84],[23,92],[24,101],[25,112],[26,122],[27,130],[27,135],[28,139],[29,144],[30,151],[31,159],[32,166],[33,1\
72],[34,179],[35,187],[36,197],[36,212],[37,229],[38,246],[39,263],[40,283],[41,315],[42,373],[43,473],[44,611],[45,732],[46,748],[46,634],[47,460],[48,315],[49,2\
32],[50,195],[51,178],[52,165],[53,150],[54,135],[55,122],[55,111],[56,101],[57,92],[58,82],[59,73],[60,64],[61,57],[62,51],[63,46],[64,43],[64,43],[65,43],[66,42\
],[67,39],[68,35],[69,30],[70,26],[71,22],[72,19],[73,17],[74,15],[74,13],[75,10],[76,8],[77,6],[78,4],[79,3],[80,2],[81,2],[82,2],[83,2],[83,2],[84,1],[85,0],[86\
,0],[87,0],[88,0],[89,0]];

                                /**
                                 * The following configuration disables mouse tracking for series d1,
                                 * and configures mousetracking for series d2 and d3.
                                 */
                                 var f = Flotr.draw( $('container'), [d2, d1],{yaxis:{max:1000}, xaxis:{max:100}} );
                                 ymax=1000;
                                $('container').observe('flotr:mousemove',
                                            function(evt){
                                                var x = Math.floor(evt.memo[1].x);
                                                if (x >=0 && x 0?2.5:0),0],[x-(x>0?2.5:0),ymax]], bars:{show:true, barWidth:(x>0?5:2.5)}},d2,d1],
                                                                 {yaxis:{max:1000}, xaxis:{max:100}} );
                                                        }
                                             });

                        });