グラフ描画(主要部のみ)

sens-graph.js

function onMessageArrived(message) {
  var j = JSON.parse(message.payloadString);
  var data = undefined;
  var datas = j.datas;
  for (var i=0;i<datas.length;i++) {
    switch (datas[i].name) {
      case "watt":
        data = datas[i];
        break;
      case "temperature":
        tr_cols[0].push(datas[i].value);
        break;
      case "humidity":
        tr_cols[1].push(datas[i].value);
        break;
    }
  }
  if (data !== undefined) {
    if (columns.length > 0) {
      var idx = -1;
      for (var i = 0; i < columns.length; i++) {
        if (columns[i][0] === j.device) {
          idx = i;
          break;
        }
      }
      if (idx >= 0)
        columns[idx].push(data.value);
      else
        columns.push([j.device, data.value]);
    } else {
      columns.push([j.device, data.value]);
    }
    chart.load({ columns: columns });
  } else {
    tr_chart.load({ columns: tr_cols });
  }
}


var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: columns
  },
  zoom: { enabled: true },
  axis: {
    y: {tick: { format: function(d) { return d + "W"; } }}
  }
});
var tr_chart = c3.generate({
  bindto: '#TR',
  data: {
    columns: tr_cols,
    axes: {
      temperature: 'y',
      humidity: 'y2'
    }
  },
  zoom: { enabled: true },
  axis: {
    y: {
      show: true,
      tick: { format: function(d) { return d + "C"; } }
    },
    y2: {
      show: true,
      tick: { format: function(d) { return d + "%"; } }
    }
  }
});
d3.json('https://xxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/hoge', function(data) {
  columns = [data.watt.slice(0,100)];
  columns[0].unshift(data.device);
  chart.load({columns: columns, type: 'area'});
  tr_cols = [data.temperature.slice(0,100), data.humidity.slice(0,100)];
  tr_cols[0].unshift('temperature');
  tr_cols[1].unshift('humidity');
  tr_chart.load({columns: tr_cols, type: 'spline'});
});