Raspberry Pi2で室温、水温を計測してグラフ表示するその2

2015/04/20

前回でRaspberry PiからさくらVPSへ計測したデータを飛ばして登録できるようになった
今回は登録したデータをグラフ表示して可視化する

室温のグラフ描画

グラフ描画にあたって何かいいのがないか探してみるとMetricsGraphics.jsというのがホットらしいので使ってみる
複数の折れ線グラフを表示したいのでマルチラインチャートの例を参考に作成する
しかしこのサンプルがスーパー不親切なので色々とハマる　詳しくは後述

PHPからJSONデータを出力

フロント側でグラフ表示をする前にサーバーのDBからデータを引っ張りだしてやる必要があるのでPHPで実装する
とりあえず最新50件でいいか的な意識低いphpソース

<?php
require_once('./db_conf.php');
$pdo = getPDO();

$ret = array();
$sql_ret = $pdo->query("select *  from stat order by assay desc limit 50")->fetchAll(PDO::FETCH_ASSOC);

$room = array();
$cpu = array();
$water = array();

foreach ($sql_ret as $v) {
        $row = array('date' => $v['assay'], 'value' => $v['room_temp']);
    $room[] = $row;

        $row = array('date' => $v['assay'], 'value' => $v['cpu_temp']);
    $cpu[] = $row;

        $row = array('date' => $v['assay'], 'value' => $v['water_temp']);
    $water[] = $row;
}

$ret[] = $water;
$ret[] = $room;
$ret[] = $cpu;

$pdo = null;

header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
echo json_encode($ret, JSON_PRETTY_PRINT);

MetricsGraphics.js

サーバー側の準備ができたんでjs側の実装
jQuery d3 cssが必要らしいので読み込んでおく

<link rel="stylesheet" href="css/metricsgraphics.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src='js/d3.js' charset="utf-8"></script>
<script src='js/metricsgraphics.js'></script>

ひとまず何も考えずサンプルをコピる

<div id="stat"></div>
<script>
d3.json('phpの場所', function(data) {
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }

    MG.data_graphic({
        title: "Multi-Line Chart",
        description: "This line chart contains multiple lines.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#stat',
        legend: ['Line 1','Line 2','Line 3'],
        legend_target: '.legend'
    });
});
</script>

動かないので何でやとJSコンソールを覗いてみると大量の謎エラーが吐出されてる

調べたらMG.convert.date()という関数が日付変換で年月日までしか対応してないようだ
第2引数にフォーマット文字列でも渡せるのかと思いきやそうでもないらしいふぁっきん
仕方ないのでMG.convert.dateをコピってMG.convert.datetimeを作る意識低いマン

    MG.convert.date = function(data, accessor, time_format) {
        time_format = (typeof time_format === "undefined") ? '%Y-%m-%d' : time_format;
        data = data.map(function(d) {
            var fff = d3.time.format(time_format);
            d[accessor] = fff.parse(d[accessor]);
            return d;
        });

        return data;
    };
    // コピって追加する
    MG.convert.datetime = function(data, accessor, time_format) {
        time_format = (typeof time_format === "undefined") ? '%Y-%m-%d %H:%M:%S' : time_format;
        data = data.map(function(d) {
            var fff = d3.time.format(time_format);
            d[accessor] = fff.parse(d[accessor]);
            return d;
        });

        return data;
    };

で、グラフ表示は出来たんだけど日付周りが全てアメリカ表記になっている

どっかロケールを1箇所変更すればいいのかとソースを覗いたらゴリゴリのハードコーディングになっていた　マジかよ・・・

        this.rolloverOn = function(args) {
            var svg = mg_get_svg_child_of(args.target);
            var fmt;
            switch(args.processed.x_time_frame) {
                case 'seconds':
                    fmt = d3.time.format('%b %e, %Y  %H:%M:%S');
                    break;
                case 'less-than-a-day':
                    fmt = d3.time.format('%b %e, %Y  %I:%M%p');
                    break;
                case 'four-days':
                    fmt = d3.time.format('%b %e, %Y  %I:%M%p');
                    break;
                default:
                    fmt = d3.time.format('%b %e, %Y');
            }

        if (args.time_series && (args.show_years || args.show_secondary_x_label)) {
            var secondary_marks,
                secondary_function, yformat;

            var time_frame = args.processed.x_time_frame;

            switch(time_frame) {
                case 'seconds':
                    secondary_function = d3.time.days;
                    yformat = d3.time.format('%I %p');
                    break;
                case 'less-than-a-day':
                    secondary_function = d3.time.days;
                    yformat = d3.time.format('%b %d');
                    break;
                case 'four-days':
                    secondary_function = d3.time.days;
                    yformat = d3.time.format('%b %d');
                    break;
                default:
                    secondary_function = d3.time.years;
                    yformat = d3.time.format('%Y');
            }

何かキレイに直す方法はないものかと思ったけど面倒になったので直接ハックする意識低いマン

        this.rolloverOn = function(args) {
            var svg = mg_get_svg_child_of(args.target);
            var fmt;
            switch(args.processed.x_time_frame) {
                case 'seconds':
                    fmt = d3.time.format('%Y/%m/%d %H:%M:%S');
                    break;
                case 'less-than-a-day':
                    fmt = d3.time.format('%Y/%m/%d %H:%M');
                    break;
                case 'four-days':
                    fmt = d3.time.format('%Y/%m/%d %H:%M');
                    break;
                default:
                    fmt = d3.time.format('%Y/%m/%d');
            }

        if (args.time_series && (args.show_years || args.show_secondary_x_label)) {
            var secondary_marks,
                secondary_function, yformat;

            var time_frame = args.processed.x_time_frame;

            switch(time_frame) {
                case 'seconds':
                    secondary_function = d3.time.days;
                    yformat = d3.time.format('%I %p');
                    break;
                case 'less-than-a-day':
                    secondary_function = d3.time.days;
                    yformat = d3.time.format('%m/%d');
                    break;
                case 'four-days':
                    secondary_function = d3.time.days;
                    yformat = d3.time.format('%m/%d');
                    break;
                default:
                    secondary_function = d3.time.years;
                    yformat = d3.time.format('%Y');
            }

あとはワードプレスに組み込んで完成