dak ブログ

python、rubyなどのプログラミング、MySQL、サーバーの設定などの備忘録。レゴの写真も。

flotでの日付の目盛

2012-05-25 00:16:00 | javascript
日毎のデータをflotでグラフ描画する際には、plot() の第3引数で xaxis の指定を行います。
日付モードにするには mode: "time" にし、表示形式を timeformat で指定します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>日付の目盛</title>
<script type="text/javascript" src="flot/jquery.js"></script>
<script type="text/javascript" src="flot/jquery.flot.js"></script>
</head>
<body>
日付の目盛<br>
<div id="graph_area" style="width:600px;height:300px"></div>
<script type="text/javascript">
$(function () {
      var time = new Date();

      // x軸は日数
      var data1 = [[0, 3], [1, 8], [2, 5], [3, 13]];

      for (var i = 0; i < data1.length; i++) {
        // getTime() はミリ秒
        data1[i][0] = time.getTime() + data1[i][0] * 24 * 60 * 60 * 1000;
      }

      $.plot($("#graph_area"),
             [
              {
                  data: data1,
                      label: "UU",
                      lines: { show: true },
                      points: { show: true },
                      },
              ]
             ,
             {
                  xaxis: { mode: "time", timeformat: "%m/%d" },
             }
             );
  });
</script>

</body>
</html>

 
 
 
 

flotでのクリックイベント

2012-05-21 16:22:43 | javascript
flotで、グラフの点をクリックしたときにその点の情報を表示させるようなサンプルプログラムです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>クリックイベント</title>
<script type="text/javascript" src="flot/jquery.js"></script>
<script type="text/javascript" src="flot/jquery.flot.js"></script>
</head>
<body>
クリックイベント<br>
<br>
<div id="graph_area" style="width:600px;height:300px"></div><br>
<br>
<div id="label_area"></div><br>

<script type="text/javascript">
$(function () {
  var data = [
    [0, 3, { label: "a" }],
    [2, 8, { label: "b" }],
    [3, 5, { label: "c" }],
    [1, 4, { label: "d" }],
    [2, 4, { label: "e" }],
  ];


  $.plot($("#graph_area"),
    [
      {
        data: data,
        lines: { show: false },
        points: { show: true },
      },
    ],
    {
      grid: { hoverable: true, clickable: true },
    }
  );


  $("#graph_area").bind("plotclick", function (e, pos, item) {
    if (item) {
      $("#label_area").html("label: [" + data[item.dataIndex][2].label + "]");
    }
  });
});
</script>

</body>
</html>


クリックイベントは、$("#graph_area").bind("plotclick", function (e, pos, item) {...}); で設定します。
グラフの点をクリックされた場合には item に点の値が設定されているので、item の値を使ってイベント処理を行います。

上記のサンプルでは、item.dataIndex でデータの位置を取得し、配列の第3要素のハッシュの情報を取得しています。
plot() の引数の描画データの { data: ... } には普通は [x, y] の配列を指定しますが、上記のサンプルのように 3 要素以上を指定しても動作に問題はないようです。

以下は、[2.0, 8] の点をクリックした直後の画面です。



 
 
 
 

ファイルシステムをFAT32からNTFSに変更

2012-05-16 21:42:38 | コンピュータ
USB に限らずですが、ファイルシステムを（FAT32 から）NTFS に変換する方法です。

コマンドプロンプトで、

convert ドライブ名: /fs:ntfs

を実行すると、ファイルシステムを NTFS に変更できます。

時間を計測してはいませんが、2TB の USB2.0 外付HDD を10分程度で変更できました。
（購入したばかりで何も記録していないHDDですが）

 
 
 
 

javascriptでグラフ描画

2012-05-15 23:52:31 | javascript
javascriptでグラフを描画する方法です。
jQueryベースのflotを使います。 描画したいデータの [x, y] のデータ列を data: に指定すれば、グラフを描画してくれます。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>折れ線グラフ</title>
<script type="text/javascript" src="flot/jquery.js"></script>
<script type="text/javascript" src="flot/jquery.flot.js"></script>
</head>
<body>
折れ線グラフ
<div id="graph" style="width:600px;height:300px"></div>
<script type="text/javascript">
$(function () {
var data1 = [[0, 3], [4, 8], [8, 5], [10, 13]];
var data2 = [[0, 0], [10, 20]];

$.plot($("#graph"),
[
{
data: data1,
label: "line1",
lines: { show: true },
points: { show: true },
},
{
data: data2,
label: "line2",
lines: { show: true },
},
]);
});
</script>
</body>
</html>




 
 
 
 

カテゴリー

カレンダー

2012年5月
日 月 火 水 木 金 土
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
  • RSS2.0