Javascript Girl
  1. Javascript Girl
  3. Comment tracer une plage de dates sur l'axe des X dans Flot Charts?
Intereting Posts
Pourquoi ce JavaScript fonctionne-t-il? Faites le tour d'une variable jusqu'au prochain multiple le plus proche de X Quand le tueur de manipulateur de Onerror de XMLHttpRequest Faire le && et || Les opérateurs convertissent-ils leurs opérandes en booléens? Barre de démarrage horizontale Bootstrap Tabs Comment créer une collection de tableaux à partir d'un seul tableau? Le débogage de Facebook appMobi lorsqu'il n'y a pas d'erreur distincte Javascript pour garder les boutons désactivés même après le rafraîchissement Comment charger RxJS (et zone.js / reflect-metadata) avec Angular 2 (bêta et plus récente) Quand est-ce que JavaScript est synchrone? Existe-t-il un moyen d'avoir / verrouiller des valeurs d'index uniques de l'objet Enum en Javascript? JSLint Espéré '===' et plutôt vu '==' Comment accéder à la variable globale dans hook de fonction dans javascript? Comment transmettre des variables JavaScript à PHP? KnockoutJS supprime l'élément du tableau observable. L'élément est listitem dans ul, qui a été généré par foreach

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

J'utilise les tableaux Flot pour afficher les données pendant une certaine période (à sélectionner par l'utilisateur, par exemple les 30 derniers jours, les 7 derniers jours, du 1er janvier 2013 au 3 mars 2013, etc.)

Je souhaite donc afficher un graphique linéaire avec l'axe des x comme date.

Par exemple, si j'ai deux jours, startDate et endDate comment puis-je faire apparaître l'axe X comme suit:

1 janv. 2013 | 2 janv. 2013 …………………… 3 mars 2013

Mon code est le suivant: Les données (actuellement statiques). 

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 qu'il faut que les mydata ressemblent à [date, valeur]. Ça marchera? J'ai généré dynamiquement les données par le serveur dans JSON dans

[{Date, valeur}, {date, valeur} …]

format. Veuillez vous guider.

Vous devrez modifier les numéros à des horodatages UNIX multipliés par 1000. Cela vaut de l'API si vous recherchez les données de la série temporelle:

Le support de série chronologique dans Flot est basé sur les horodatages Javascript, c'est-à-dire où une valeur de temps est attendue ou transmise, un numéro de timestamp Javascript est utilisé. Il s'agit d'un nombre, pas d'un objet Date. Un timestamp Javascript est le nombre de millisecondes depuis le 1er janvier 1970 00:00:00 UTC. C'est presque le même que les horodateurs Unix, sauf qu'il est en millisecondes, alors n'oubliez pas de multiplier par 1000!

Il existe un exemple .Net 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/