グラフ（チャート）を表示するjQueryライブラリ「Flot」

生活チェックサービス ChanTo.meでは、体重などの数字情報を毎日入力できるようになっているのですが、その値をグラフ表示できるようにしています。
また、毎日のチェック時に５段階評価を選択するようになっていますので、その評価も表示します。

こんな感じです。

折れ線が体重、棒グラフが５段階評価の結果です。

この表示は、jQueryのライブラリ「Flot」を使用しています。

exampleから見ていただくとわかるとおり、様々なタイプのグラフを表示できます。

また、ChanTo.meでは、IE7,8、FireFox、iPhoneのSafari、Androidの標準ブラウザで表示を確認しています。

参考までに、今回ChanTo.meでの利用方法を書いてみます。

IEへの対応

ChanTo.meはIE7以上しか対応していないので、IE6はわかりませんが、IEで使うには、jquery.flot.jsだけでは足りません。
excanvas.compiled.jsが必要になります。そして、これはIEでのみ読み込みますので、次のような記述をします。

  <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

これでIEでもFlotを使ったグラフを利用できるようになります。

２軸のグラフの表示

今回は２軸のグラフを表示しています。表示部分のソースが以下です。

data.xxxの部分は、Ajaxでサーバから取得したデータになっています。

            $.plot($("#dialog_contents"),
                [{ 
                    label : "level",
                    data: data.level_data,
                    yaxis:2,
                    bars:{
                        show:true,
                        barWidth:86400000,
                        align:"center"
                    },
                    color:"rgba(255,150,150,1)"
                },{
                    data:data.point_data,
                    label:"point",
                    lines:{
                        show:true
                    },
                    points:{
                        show:true
                    },
                    color:"rgba(150,150,255,1)"
                }],

                {
                    yaxis:{
                        min:data.point_min
                        },
                    y2axis:{
                        min:0,
                        max:6
                    },
                    xaxis:{
                        mode:'time',
                        timeformat:"%y-%m-%d"
                    },
                    grid:{
                        autoHighlight:true,
                        hoverable:true,
                        clickable:true,
                        aboveData:true
                    },
                    legend:{
                        show:false
                    }
                    }
                );

barWidthが86400000とうすごい数になっていますが、これは１日のミリ秒数です。
横軸は日時になっていて、１日毎に棒グラフになるので、この数字になりました。

動的な各値の表示

マウスを上に持ってくると、日にちと値が表示されます。
これは、plothoverというイベントを利用しています。
使い方は、以下の通りです。

        $("#dialog_contents").bind("plothover",function(event,post,item){
            if (! item ){
                return;
            }
            var chart = $("#dialog_contents").offset();
            var d = new Date(item.datapoint[0]);
            var dstr = (d.getUTCMonth()+1)+'-'+(d.getUTCDate());
            if(item && item.seriesIndex == 1){
                $("#dialog_contents_tooltip").html(item.datapoint[1]+'<br /><span style="font-size:80%;">'+dstr+'</span>').css({
                    'color':'#3333ff',
                    'background-color':"#ffffff",
                    'border':'1px solid #3333ff',
                    'opacity': 0.8,
                    'filter': 'alpha(opacity=80)',
                    'display':'block',
                    'left':item.pageX-chart.left-5+'px',
                    'top':item.pageY-chart.top-15+'px',
                    'margin':'0 1px'
                    });
            }else{
                if ( item.datapoint[1]>0){
                    $("#dialog_contents_tooltip").html(item.datapoint[1]+'<br /><span style="font-size:80%;">'+dstr+'</span>').css({
                        'color':'#ff3333',
                        'background-color':"#ffffff",
                        'border':'1px solid #ff3333',
                        'opacity': 0.8,
                        'filter': 'alpha(opacity=80)',
                        'display':'block',
                        'left':item.pageX-chart.left-5+'px',
                        'top':item.pageY-chart.top-15+'px'
                        });
                }
            }
        });

最初から、id="dialog_contents_tooltip"のdivを作っておいて、そのdivのスタイルを変更しながら表示しています。
このポイントは、

                        'left':item.pageX-chart.left-5+'px',
                        'top':item.pageY-chart.top-15+'px'

の部分です。これでポイントの少し上に値が表示されるようになります。

以上です。参考になれば幸いです。
よかったら、ChanTo.meもご利用ください。