Google Chartsを使ってデータの可視化

1.概要

企業などでは、これまでの事業活動の中で大量に蓄積されたデータがあります。また、日々、増え続けています。 筆者も以前は、会社でイントラネットでグラフライブラリ等を利用して社内で共有する進捗状況や予算方針などの 経営諸数値をグラフ化して掲載していました。現在は、BIツールやAIなどを導入したため、手作りのものは利用する ことがなくなりました。個人的な研究や調査結果などでの利用範囲となりました。Web上で掲載する機会も少ない のですが、見える化の一環として便利なものですので良く利用されるグラフをテンプレート(サンプル)として作成して見ました。

2.良く利用するグラフのテンプレート

無料で使えるJavaScriptのグラフライブラリとしては、Chart.js、Chartist.js、Google Chartsなどが良く利用されていますが、 今回は、Google Chartsを利用して見ることにしました。ただ少し心配な点は、Googleのサービスなので、いつサービスが 廃止されるかわからない点があります。練習用ということで、良く利用される代表的なグラフから10種類を選択して、 データ数値やタイトル、要素名などを変更すれば簡単に利用できると思います。
下記のデモをクリックするとサンプルを確認できます。どんなグラフライブラリでも同じですが、デザインやレイアウトに拘り 過ぎるとコードがごちゃごちゃして分かりにくくなりますので、注意が必要です。

DEMO   Google Chartsグラフテンプレート

3.ソースコード

ソースコードは、下記の通りです。ほとんど、公式サイトのギャラリーにあるサンプルをベースにカスタマイズしたものです。

Googleグラフ公式サイト
URL: https://developers.google.com/chart

作成したテンプレートのグラフは、次の10種類です。

・縦棒グラフ
・３Ｄ円グラフ
・積み上げ縦棒グラフ
・複数折れ線グラフ
・ドーナツグラフ(パイチャート)
・折れ線グラフ
・横棒グラフ
・積み上げ(100%)横棒グラフ
・縦棒グラフ(比較)
・面(100%)積み上げグラフ

テキストのフォント(textStyle)、タイトルのフォント(titleTextStyle)や凡例の位置、 フォントサイズ(legend)、チャートエリア(chartArea)の余白の調整などは、options オブジェクトで設定できます。
optionsオブジェクトで重要なのは、chartAreaです。 複数のグラフを並べて表示する場合、余白部分が大きくてうまく表示が収まらない場合があります。 chartAreaで調整することで、エリア内の縦横のサイズを詰めたものとすることができます。 optionsオブジェクトで設定できるプロパティの詳細については、公式サイトで確認して下さい。
4.ソースコードについて

掲載ソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 尚、データの取得やプログラム実行において損害等が生じた場合は、筆者は一切の責任も負いません。全て自己責任でお願いします。

■関連記事
・日本の各種統計データの可視化 (人口・国土)
・日本の各種統計データの可視化 (河川・山・湖沼・温泉)
・日本の各種統計データの可視化 (漁業・農業)