Pages)でグラフ描画(Flot)以前lazy-high-chartの記事を書いたことがありましたが、RailsのようなWebアプリではなくこのブログ(Jekyllで生成)のような静的サイトでグラフを描画する必要性を感じた経験はなかったのですが、前回の記事のようなグラフばかりのページを作る時は便利だと実感しました。LibreやExcelにデータを貼り付けてグラフ化してそれを画像ファイルに変換してページに貼り付けるより手間が省けます。それだけじゃなくインタラクティブなグラフにすることでより情報を伝えやすくなるというのが今回のお話です。前回は「JavaScriptによるデータビジュアライゼーション入門」に紹介されていたFlotr2を使ってグラフを描画していたのですが、インタラクティブなグラフにする際には同じ本に紹介されているjQuery版のFlotライブラリを使いました。同じものだと思っていたのですが、結構違いがあるようです。前回の記事の最後に描画したグラフと同じパラメータを渡して描画したものが以下のグラフです。マウスでドラッグした範囲を拡大表示することが出来ます。元に戻すFlotr2の時と同じパラメータを指定して描画しているにも関わらず、前回の記事と比較すればグラフの見た目に結構違いがあることがわかると思います。グラフの色の違いは色指定していないためデフォルトの色が違うだけなのですが、グリッドの線が表示されていたりグラフの凡例が表示されていなかったり、いくつかのパラメータが無視されています。JavaScript製なので「ページのソースの表示」でコードそのものを見ることも出来ます。Pagesの使い方もいろいろあると思いますが、私の場合自宅でgitサーバを運用して、Jekyllで静的ファイルを出力しgithubに保存しています。ローカル環境で完結させたいので、Flotライブラリをダウンロードして使用しています。Network)を使用した方法でも動きましたが、以下の2つのファイルをJekyll環境にコピーすれば上記のグラフは動作しました。jquery.min.jsjquery.flot.min.js既にgoogleAPI用のjqueryを使用していたのですが、それだと動かなかったのでFlotライブラリに同梱されていたものを読み込んでいます。以下のコードは有効に働いているoptionだけ記述しています。}}とするだけで、マウスでグラフ上を通過した時に、値を表示してくれたのですが、Flotには無い?ようです。Flotのサイトの例を見ても、グラフ上の値を追跡表示するには自前でイベントを追加して結構面倒なことをしなければいけないようです。以前使ったlazy-high-chartだとグラフの凡例と値をToolTipで表示することが、オプションで簡単に出来た記憶があるのに、そんなもんでしょうか?う〜ん、バージョンアップに期待することにして、今回はこれ以上弄らないことにします。