dygraphsというJavaScriptのグラフを描画するライブラリがあります
私はHRForecastなどに使われていることで存在を知りました
以下のような感じで使えるライブラリです
第2引数にはCSVの文字列やCSVへのパスを与えます
<div id="graph1"></div> <script type="text/javascript"> g = new Dygraph( document.getElementById("graph1"), "Date,Temperature\n" + "2014-03-01,75\n" + "2014-04-01,70\n" + "2014-05-01,80\n" ); </script>
上のグラフを見ると下側に書いてあるラベルが"Apr 14"などとなっていて4月14日と間違えそうになります(自分は間違えました)
実は、2014年の4月を表しています
4月14日は下のグラフのように"14Apr"と表示されます
このx軸の日付の表示の仕方は個人的にはわかりづらいと思います
一応ちゃんとオプションで変更できるようにはなっていますが……
デフォルトの動作は以下のコードあたりで指定されてるみたいです
date.getTime() + 3600*1000とかやっているので時差もここで処理している(?)
試しに以下のように表示の仕方を指定してみます
以下のaxisLabelFormatterに与えている関数が表示の仕方を決めていて、granという引数は表示の粒度(日とか月とか年とか)を表しています
<div id="graph1"></div> <script type="text/javascript"> g = new Dygraph( document.getElementById("graph3"), "Date,Temperature\n" + "2014-03-01,75\n" + "2014-04-01,70\n" + "2014-05-01,80\n", { axes: { x: { axisLabelFormatter: function(d, gran) { var d = new Date(d.getTime()); if(gran >= Dygraph.MONTHLY) { return d.strftime("%Y %b"); } else if(gran >= Dygraph.DAILY) { return d.strftime("%b %d"); } else { return d.strftime("%H:00"); } } } } } ); </script>
すると先ほどのグラフはこのように年の部分が4桁に変化します