クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Google ChartsをQuickにStartする

Qiitaアドベントカレンダー「JavaScript2」12日目の記事です。最近、データのビジュアライズに興味津々之介なイイダリョウです。これまでJSのチャートライブラリは「Chart.js(Canvasベース)」と「C3.js(SVGベース)」をGetしてStartedしました。今回は「Google Charts」をQuickにStartしてみます。C3.jsと同様SVGベースのようですが、何と言ってもGoogleドライブのスプレッドシートをダイレクトに読み取れるのが大きな特徴です。それではいってみよう!

【目次】

※参考:JSの基本はこちら
【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと

スプレッドシートのグラフは簡単に埋め込みできる

ちなみにGoogleドライブのスプレッドシートは実はデフォルトで「ウェブ埋め込み」機能があります。こんな感じです。

グラフはカーソルのhoverに反応したりしていい感じですね!Googleドライブ をやっていないユーザーにもグラフを見せられることがメリットです。(ちなみに下の方でグラフの元になった表自体も埋め込んでいますが、こちらは使い勝手がイマイチです。。)

手順を簡単に説明します。まずグラフにしたい表を選択した状態でツールバーの「グラフ」のアイコンをクリック f:id:idr_zz:20181209224312j:plain

グラフが作られたら右上の「設定」のアイコンを開き「グラフを公開」をクリック f:id:idr_zz:20181209224317j:plain

「ウェブに公開」画面の「埋め込み」タブにiframeのコードがあるのでコピーして自分のサイトやブログにペーストするとグラフを埋め込めることができます。 f:id:idr_zz:20181209224323j:plain

一応、表の方の手順も。「ファイル」の「ウェブに公開」を開く f:id:idr_zz:20181209224327j:plain

「ウェブに公開」画面の「埋め込み」タブで公開したいシートを選択するとiframeコードをコピーできます。あとは同じです。 f:id:idr_zz:20181209224332j:plain

スプレッドシートから取得できるiframeコードを貼るだけでSNSと同じ感覚でグラフを公開できます。プラグラミング知識は不要。お手軽です!

え?それならこれだけでもうええやん、なんでGoogle Charts必要なんって?はい、確かに私もそう思いました。

Google Chartsを使うメリットは別にあります。それはスプレッドシートよりグラフを細かくカスタマイズできることです!

Google ChartsをQuickにStart

以前の記事で「Chart.js」や「C3.js」は割と簡易にGettingしてStartedできました。構造も割と似ていましたね。

※参考:Chart.jsをGettingしてStartedする - クモのようにコツコツと
※参考:SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする - クモのようにコツコツと

Google Chartsもたぶん似た構造と予想されるので臆することなく初めて見ます。今回もまずは公式チュートリアルから。

※参考:Quick Start  |  Charts  |  Google Developers

むむむ…やはり英語。果てしなく英語。とはいえ、ひとまずソースコードはわかるのでCodePenに貼ってみる。ドン!

おお、グラフが表示されたぞ!なんてQuickなStart!!(感激)

こちらのグラフもカーソルを乗せると詳細が表示されたりしていい感じです。

コードを見ていきます。まずはHTMLファイルのheadタグにライブラリの利用に必要なloader.jsファイルを読み込みます。CDNがありますね。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

今回はCodePenなのでいつものようにJSの「Setting」(歯車アイコン)に貼りました。

HTMLファイル本文エリアには下記のようなdivタグを一つだけ配置。id名がchart_divですね。

<!--Div that will hold the pie chart-->
    <div id="chart_div"></div>

あとはJSファイルのコードのみ(CSSは無し)!こちらのコードです。

// Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

…はい、ちょっと長いので上から順番に読み解いていきましょう〜。

Google ChartsのJSを読み解く

先ほどのコードを分解して少しずつ見ていきます。

Google Chartsパッケージの読み込み

まず最初の行から。

// Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
  • コメント:ビジュアライゼーションAPIとコアチャートパッケージを読み込みます。
  • google.chartsプロパティの.load()メソッドを実行
  • .load()メソッドの第1引数'current'、第2引数は連想配列'packages'キーの値がさらに配列'corechart'

まずここで基本的なGoogle Chartsのパッケージを読み込んでいるようですね。.load()はGoogle Chartsファイル内で定義されたメソッド。

APIが読み込まれたらdrawChartメソッドを実行

