Google Chart Toolsでチャートの表示・非表示の切り替えを行う

# はじめに
[前回](http://qiita.com/hippocampus-coronatus/items/982255fc4f61c3f1ff52)と同じくGoogle Chart Toolsを使ってグラフを描いていきます。

今回は凡例(Legend)をクリックした時にグラフデータの表示非表示を動的に変えていきます。
サンプルでは[LineChart](https://developers.google.com/chart/interactive/docs/gallery/linechart)で試していますが、他のグラフでもできるんじゃないかと思います;。

# 今回の完成形
<img width="897" alt="legend_onoff_sample_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/118801/3f7372ee-2ab5-121f-0313-eddb62cac0ca.png">

<img width="894" alt="legend_onoff_sample.png" src="https://qiita-image-store.s3.amazonaws.com/0/118801/4e05e222-da0a-27a2-7738-6c5fd9ccdea9.png">

画像だとわかりにくいのですが凡例の一番上のデータは非表示になっています。

今回もサンプルデータは公式からお借りしました。
実際の動きは [JSFiddle](https://jsfiddle.net/hippocampuscoronatus/qeeL0v5n/) で確認できます。

# コードの中身
```html:html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>      
```

```javascript:javascript
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLegendChart);

function drawLegendChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
      [1,  37.8, 80.8, 41.8],
      [2,  30.9, 69.5, 32.4],
      [3,  25.4,   57, 25.7],
      [4,  11.7, 18.8, 10.5],
      [5,  11.9, 17.6, 10.4],
      [6,   8.8, 13.6,  7.7],
      [7,   7.6, 12.3,  9.6],
      [8,  12.3, 29.2, 10.6],
      [9,  16.9, 42.9, 14.8],
      [10, 12.8, 30.9, 11.6],
      [11,  5.3,  7.9,  4.7],
      [12,  6.6,  8.4,  5.2],
      [13,  4.8,  6.3,  3.6],
      [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    title: 'Box Office Earnings in First Two Weeks of Opening',
    width: 900,
    height: 300,
    chartArea: {
      backgroundColor: 'black',
      left: 50
    },
    lineWidth: 4,
    focusTarget: 'category',
    hAxis: {
      viewWindowMode: 'pretty'
    },
    vAxis: {
      viewWindow: {
        max: 100
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);



  var columns = [];
  var series = {};
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
      series[i - 1] = {};
    }
  };

  google.visualization.events.addListener(chart, 'select', function () {
    var sel = chart.getSelection();
    if (sel.length > 0) {
      if (sel[0].row === null) {
        var col = sel[0].column;
        if (columns[col] == col) {
          columns[col] = {
            label: data.getColumnLabel(col),
            type: data.getColumnType(col),
            calc: function () {
              return null;
            }
          };
          series[col - 1].color = 'gray';
        }
        else {
          columns[col] = col;
          series[col - 1].color = null;
        }

        options.series = series;
            
        var view = new google.visualization.DataView(data);
        view.setColumns(columns);
        chart.draw(view, options);
      }
    }
  });
}
```

## イベントを追加する

準備としてラインの情報を保持しておく容れ物(**columns**)と凡例の色を設定する変数(**series**)を用意します。

イベントの追加には**events.addListener**を使います。

**chart.getSelection()**で何が選択されたかを変数に保持します。

```javascript
var sel = chart.getSelection();
```

条件分岐の部分は説明すると長くなるのですが、
凡例を選択したイベントは**sel[0].row = null**になります。

```javascript
if (sel[0].row === null) {
```

変数**col**にどのカラムが選択されたか番号を入れておきます。

```javascript
var col = sel[0].column;
```

**columns**にラインの情報が何も入っていなければ、今のラインの情報を代入し、色を灰色にします。
入っていれば選択されたカラムの番号を代入し、色を**null**でデフォルトに戻します。

カラムの設定を**chart.draw**で反映させます。

```javascript
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
```

凡例を選択した時にそのチャートが表示されたり非表示になったりすることができます。

# 最後に
今回は凡例をクリックするとデータの表示・非表示の切り替えを行いました。
凡例が小さいと押しにくかったり、すべてのチャートを非表示にした時にx軸とy軸の値がおかしくなったりするので、改善ができればいいなと思います。