2013-03-04 15 views
7

Używam wykresów Flot do wyświetlania danych przez określony czas (do wyboru przez użytkownika, np. Ostatnie 30 dni, ostatnie 7 dni, od 1 stycznia 2013 do 3 marca 2013 itd.)Jak wykreślić zakres dat na osi X w tabelach Flot?

Więc chcę wyświetlić wykres liniowy z osią X jako datą.

E.g. jeśli mam dwa dni, startDate i endDate, jak zrobić wyświetlanie osi X: coś takiego:

1 stycznia 2013 | 2 stycznia 2013 r. ........................ 3 marca 2013 r.

Mój kod jest następujący: Dane (obecnie są statyczne).

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 
       } 
      }); 

Zdaję sobie sprawę, że muszę zmienić wygląd mydaty [data, wartość]. Czy to będzie działało? mam dane dynamicznie generowane przez serwer w JSON w

[{data, wartość}, {data value} ...] formatu

. Proszę przewodnika.

Odpowiedz

15

Trzeba będzie zmienić numery znaczków czas uniksowy pomnożona przez 1000. To jest z API, jeśli szukać Szeregi czasowe danych:

Wsparcie szeregów czasowych w Flot jest na podstawie znaczników czasu JavaScript, tj wszędzie tam, gdzie oczekiwana lub przekazywana jest wartość czasu, używany jest znacznik czasu JavaScript . Jest to liczba, a nie obiekt Date. Znacznik czasu Javascript to liczba milisekund od 1 stycznia 1970 00:00:00 UTC. To prawie to samo co znaczniki czasu Uniksa, z tym że jest to w milisekundach, więc pamiętaj o pomnożeniu przez 1000!

Jest przykładem .Net w 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); 
} 

Oto przykład - http://jsfiddle.net/zxtFc/4/

+0

dzięki. To rozwiązuje! – LittleLebowski

+0

Mnożyłeś przez 10 000, a nie 1000, a Twój przykład nie określa kiedy/gdzie została użyta zdefiniowana metoda. Co więcej, definiujesz nowy DateTime, więc dlaczego parsować ciąg znaków, kiedy możesz po prostu przekazać rok, miesiąc i dzień? – Kehlan

+0

Wreszcie ... to wygląda na to, że nie działa. Tiksy, które dostaję, oceniają gdzieś w roku 1. – Kehlan

Powiązane problemy