Documentation pour le graphique de réputation Stack Overflow (Flot)

Question

Y at-il une documentation disponible pour construire un graphique Flot similaire à ce que nous pouvons trouver dans l'onglet Stack Overflow profile/reputation?

à partir du code source, je peux voir que les données sont interrogées à l'adresse suivante: /users/rep-graph/341106/" + ranges.xaxis.from.toFixed(1) + "/" + ranges.xaxis.to.toFixed(1) mais je ne sais pas les valeurs from et to champs dans l'URL peut accepter.

EDIT:

Dans ce graphique, nous pouvons voir que deux points sont mis en évidence, et le résultat est que deux question sont répertoriés sur le côté, ce qui signifie que le tracé les valeurs sont liées à données définies par l'utilisateur.

Cependant, si je considère l'exemple de pkh, seuls les des points (et une étiquette) sont fournis à Flot:

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

Je voudrais voir:

1. comment lier les données avec les points
2. comment mettre à jour un panneau selon la sélection du graphique [mais peut-être que cette partie n'est pas réellement réalisée par Flot lui-même]

Answer 1

Dans ce cas, ils transmettent des horodatages Javascript via l'URL.

donc du côté back-end, ils doivent faire quelque chose comme ça (pseudo-code):

//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 

Pour votre 2ème question, demandez à votre côté serveur retourne un tableau associatif, reliant l'horodatage à un objet de données , qui dans ce cas contient Gain, Perte, Url, Titre. Dans le rappel de succès, vous les affichez. Voici un exemple de données objet:

{ 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!' 
    } 
} 

Vous pouvez voir ce type d'objet utilisé dans la fonction showReputation dans la page ... vous avez fait référence, sauf qu'ils sont revenus un tableau JSON au lieu d'un objet.

Une autre caractéristique que vous pourriez facilement ajouter étant donné l'objet de données ci-dessus: un événement plotclick qui met en évidence le point de données donné lorsque vous cliquez dessus.

Answer 2

Il semble qu'ils utilisent le plugin de sélection de flot. Voici un basic example of its use.

ranges est un argument au gestionnaire plotselected, et ainsi from et to peut être toute valeur valide pour l'axe donné. (La sélection peut s'effectuer selon les axes x, y ou (x et y).)