ブログ（Github Pages）でグラフ描画（Flot）

　以前lazy-high-chartの記事を書いたことがありましたが、RailsのようなWebアプリではなくこのブログ（Jekyllで生成）のような静的サイトでグラフを描画する必要性を感じた経験はなかったのですが、前回の記事のようなグラフばかりのページを作る時は便利だと実感しました。LibreやExcelにデータを貼り付けてグラフ化してそれを画像ファイルに変換してページに貼り付けるより手間が省けます。それだけじゃなくインタラクティブなグラフにすることでより情報を伝えやすくなるというのが今回のお話です。
　前回は「JavaScriptによるデータビジュアライゼーション入門」に紹介されていたFlotr2を使ってグラフを描画していたのですが、インタラクティブなグラフにする際には同じ本に紹介されているjQuery版のFlotライブラリを使いました。同じものだと思っていたのですが、結構違いがあるようです。
　前回の記事の最後に描画したグラフと同じパラメータを渡して描画したものが以下のグラフです。マウスでドラッグした範囲を拡大表示することが出来ます。

元に戻す

　Flotr2の時と同じパラメータを指定して描画しているにも関わらず、前回の記事と比較すればグラフの見た目に結構違いがあることがわかると思います。グラフの色の違いは色指定していないためデフォルトの色が違うだけなのですが、グリッドの線が表示されていたりグラフの凡例が表示されていなかったり、いくつかのパラメータが無視されています。JavaScript製なので「ページのソースの表示」でコードそのものを見ることも出来ます。

Flotライブラリを使うために必要だった作業

　Github Pagesの使い方もいろいろあると思いますが、私の場合自宅でgitサーバを運用して、Jekyllで静的ファイルを出力しgithubに保存しています。だからローカル環境で完結させたいので、Flotライブラリをダウンロードして使用しています。「JavaScriptによるデータビジュアライゼーション入門」の中で紹介されているCDN(Contents Delivery Network)を使用した方法でも動きましたが、以下の２つのファイルをJekyll環境にコピーすれば上記のグラフは動作しました。

• jquery.min.js
• jquery.flot.min.js

　既にgoogleAPI用のjqueryを使用していたのですが、それだと動かなかったのでFlotライブラリに同梱されていたものを読み込んでいます。以下のコードは有効に働いているoptionだけ記述しています。

    var $el = $("#dfs-regression"),
        data = [
            {data: equation1, label: "方程式１"},
            {data: equation2, label: "方程式２"},
            {data: equation3, label: "方程式３"},
            {data: equation4, label: "方程式４"}
            ],
        options = {
            legend: {position: "se"},
            selection: {mode: "x", color: "#eeeeee"},
            lines:{show: true, horizontal:false},
            xaxis:{
                max: 110
            },
            yaxis:{
                max: 1000
            },
            grid: {
                verticalLines: true,
                horizontalLines: true,
                outline: "ws"
            }
        }, plotObj;

    $el.on("plotselected", function(ev, ranges) {
        plotObj = $.plot($el, data,
                         $.extend(true, {}, options, {
                             xaxis: {min: ranges.xaxis.from, max: ranges.xaxis.to},
                             yaxis: {min: ranges.yaxis.from, max: ranges.yaxis.to}
                         })
                        );
    });
    plotObj = $.plot($el, data, options);
    $("#unzoom").click(function() {
        plotObj = $.plot($el, data, options);
    });
};

データ値の追跡

　Flotr2では options{ mouse: { track:true }}とするだけで、マウスでグラフ上を通過した時に、値を表示してくれたのですが、Flotには無い？ようです。Flotのサイトの例を見ても、グラフ上の値を追跡表示するには自前でイベントを追加して結構面倒なことをしなければいけないようです。以前使ったlazy-high-chartだとグラフの凡例と値をToolTipで表示することが、オプションで簡単に出来た記憶があるのに、そんなもんでしょうか？う〜ん、バージョンアップに期待することにして、今回はこれ以上弄らないことにします。