google chartsで横軸が日時なグラフを作成する

   2015/09/29

google charsで横軸(x軸)が時間軸になるようなグラフの作成方法のメモです。

データタイプによって24時間表記のみか日付+時間かのどちらかを選択可能です。

DataType:datetime

 

google-charts-create-graph-yaxis-date-1

DataType:date

google-charts-create-graph-yaxis-date-2

ソースコード

デモ

 解説

大半はgoogle chartsのサンプルページを見れば分かるので、日時グラフにする事について書いておきます。

テーブル作成

データを入れる箱として配列ではなく、最初からテーブルを用います。これは配列にしてから google.visualization.arrayToDataTable でテーブルに変換すると、型が自動的に決められてしまうからです。

datatimeとdateを使った場合の差は冒頭に提示したとおりです。

Date()のフォーマット

Date()の詳しい使い方は他サイト様を参照してもらうとして、ここでの入力フォーマットは

というフォーマットです。

コメントを残す