2015年5月24日日曜日

テーブルデータのグラフ表示

さてCouchDBを使って、テーブルデータを扱うhtmlはできましたが、まだ表だけです。やはりここはグラフ表示できないと使い物になりません。そこでjCanvasを使ってグラフ表示できるようにしてみました。 まずデータの読込です。

ここで1つデータを追加します。
とまあ、順調にできました。
いつもならここでコードを参考に載せるところですが、機能的にまだあまりに不足している部分があるので、今回はパスします。こういう汎用的なものなら、以下の機能が欲しいところです。
・グラフを描画するcanvas要素のサイズに応じて描画。
・グラフ描画の際の上下左右のマージンをパラメータ化。
・あと、グラフの軸に目盛りが欲しい!
はっきりいって「とりあえず描画できるのを確認した」というレベルのコードしかまだできていません。( ;´Д`)まだ使い物になるかわかりませんが、少し様子をみて使い物になりそうなら、コードを作り込んでからまたブログに載せます。



2015年5月5日火曜日

CouchDB テーブルデータを表示/更新

さて単純なデータの表示/更新はできました。続いてテーブルデータです。例としては高度による静圧を取り上げます。とりあえず、出来た結果の表示例を以下に示します。(注:うっかり例には「標準大気圧テーブル」と書いてしまいましたが、正確には標準大気圧を元にした静圧のテーブルです。後で気づきました。(^_^;))


これの元になったCouchDBのドキュメントは以下です。

{ "_id": "StaticPressure", 
 "_rev": "16-482692fb61559cf3ad7224021b093d63", 
 "name": "StaticPressure", 
 "value": { "StaticPressure": [ { "Alt": 0, "P": 10332 }, { "Alt": 1, "P": 9167 }, { "Alt": 2, "P": 8106 } ] }, 
 "unit": "Alt[km],P[kgf/m2]" }

取り扱いたいデータは、"value"項にあるObjectのArrayです。(後にデータの追加を説明しますが、最初はこれもjson形式だと勘違いしていましたが、正確には違うんですね。そのためjsonのデータハンドリングが使えず、JavaScriptのObjectのデータとして取り扱います。つまりObjectのArrayがjsonの一つのデータとして格納されている形になっています)

「読込」ボタンで動くJacaScriptを以下に示します。


   var url = 'http://localhost:5984/environment/StaticPressure';
   var json;
   var json_part; // 静圧テーブルデータ部分(正確に言うと狭義のJSONとは違う)


   function exec() {
    // データの読み込み
    $.ajax({
     type: "GET",
     url: url,
     dataType:'json',
    }).done(function(data) {
     json = data;
     json_part = data.value;

     for (var i=0; i<json_part.StaticPressure.length; i++) {
      // 表(table)の最後の行に追加
      $('#table1 > tbody:last').append('<tr><td>'+ json_part.StaticPressure[i].Alt +'</td><td>'+ json_part.StaticPressure[i].P +'</td></tr>');     
     }

    }).fail(function(xhr, textStatus, errorThrown){
     alert('error!!');
     console.log("NG:" + xhr.status);
     console.log("NG:" + textStatus.status);
     $('#msg').append("失敗しました");
    });

   }


#table1というidのtableタグがhtml側に用意してあり、そこに読み込んだ静圧テーブルのデータを1行づつ追加していくだけです。

次に「追加」を実装します。最初の例に既に「読込」の右横に2個の入力フィールドとともに準備してあります。ここに、「0.5」「1000」という 値を入れて「追加」してみます。
無事データが一行追加されました。「追加」ボタンの実装を以下に示します。
function add() {
 var newAlt = parseFloat( $('#inputAlt').val() );
 var newPressure = parseFloat( $('#inputPressure').val() );

 // 入力データを追加する(単純に検索する)
 for (var i=0; i<json_part.StaticPressure.length; i++) {

  if (json_part.StaticPressure[i].Alt <= newAlt) {
   continue;
  }

  var newdata = {};
  newdata.Alt = newAlt;
  newdata.P = newPressure;

  // 表(table)のi行に追加
  $('#table1 tr').eq(i).after('<tr><td>'+ newdata.Alt +'</td><td>'+ newdata.P +'</td></tr>');

  // 静圧テーブルデータにも追加
  // 第1引数:変更を加えるindex
  // 第2引数:第1引数から難行のObjectを削除するか指定
  // 第3引数:変更として追懐したいObject
  json_part.StaticPressure.splice(i, 0, newdata);

  break;    
}

今回は注意点が2箇所あります。
①17行目でtableに値を追加しています。前回はappend( )を使いましたが、今回はafter( )を使いました。理由がわかりませんが、append( )だとテーブルの形が崩れたからです。(右横に1列追加される感じになってしまいました)この辺はもう少し勉強が必要です。
②23行目で実際のメモリ中のデータにも挿入しています。最初にも書きましたが、てっきりこれがjson形式のデータと思い込んでいたので、pushやなんか使おうとしたんですが、エラーばかり返されてきました。JavaScriptのObjectというデータ形式の中で、特にハンドリングしやすいようにフォーマットを決められたのがjsonとのことで、JavaScript内部のメモリでの持ち方はどちらも同じですが、使う関数が違います。splice( )と呼ばれるArrayに対する操作を行う関数を使っています。

ところで最初に「読込」時、テーブルデーを扱いやすくするため、json内部のvalueの部分だけjson_partという変数に代入してました。これまさしくポインタの代入で、「追加」の方でjsn_partにデータを追加したら、しっかしjsonの方にも反映されていました。(この辺りはjavaと同じで、変数は基本ポインタで値を保持しているようです)
後はこの新しいデータをCouchDBに戻してやるのと、せっかくテーブルデータなのでグラフが欲しいところですが、それはまた次回に。