, { order_by => "id DESC", rows => 20 }

          , { order_by => "id DESC", rows => 100 }

        <h2>Build time history (in seconds)</h2>
        <div id="placeholder" style="width:800px;height:400px;"></div> 
        <div id="overview" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div> 

<div id="placeholder" style="width:600px;height:300px;"></div> 

<script src="/static/js/flot/jquery.flot.selection.js" type="text/javascript"></script>

    var d = [ null [% FOREACH prevbuild IN prevBuilds %][% IF prevbuild.resultInfo.starttime != 0 && (prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime) != 0 %],[[% prevbuild.resultInfo.starttime * 1000 %],[% prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime %]] [% END %] [% END %] ] ;

    var d = [];
    var ids = [];
    [% FOREACH prevbuild IN prevBuilds %][% IF prevbuild.resultInfo.starttime != 0 %]
      d.push([[% prevbuild.resultInfo.starttime * 1000 %],[% prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime %]]);
      ids[[% prevbuild.resultInfo.starttime * 1000 %]] = [% prevbuild.id %] ;
    [% END %][% END %] 

    // helper for returning the weekends in a period
    function weekendAreas(axes) {
        var markings = [];
        var d = new Date(axes.xaxis.min);
        // go to the first Saturday
        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
        d.setUTCSeconds(0);
        d.setUTCMinutes(0);
        d.setUTCHours(0);
        var i = d.getTime();
        do {
            // when we don't set yaxis, the rectangle automatically
            // extends to infinity upwards and downwards
            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
            i += 7 * 24 * 60 * 60 * 1000;
        } while (i < axes.xaxis.max);
 
        return markings;
    }
    var now = (new Date()).getTime() ;    
    var minimum = now;
    for (var i = 1; i < d.length; ++i)
      if ( minimum > d[i][0] )
        minimum = d[i][0] ;
    var now = (new Date()).getTime() ;    

        xaxis: { mode: "time", min: minimum, max: now, 
        },

        xaxis: { mode: "time" },
        selection: { mode: "x" },

        selection: { mode: "x" },
        grid: { markings: weekendAreas }

        grid: {
          clickable: true,
          hoverable: true,
          hoverFill: '#444',
          hoverRadius: 4,
        },

      if (ui.panel.id == "tabs-history") {
        $.plot($("#placeholder"), [
           { data: d,
             clickable : true,
             hoverable : true,
           },
          ], options );
      }
    })

        if (ui.panel.id == "tabs-history") {
            var plot = $.plot($("#placeholder"), [d], options);
    
            var overview = $.plot($("#overview"), [d], {
                series: {
                    lines: { show: true, lineWidth: 1 },
                    shadowSize: 0
                },
                xaxis: { ticks: [], mode: "time" },
                yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
                selection: { mode: "x" }
            });
 
            // now connect the two
    
            $("#placeholder").bind("plotselected", function (event, ranges) {
                // do the zooming
                plot = $.plot($("#placeholder"), [d],
                              $.extend(true, {}, options, {
                                  xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                              }));
 
                // don't fire event on the overview to prevent eternal loop
                overview.setSelection(ranges, true);
            });
    
            $("#overview").bind("plotselected", function (event, ranges) {
                plot.setSelection(ranges);
            });
            $("#placeholder").bind("plotclick", function (e, pos, item) {
                if (item) {
                    plot.highlight(item.series, item.datapoint);
                    buildid = ids[item.datapoint[0]];
                    window.location = "/build/"+buildid;
                }      
            }); 
        }
    });