Zoom in on rep graph?

Question

If you look at someone's rep graph that has only been using SO for a few weeks you'll see that it's pretty readable, but over time the points become too close to really make them out.

Why not allow users to zoom in on the graph to a specific date(s), by doing this you would actually be able to see the points.

Answer 1

Here's a greasemonkey script to do it:

(function() {
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined' && typeof unsafeWindow.jQuery.plot == 'undefined') { 
                window.setTimeout(GM_wait,100);
        } else { 
                $ = unsafeWindow.jQuery; letsJQuery(); 
        }
    }
    GM_wait();
    function letsJQuery() {
        $(function() {
            var placeholder = $("#placeholder");
            var selectionMode = "x"; //change this to "xy" to allow zooming on the y axis too
            resetPlot();
            placeholder.bind("plotselected", function(event, ranges) {
                unsafeWindow.plot = $.plot(
                    placeholder,
                    [unsafeWindow.plot.getData()[0].data],
                    {
                        xaxis: { mode: "time", min: ranges.xaxis.from, max: ranges.xaxis.to },
                        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to },
                        selection: { mode: selectionMode },
                        points: { show: true },
                        lines: { show: true },
                        grid: { hoverable: true }
                    }
                );
            });
            placeholder.bind("dblclick", resetPlot);

            var prevX = 0;
            placeholder.bind("plothover", function (event, pos, item) {
                if (item && prevX != item.datapoint[0]) {
                    prevX = item.datapoint[0];
                    $("#tooltip").remove();
                    var d = new Date(item.datapoint[0]);
                    var date = d.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][d.getMonth()] + " " + d.getFullYear();
                    showTooltip(item.pageX, item.pageY, "<strong>" + item.datapoint[1] + "</strong> (" + date + ")");
                }
                else if (!item) {
                    $("#tooltip").remove();
                    prevX = 0;
                }
            });

            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css( {
                    position: 'absolute',
                    top: y - 10,
                    left: x + 15,
                    border: '1px solid #AAA',
                    padding: '3px',
                    'background-color': '#FFA',
                }).appendTo("body");
            }

            function resetPlot() {
                unsafeWindow.plot = $.plot(
                    placeholder,
                    [unsafeWindow.plot.getData()[0].data],
                    {
                        xaxis: { mode: "time"},
                        selection: { mode: selectionMode },
                        points: { show: true },
                        lines: { show: true },
                        grid: { hoverable: true }
                    }
                );
            }
        });
    }
})();

Features:

• Select a range & the graph zooms in
• Double click the graph to reset the zoom
• Optionally allow zooming on y axis as well as x axis (see inline comment about setting selectionMode)
• New: Hover over points to get specific rep/date tooltips (plus a fix for the bug @SiegeX pointed out in comments)

Although, I still think its a good feature to incorporate into the site properly. Especially since as time goes on its going to become difficult to easily select a smallish time period, even for people with low-ish rep.