Sinatra で JSON API を用意し JavaScript から利用する

前提

データベースに格納された残高のデータを読みだして図表を描きたい。図表は JavaScript ライブラリを利用してゴリゴリ動く感じのグラフにする。このようなニーズがあったとします。

データの流れ : RDBMS → Ruby(Sinatra) → JSON → JavaScript

JavaScript にデータを渡したいといったシチュエーションはよくあると思われるのでメモ。

JSON API の実装

まずは Sinatra 側に GET したら JSON が返ってくる API を実装する。

参考 [Ruby]SinatraでJSONを返す
http://d.hatena.ne.jp/rightgo09_ruby/20130828/p1

get '/api/balance/show' do
  if authorization # 認証に成功したか判定
    @balances = Balance.where(uid: @user.uid) # データを DB から読み出す
    # 配列に加工
    labels = []
    data = []
    @balances.each do |balance|
      labels.push(balance.month)
      data.push(balance.data)
    end

    # sinatra/json を使ってもいいけど
    content_type :json
    {
      type: 'bar',
      data: {
        labels: labels, # ラベルの配列をあてはめる
        datasets: [{
          label: "残高",
          backgroundColor: "rgba(2,117,216,1)",
          borderColor: "rgba(2,117,216,1)",
          data: data, # 数値の配列をあてはめる
        }],
      },
      options: {
        scales: {
          xAxes: [{
            time: {
              unit: 'month'
            },
            gridLines: {
              display: false
            },
            ticks: {
              maxTicksLimit: labels.count # ラベルの個数を渡す
            }
          }],
          yAxes: [{
            ticks: {
              min: 0,
              max: data.max, # データの最大値を渡す
              maxTicksLimit: data.count # データの個数を渡す
            },
            gridLines: {
              display: true
            }
          }],
        },
        legend: {
          display: false
        }
      }
    }.to_json # to_json で返せば JSON データを返却できる
  end
end

こんな感じで JSON API を作っておく。
JSON 全体をあらかじめ Ruby で前処理しておくのが楽ちん。

JavaScript で JSON を利用する

まずは JavaScript のライブラリを選定。

Chart.js
http://www.chartjs.org/

こいつを組み込んだら、あとは JSON API を叩いて Chart.js に渡すところだけ書いてあげれば良い。

function getBalance() {
  var data = null
  var req = new XMLHttpRequest();
  req.open("GET", "/api/balance/show", false);
  req.send(null);
  if(req.readyState == 4 && req.status == 200) {
      data = req.responseText; // JSON API の戻りを data に格納
  };
  return JSON.parse(data) // data を返却する
}
var ctx = document.getElementById("BalanceChart"); // DOM を指定
var balanceChart = new Chart(ctx, getBalance()); // Bar Chart のデータとして getBalance 関数の戻り値の JSON を利用

結果

できました。

あとはこの要領で JavaScript ライブラリを駆使してデータの可視化をガンガンおこなえますから便利ですね。

おわりです。