2013-03-04 11 views
7

私は特定の期間(例えば、過去30日間、過去7日間、2013年1月1日〜2013年3月3日など)にデータを表示するためにFlotチャートを使用していますFlot ChartsでX軸の日付範囲をプロットする方法はありますか?

日付としてx軸の折れ線グラフを表示します。

など。私が2日持っていれば、startDateとendDateどうすればX軸ディスプレイを次のようにすることができます:

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

私のコードは次のとおりです: データ(現在は静的です)。

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

私は[日付、値]のようにmydataを作成する必要があることを認識しています。それは働くだろうか? はIフォーマット

[{日付、値}、{日付、値} ...]動的

にJSONにサーバによって生成されたデータをましました。 ご案内ください。あなたは時系列データを検索する場合は、1000これを乗じたUNIXタイムスタンプに番号を変更する必要があります

答えて

15

がAPIからです:FLOTで

時系列のサポートは すなわち、Javascriptのタイムスタンプに基づいていますどこでも時間値が予想されるか、渡されると、JavaScriptの タイムスタンプ番号が使用されます。これは、Dateオブジェクトではなく、数値です。 A Javascriptタイムスタンプは、January 1、 1970 00:00:00 UTC以降のミリ秒数です。これは、UNIXのタイムスタンプとほとんど同じですが、 (ミリ秒単位)ですので、1000を掛けてください!

.NETの例は、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); 
} 

は一例です - http://jsfiddle.net/zxtFc/4/

+0

どうもありがとうございました。それはそれを解決する! – LittleLebowski

+0

あなたは1,000ではなく10,000を掛けています。例では、定義したメソッドがいつどこで使用されているかを指定していません。さらに、新しいDateTimeを定義しているので、年、月、日を渡すだけのときに文字列を解析するのはなぜですか? – Kehlan

+0

最後に...これはうまくいかないようです。私が1年目のどこかに評価しているティック。 – Kehlan

関連する問題