Google Chart Tools - データロールによる特異点の表示と注釈付きタイムライン

Google Chart Tools のデータには役割(Role)があり、これを使ってグラフの特異点(注釈)などを表示することができます。 今回はこのデータロールについて説明したいと思います。
また、特異点の表示機能を強化した注釈付きタイムラインのグラフについても説明します。

データロール

DataTable に格納するデータは今まで通常のデータだけでした。
しかし、 DataTable に格納するデータにはロールを指定することができ、 これで注釈やツールチップなどを設定することができます。

特異点(注釈)の表示

最大値など特殊なデータの場合にグラフ上に印を付けたいことがあります。
'annotation' のデータロールを使うとこの印を表示することができます。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

 google.load('visualization', '1', {packages: ['corechart']});
 google.setOnLoadCallback(
     function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '年度');
        data.addColumn('number', '売上');
        data.addColumn({type:'string', role:'annotation'});
        data.addColumn({type:'string', role:'annotationText'});
        data.addRows([
             ['2006',  860, null, null],
             ['2007', 1030, null, null],
             ['2008',  350,  'A', 'リーマンショック'],
             ['2009',  805, null, null],
             ['2010',  880, null, null]
         ]);
        
         var options = {
             title: '会社業績'
         };
        
        var chart = new google.visualization.LineChart(document.getElementById('gct_data_role_annotate'));
         chart.draw(data, options);
     }
 );

</script>
 <div id="gct_data_role_annotate" style="width:60%; height:220px;"></div>
列を追加する際にロールとそのロールで使用する型を指定します。
'annotation' が印の文字で、'annotationText' が印のツールチップで表示されます。

annotation, annotationText は文字列(string)型ですが、 ロールによって使用する型は変わります。

ロールの種類

annotation, annotationText 以外にも様々なロールがあります。

確定(certainty)
確定 certainty はデフォルトでは true です。これを false にすると破線となります。
 data.addColumn('string', '年度');
 data.addColumn('number', '売上');
 data.addColumn({type:'boolean', role:'certainty'});
 data.addRows([
     ['2004', 1000, true ],
     ['2005', 1170, true ],
     ['2006',  660, false],      // false の前後が破線
     ['2007', 1030, true ]
 ]);
強調(emphasis)
データを強調表示します。
 data.addColumn('string', '年度');
 data.addColumn('number', '売上');
 data.addColumn({type:'boolean', role:'emphasis'});
 data.addRows([
     ['2004', 1000, false],
     ['2005', 1170, true ],      // true - true 間を強調
     ['2006',  660, true ],
     ['2007', 1030, false]
 ]);
間隔(interval)
interval のロールでは下限、上限の 2 つの値を指定して、間隔を表示します。
 data.addColumn('string', '日');
 data.addColumn('number', '在庫');
 data.addColumn({type:'number', role:'interval'}); // 下限
 data.addColumn({type:'number', role:'interval'}); // 上限
 data.addRows([
     ['月',  38,    20,   45],
     ['火',  55,    30,   66],
     ['水',  77,  null, null],
     ['木',  66,    50,   77]
 ]);
スコープ(scope)
スコープ外(false)が非強調されます。
 data.addColumn('string', '年度');
 data.addColumn('number', '売上');
 data.addColumn({type:'boolean', role:'scope'});
 data.addRows([
     ['2004', 1000, true ],
     ['2005', 1170, false],      // false - false 間がスコープ外
     ['2006',  660, false],
     ['2007', 1030, true ]
 ]);
ツールチップ(tooltip)
デフォルトでもデータポイントでツールチップが表示されますが、 tooltip ロールを使うと任意の文字列を指定出来ます。
 data.addColumn('string', '年度');
 data.addColumn('number', '売上');
 data.addColumn({type:'string', role:'tooltip'});
 data.addRows([
     ['2004', 1000, null],
     ['2005', 1170, null],
     ['2006',  660, null],
     ['2007', 1030, null]
 ]);
 // フォーマッターで、 0, 1 の列のデータから作ったデータを 2 列に格納
 var formatter = new google.visualization.PatternFormat('{0}年は ${1} の売上');
 formatter.format(data, [0, 1], 2);
一旦 null (デフォルトのまま) を指定し、PatternFormatter を使って指定しています。

項目(domain)
通常、データ項目(ドメイン)は先頭列のみですが、 domain ロールを使うと複数指定することができます。複数指定した場合にはグラフ上で併記されます。
 data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
 data.addColumn('number', '2009 売上');
 data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
 data.addColumn('number', '2008 売上');
 data.addColumn({type:'boolean', role:'certainty'});
 data.addRows([
     ['Q1 2009', 1000, 'Q1 2008', 800, false],
     ['Q2 2009', 1170, 'Q2 2008', 750, false],
     ['Q3 2009', 660,  'Q3 2008', 700, false],
     ['Q4 2009', 1030, 'Q4 2008', 820, false]
 ]);
 var chart = new google.visualization.LineChart(document.getElementById('gct_data_role_domain'));
 chart.draw(data, {focusTarget: 'category', title: '四半期別2009年度売上'});
2009 年の売上に 2008 年を比較として載せています。

注釈付きタイムライン

Google Chart Tools では注釈付きタイムライン (Annotated Time Line) というグラフがあります。
これはベースは折れ線(面積)グラフですが次の特徴があります。
  • X 軸が時間
    • 先頭列は Data か DataTime オブジェクト
  • 注釈を表示
    • 通常のグラフと違い、選択可能
  • 標準で表示領域のフィルター付き
  • fill オプションで面積グラフに
    • 0 - 100 の値で透過率を指定 ( 0 が非表示 )
  • ローカルファイル(file:///) では使用できない
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(
    function () {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', '鉛筆の売上');
        data.addColumn('string', '注釈タイトル 1');
        data.addColumn('string', '注釈説明 1');
        data.addColumn('number', 'ペンの売上');
        data.addColumn('string', '注釈タイトル 2');
        data.addColumn('string', '注釈説明 2');
        data.addRows([
            [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
            [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
            [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
            [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334,
             '在庫切れ','午後 4 時に在庫がなくなった'],
            [new Date(2008, 1 ,5), 41476, 'ペン販売を再開','200k 本のペンを売り上げた',
             66467, undefined, undefined],
            [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(
            document.getElementById('gct_annotatedtimeline_div'));
        chart.draw(data, {displayAnnotations: true, fill: 25});
    }
);

</script>
<div id='gct_annotatedtimeline_div' style='width: 100%; height: 240px;'></div>
関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
48位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
6位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2017年06月 | 07月
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。