4 Responses to “New Flotr Example: Drawing series with JSON data”

1. 
   Winton Davies | 1 month, 4 weeks ago | #

   Hi,

   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}} );
                                                           }
                                                });
   
                           });
2. 
   Bas Wenneker | 1 month, 3 weeks ago | #

   @Winton: About the first question. That’s not possible at the moment. I’ll add it to my todolist. The second question, your code doesn’t execute and I really don’t have clue what you want to do with the function that observes the ‘flotr:mousemove’ event. Please send me an email with a working example.
3. 
   Winton Davies | 1 month, 3 weeks ago | #

   Hi Bas,

   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
4. 
   Juliushh | 1 month, 3 weeks ago | #

   thank you, brother
5. 
   Your name | some time ago | #

   Live preview of your comment.

Share your thoughts

Notify me of followup comments via e-mail