次の行にいきましょう。

// Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);
  • コメント;Google ビジュアライゼーションAPIが読み込まれたときに実行するコールバックを設定します。
  • google.chartsプロパティの.setOnLoadCallback()メソッドを実行
  • .setOnLoadCallback()メソッドの引数はdrawChart

「コールバック」はざっくりいうと「関数の引数に渡される関数」です。

※参考:https://wa3.i-3-i.info/word12295.html

ここではsetOnLoadCallback()というAPIが読み込まれたときに実行されるメソッドの引数にdrawChartという名前のメソッド(関数)を読み込む。 つまり、APIが読み込まれたらdrawChartメソッドが実行されるということです。

drawChartメソッドの概要

ではdrawChartメソッドとはなんぞや?次の行でできます。

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        (処理内容)
      }
  • コメント:データテーブルを作成して設定するコールバック、円グラフをインスタンス化し、データを渡し、それを描く。
  • drawChart()メソッドを定義(中に処理内容が書かれている)

処理内容は大きく3ブロックに分かれています。

        // Create the data table.
        (処理内容)
        // Set chart options
        (処理内容)
        // Instantiate and draw our chart, passing in some options.
        (処理内容)
  • コメント1:データテーブルを作成します。
  • コメント2:チャートオプションを設定する
  • コメント3:チャートをインスタンス化して描画し、いくつかのオプションを渡します。

drawChartメソッド1:データテーブルを作成

それでは1ブロックずつ見ていきましょう。まず一つ目「データテーブルを作成」

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
  • コメント1:データテーブルを作成します。
  • 変数 datagoogle.visualizationプロパティのDataTable()メソッドを複製(インスタンス作成)
  • dataaddColumn()メソッドを実行。第1引数'string'、第2引数'Topping'
  • dataaddColumn()メソッドを実行。第1引数'number'、第2引数'Slices'
  • dataaddRows()メソッドを実行。中には多次元配列(配列の値が配列)がはいっています。
  • 多次元配列1の値1は'Mushrooms'、値2は3
  • 多次元配列2の値1は'Onions'、値2は1
  • 多次元配列3の値1は'Olives'、値2は1
  • 多次元配列4の値1は'Zucchini'、値2は1
  • 多次元配列5の値1は'Pepperoni'、値2は2

addColumn()メソッドは列(カラム)の追加、addRows()メソッドは行(ロウ)の追加ですね。

ここにデータの値が配列形式で入っています。ここは外部JSONファイルに置き換えることもできそう。

drawChartメソッド2:チャートオプションを設定

次はブロック2「チャートオプションを設定」

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
  • コメント2:チャートオプションを設定する
  • 変数optionsに連想配列を入れる
  • キー1はtitle、値はHow Much Pizza I Ate Last Night(昨夜のピザの作り方)
  • キー2はwidth、値は400
  • キー3はheight、値は300

「オプション」で設定しているのはグラフのタイトルとサイズですね。

drawChartメソッド3:チャートのインスタント化、描画、オプション渡し

最後、ブロック3「チャートのインスタント化、描画、オプション渡し」です。

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
  • コメント3:チャートをインスタンス化して描画し、いくつかのオプションを渡します。
  • 変数chartgoogle.visualizationプロパティのPieChart()メソッドを複製(インスタンス化)
  • PieChart()メソッドの引数でHTMLのid#chart_divの要素を紐付け
  • chartdraw()メソッドを実行
  • draw()メソッドメソッドの第1引数はdataoptions、第2引数はoptionsメソッドを読み込み。

PieChartが「円グラフ」という意味なので、ここでグラフのタイプをことができそうですね!

※参考:Chart Gallery  |  Charts  |  Google Developers

以上がGoogle ChartsのAPIを読み込んで、データをチャートに描画する、という流れです。ブロックごとに細かくみていくとイメージがわきますね!

最後に

chart.js、c3.jsと比較すると、もちろんそれぞれが独自に定義したメソッド名のちがいはあるんですが、そこまで大きなちがいはないように感じました。データが配列になっているのも共通ですね。

ひきつづき、並行して触れていきたいと思います。とくにGoogle ChartsはGoogleドライブ のスプレッドシートの値を読み込みは興味津々すぎるので是非体験していきたい。あと外部JSONファイルの読み込みもしてみたいです。それではまた!