Comment tracer une plage de dates sur l'axe des X dans le Flot des Graphiques?

Je suis en utilisant le Flot des graphiques pour afficher les données sur une certaine période (à sélectionner par l'utilisateur, par exemple les 30 derniers jours, 7 derniers jours, à partir du 1er janvier 2013 au 3 mars 2013, etc)

Si je veux afficher un graphique en courbe avec l'axe des x comme date.

E. g. si j'ai deux jours, startDate et endDate comment puis-je faire de l'axe X affiche quelque chose comme:

1 Jan 2013 | 2 Jan 2013........................3 Mar 2013

Mon code est comme suit:
Les données (actuellement il est statique).

var mydata = [
                [1, 2.4],
                [2, 3.4 ],
                [3, 4.5 ],
                [4, 5 ],
                [5,  5],
                [6, 5],
                [7, 2 ],
                [8, 1 ],
                [9, 1.5 ],
                [10, 2.5 ],
                [11,  3.5],
                [12, 4 ],
                [13, 4 ],
                [14, 2.4],
                [15, 3.4 ],
                [16, 4.5 ],
                [17, 5 ],
                [18,  5],
                [19, 5],
                [20, 2 ],
                [21, 1 ],
                [22, 1.5 ],
                [23,  2.5 ],
                [24,   3.5],
                [25,  4 ],
                [26,  4 ],
                [27,  2.5 ],
                [28,   3.5],
                [29,  4 ],
                [30,  4 ],
            ];

var plot = $.plot($("#mychart"), [{
                data: mydata,
                label: "Y-axis label"
            }], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                colors: ["#37b7f3", "#d12610", "#52e136"],
                xaxis: {
                     mode: "time", timeformat: "%d/%m/%y", minTickSize: [1, "day"]
                },
                yaxis: {
                    ticks: 11,
                    tickDecimals: 0,
            min:0, max: 5
                }
            });

Je me rends compte que j'ai besoin de faire mydata ressemble à [la date, la valeur]. Ce travail?
J'ai les données générées dynamiquement par le serveur en JSON dans

[{date, valeur}, {la date, la valeur}...]

format.
S'il vous plaît guide.

OriginalL'auteur LittleLebowski | 2013-03-04

15

Vous aurez besoin de changer les numéros de temps UNIX timbres multiplié par 1000. C'est à partir de l'API si vous recherchez des Données de Séries chronologiques:

Le temps de prise en charge de série dans le Flot est basé sur Javascript horodateurs,
c'est à dire partout une valeur de temps est prévu ou remis en main propre, un Javascript
timestamp numéro est utilisé. C'est un nombre, pas un objet Date. Un
Javascript timestamp est le nombre de millisecondes depuis le 1er janvier
1970 00:00:00 UTC. C'est presque la même que les timestamps Unix, sauf que c'est
en millisecondes, donc n'oubliez pas de multiplier par 1000!

Il y a un .Net exemple dans l'API:
```
public static int GetJavascriptTimestamp(System.DateTime input)
{
System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks);
System.DateTime time = input.Subtract(span);
return (long)(time.Ticks / 10000);
}
```
Voici un exemple - http://jsfiddle.net/zxtFc/4/

Merci beaucoup. Qu'elle n'en résout!
Vous le multipliez par 10 000, et non pas 1 000, et votre exemple ne précise pas quand/où la méthode que vous avez définie est utilisée. En outre, vous êtes à la définition d'un nouveau type DateTime, alors pourquoi analyser une chaîne lorsque vous pouvez simplement passer dans l'année, le mois et le jour?
Enfin... cela semble simplement pas de travail. Les tiques je suis évaluer à quelque part dans l'année 1.
Cet exemple est à partir de l'API. Avez-vous lu le FLOT documentaiton sous "Données de Séries chronologiques"? Il fonctionne très bien.

OriginalL'auteur Blake

Vous devez vous connecter pour publier un commentaire.