What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 133 Stack Exchange communities.

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.

share|improve this question
5  
I see SKEET in that graph! –  devinb Jul 23 '09 at 22:57
    
@devinb: OK you got me. But I know other people who have this same problem (not this bad). –  Dexter Jul 23 '09 at 23:02
3  
Any solution that doesn't require Greasemonkey? This feature would be really, really nice. For users that have been on, e.g., Stack Overflow for a couple of years, the reputation graph is practically useless. –  mipadi Aug 3 '10 at 15:04
    
Any Google-Chrome extensions to do the same thing as the Greasemonkey? –  Ray Hayes Aug 9 '10 at 9:47
    
Hey Dexter, is it possible for you to fix your broken links by making an edit to your question and uploading the images to Stack Exchange? Your question isn't as valuable without the photos. Thank you! –  jmort253 Aug 3 '12 at 2:53
    
@jmort253 I would but this question is 3 years old I don't have those pictures anymore. –  Dexter Aug 7 '12 at 4:18

1 Answer 1

up vote 6 down vote accepted

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.

share|improve this answer
1  
What? Are you even allowed to post GreaseMonkey scripts without Jonathan's permission? –  Ian Elliott Jul 24 '09 at 5:24
    
:) I know, he's quite the GreaseNinja around here... he already stole my thunder on this one: meta.stackexchange.com/questions/8472/… –  Alconja Jul 24 '09 at 5:39
3  
This seems like it should be implemented as part of SO without having to use a GMS. –  Peter Ajtai Oct 19 '10 at 14:30
    
Setting selectionMode = "xy"; seems to break it entirely. It works great when it's just = "x"; however –  SiegeX Dec 14 '10 at 2:59
    
Apparently, it's the resetPlot() under if (selectionMode == "xy") that breaks it. No idea why. –  SiegeX Dec 14 '10 at 3:05
    
@SiegeX - Thanks for pointing that out... it did work once upon a time. Fixed again now. (also added a tooltips for the plot points while I was there) –  Alconja Dec 14 '10 at 4:45
    
This is excellent, the tooltips are awesome. Thanks! –  SiegeX Dec 14 '10 at 5:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .