スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Prev.    Category    Next 

Google Chart Tools - フィルタリング(Dashboard と Control)

今回は Google Chart Tools でフィルタリングの機能を提供する Dashboard と Control の説明です。

Control はフィルターの指定を受け取るための部品で、 Dashboards が Control とグラフを結びつける管理オブジェクトとなります。

使い方

Dashboards 、 Control を使ったフィルタリング機能の実現方法を説明します。

以下は数値範囲でフィルタリングするサンプルです。
スライダーで数値範囲を指定します。 この数値範囲に表示項目をフィルタリングしています。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  google.load('visualization', '1.0', {'packages':['controls']});
  google.setOnLoadCallback(drawFilteringChart);
  function drawFilteringChart() {
  
      var data = google.visualization.arrayToDataTable([
          ['名前', 'ドーナッツを食べた数'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
      ]);
  
      // グラフの作成
      var chart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'filtering_chart_div',
          'options': {
              'pieSliceText': 'value'
          }
      });
  
  
      // Control の作成
      var control = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filtering_control_div',
        'options': {
            'filterColumnLabel': 'ドーナッツを食べた数'
        },
        'state' : {
            'lowValue' : 2
        }
      });
  
  
      // Dashboard の作成と関連付け
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('filtering_dashboard_div'));
      dashboard.bind(control, chart);
  
      // Dashboard 描画(ここでグラフと Control も描画)
      dashboard.draw(data);
  
  }

</script>

<!-- Dashboard 用 div 要素 (Control 、 グラフの両方を中に含む) -->
<div id="filtering_dashboard_div">
  <!-- Control の div 要素 -->
  <div id="filtering_control_div"></div>
  <!-- グラフの div 要素 -->
  <div id="filtering_chart_div" style="width:60%;"></div>
</div>
全体的な記述の仕方は通常のグラフの書き方と同じです。 注意点としては次の 2 つでしょう。
  • ロードするパッケージが'controls'
  • 描画先の div 要素は 3 つ
    • グラフ用
    • Control 用
    • Dashboard 用 (グラフと Control の div 要素を中に持つ)
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
 </script>
   google.load('visualization', '1.0', {'packages':['controls']});
   google.setOnLoadCallback(drawFilteringChart);
   function drawFilteringChart() {
       // グラフとフィルターの作成
       //         :
   }
 <!-- Dashboard 用 div 要素 (Control 、 グラフの両方を中に含む) -->
 <div id="filtering_dashboard_div">
   <!-- Control の div 要素 -->
   <div id="filtering_control_div"></div>
   <!-- グラフの div 要素 -->
   <div id="filtering_chart_div" style="width:60%;"></div>
 </div>

グラフとフィルターの作成関数

グラフとフィルターの作成関数内の処理は次のような流れになります。
  1. データの作成
  2. グラフの作成
  3. Control の作成
  4. Dashboard で Control とグラフを結びつける
  5. Dashboard(グラフと Control) の描画
グラフに使用するデータの作成は他のグラフと同じです。

グラフの作成では、通常のグラフの作成と違い、 描画までは行いません。
グラフを Dashboard に関連付けた後、 Dashboard 内でグラフの描画を行います。

通常のグラフの描画時には draw 関数でデータとオプションを渡します。 データは Dashboard の draw 関数に渡すので問題ないのですが、 グラフの draw 関数を直接呼ばないとオプションを渡すことはできません。
このため、 グラフ描画をラップした ChartWrapper でグラフの作成を行います。
       // グラフの作成
       var chart = new google.visualization.ChartWrapper({
           'chartType': 'PieChart',
           'containerId': 'filtering_chart_div',
           'options': {
               'pieSliceText': 'value'
           }
       });
Control の作成でもグラフと同様に ControlWrapper を使用します。 使い方も ChartWrapper とほぼ同じです。

ここでのポイントはオプションの 'filterColumnLabel'フィルタリングの対象となる列を指定することです。
このサンプルではデータ作成時の 2 次元配列の 1 行目のラベル('ドーナッツを食べた数')を指定します。 これを指定していなかったり、ラベル名が違っていたりするとエラーとなります。

'filterColumnIndex' を使って列番号で対象を指定することもできます。

また、コントロールの場合、 オプションに似た 'state' を指定できます。 これでコントロールの初期状態を指定することができます。
      var control = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filtering_control_div',
        'options': {
            'filterColumnLabel': 'ドーナッツを食べた数'
        },
        'state' : {
            'lowValue' : 2
        }
      });
作成したグラフと Control のオブジェクトは bind メソッドで Dashboard に渡し、 Dashboard で管理するようにします。
Dashboard::bind(コントロール, グラフ)

最後にデータを渡して Dashboard の描画(draw)を実行します。
コントロール、 グラフの描画はこの関数内で実行されます。
Dashboard::draw(データ)
      // Dashboard の作成と関連付け
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('filtering_dashboard_div'));
      dashboard.bind(control, chart);
  
      // Dashboard 描画(ここでグラフと Control も描画)
      dashboard.draw(data);
表との連携でおこなったように 1 つのデータに対して複数のグラフで表示したり、 列ごとに別のフィルターを使いたいといったこともあります。 こういった場合には bind() メッソドに渡す コントロール、 グラフはそれぞれ配列とすることもできます。

フィルタリング対象

フィルタリングではデータの列を指定し、 その列のデータがフィルター条件にマッチした行だけ表示します。
表示する列に対してフィルタリングはできません

例えば、次のような棒グラフでは表示する月はフィルタリングできますが、 表示する国のフィルタリングはできません。
['月',     'ボリビア', 'エクアドル', 'マダガスカル', 'パプアニューギニア', 'ルワンダ'],
['2004/05',       165,         938,             522,                 998,         450],
['2005/06',       135,         1120,            599,                 1268,        288],
['2006/07',       157,         1167,            587,                 807,         397],
['2007/08',       139,         1110,            615,                 968,         215],
['2008/09',       136,         691,             629,                 1026,        366]

Control の種類

利用可能な Control の 4 つです。
Control 名 フィルタリング対象
NumberRangeFilter 数値範囲
StringFilter 文字列
CategoryFilter カテゴリー(項目)
ChartRangeFilter グラフの表示範囲

数値範囲フィルター(NumberRangeFilter)

スライダーを使った数値範囲に対するフィルター。 前章のサンプルで使ったものです。

文字列フィルター(StringFilter)

文字列によるフィルターです。 指定した文字にマッチする項目のみ表示させます。
var data = google.visualization.arrayToDataTable([
    ['名前', '年齢'],
    ['Michael' , 12],
    ['Elisa', 20],
    ['Robert', 7],
    ['John', 54],
    ['Jessica', 22],
    ['Aaron', 3],
    ['Margareth', 42],
    ['Miranda', 33]
]);

// '名前' に対する文字列フィルター
var stringFilter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'string_filter_control_div',
    'options': {
        'filterColumnLabel': '名前'
    }
});

// var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'string_filter_chart_div'
});

var dashboard = new google.visualization.Dashboard(document.getElementById('string_filter_dashboard_div')).
    bind(stringFilter, table).
    draw(data);
よく使いそうなコントロールのオプションを挙げておきます。
名前 デフォルト値 説明
matchType string 'prefix' 文字列マッチのタイプ
'exact' : 完全一致
'prefix' : 前方一致
'any' : 文字列を含む
caseSensitive boolean false (区別しない) アルファベットの大文字、小文字を区別するかどうか
useFormattedValue boolean false (実際の値) format を使った場合に、フィルタリングの対象を表示上の値にするか、実際の値にするか

項目フィルター(CategoryFilter)

前の 2 つは指定した値にマッチした項目だけを表示しますが、 これは項目を直接選択するフィルターです。
var data = google.visualization.arrayToDataTable([
    ['名前', 'ドーナッツを食べた数'],
    ['Michael' , 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
]);

var chart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'category_filter_chart_div',
    'options': {
        'pieSliceText': 'value',
        'title': 'ドーナッツを食べた割合'
    }
});

// Control の作成
var control = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'category_filter_control_div',
    'options': {
        'filterColumnLabel': '名前',
        'ui': {
            'allowMultiple': true,
            'caption': '値を選択...',
            'selectedValuesLayout': 'below'
        }
    },
    // 初期状態を指定
    'state': {'selectedValues': ['Michael', 'Aaron', 'John']}
});


var dashboard = new google.visualization.Dashboard(
    document.getElementById('category_filter_dashboard_div'));
dashboard.bind(control, chart);
dashboard.draw(data);
よく使いそうなオプションを次のようなものでしょう。
名前 デフォルト値 説明
useFormattedValue boolean false (実際の値) format を使った場合に、フィルタリングの対象を表示上の値にするか、実際の値にするか
ui.caption string 'Choose a value...' テキストボックス内に表示する文字列
ui.selectedValuesLayout string 'aside' 選択した値の表示形式(allowMultiple が true の場合)
  • 'aside': コントロールの横に配置
  • 'below': コントロールの下に配置
  • 'belowStacked': コントロールの下に配置し、下方向に増やす
  • 'belowWrapping': コントロールの下に配置し、 コントロール幅を超えたら折り返す
    js_gct_bellowWrapping.png
ui.allowMultiple boolean true 複数選択を許可するかどうか
ui.allowTyping boolean true 文字入力ができるかどうか。 false の場合は選択メニュー。
ui.label string auto コントロールにつけるラベル。 デフォルトでは列情報のラベル。

表示範囲フィルター(ChartRangeFilter)

グラフの表示範囲を制御します。
ChartRangeFilter ではコントロールもグラフです。
コントロール側のグラフの種類やオプションを指定するには ui.chartType, ui.chartOptions を使用します。 デフォルトは次の値です。
'ui': {
    'chartType' : 'ComboChart',
    'chartOptions': {
        'enableInteractivity': false,
        'chartArea': {'height': '100%'},
        'legend': {'position': 'none'},
        'hAxis': {'textPosition': 'in'},
        'vAxis': {
            'textPosition': 'none',
            'gridlines': {'color': 'none'}
        }
    }
}
グラフタイプのデフォルトである ComboChart に関しては以下をご覧下さい。 また、初期状態の表示範囲は 'state''range' オブジェクトで指定します。
// 値の作成
var data = new google.visualization.DataTable();
data.addColumn('date', '日付');
data.addColumn('number', '値');
var val = 0;
// 2012/1/1 から 4 ヶ月分のデータを追加
for (var day = 1; day < 121; ++day) {
    var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
    val = val + change;
    val = Math.max(0, val);
    var date = new Date(2012, 0 ,day);
    data.addRow([date, Math.round(val)]);
}

var dashboard = new google.visualization.Dashboard(
    document.getElementById('chart_range_filter_dashboard_div'));

var control = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'chart_range_filter_control_div',
    'options': {
        // 先頭列(データ項目)に対してフィルタリング
        'filterColumnIndex': 0,
        'ui': {
            'chartType' : 'LineChart',
            'chartOptions': {
                'hAxis': {'baselineColor': 'none'}
            },
            // 範囲の最小 : 2 日 = 2 * 24 * 60 * 60 * 1000 = 172,800,000 (msec.)
            'minRangeSize': 172800000
        }
    },
    // 初期範囲 2012/2/9 - 2012/3/20
    'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
});

var chart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_range_filter_chart_div',
    'options': {
        'legend': {'position': 'none'}
    },
    // 1 列目を日付から文字列に変換
    'view': {
        'columns': [
            {
                'calc': function(dataTable, rowIndex) {
                    return dataTable.getFormattedValue(rowIndex, 0);
                },
                'type': 'string'
            }, 1]
    }
});     

dashboard.bind(control, chart);
dashboard.draw(data);
<div id="chart_range_filter_dashboard_div">
  <div id="chart_range_filter_chart_div" style='width:100%; height: 300px;'></div>
  <div id="chart_range_filter_control_div" style='width:100%; height: 50px;'></div>
</div>
サンプルではグラフでデータを使用するとき、 先頭列を日付オブジェクトから文字列に変換しています。
これは先頭列を X 軸の値ではなく、 データ項目(domain 名)として扱うためです。
    'view': {
        'columns': [
            {
                'calc': function(dataTable, rowIndex) {
                    return dataTable.getFormattedValue(rowIndex, 0);
                },
                'type': 'string'
            }, 1]
    }
関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

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

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

09月 | 2017年10月 | 11月
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 31 - - - -


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

yohshiy

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

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

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。