Documentation for Stack Overflow reputation graph (Flot)

Question

is there any documentation available to build Flot graph similar to what we can find in the Stack Overflow profile/reputation tab?

from the source code I can see that data is queried at this address: /users/rep-graph/341106/" + ranges.xaxis.from.toFixed(1) + "/" + ranges.xaxis.to.toFixed(1) but I don't know the values from and to fields in the URL can accept.

EDIT:

In this graph, we can see that two points are highlighted, and the result is that two question are listed on the side, which means that the plotted values are linked with user-defined data.

However, if I consider pkh's example, only the points (and a label) are provided to Flot:

label: "United States",
        data: [[1990, 18.9], [1991, 18.7] ....

So I'd like to see:

1. how to link data with points
2. how to update a panel according to graph selection [but maybe this part is not actually done by Flot itself]

Answer 1

In this case, they are passing Javascript timestamps back via the URL.

So on the backend side, they must be doing something like this (pseudocode):

//get parameters from URL, non-rails people would just use POST or GET variables
$from = $_GET['from']
$to = $_GET['to']

//convert to timestamps in your language
$from = $from/1000
$to = $to/1000

//query your data source with these time-based restrictions
//return a JSON data set with the given restrictions, linking the known timestamps to labels

For your 2nd question, have your server-side return an associative array, linking the timestamp to a data object, which in this case contains Gain,Loss,Url,Title. In the success callback, you display them. Here's an example data object:

{ 1274774400000 : {
       Gain:0,
       Loss:10,
       Url:'http://asdf.com',
       Title:'We lost some rep here... boohoo'
    },
  1274947200000 : {
       Gain:10,
       Loss:0,
       Url:'http://asdf.com',
       Title:'We gained some rep here... woo!'
    }
}

You can see this type of object being used in the showReputation function in the page you referenced... except they returned a JSON array instead of an object.

Another feature you could easily add given the above data object: a plotclick event that highlights the given data point when the click it.

Answer 2

It looks like they're using flot's selection plugin. Here's a basic example of its use.

ranges is a argument to the plotselected handler, and so from and to can be any valid value for the given axis. (Selection can be along x, y, or (x and y) axes.)