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

-
1.概要

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

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

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

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

3.ソースコード

ソースコードは、下記の通りです。ほとんど、公式サイトのギャラリーにあるサンプルをベースにカスタマイズしたものです。
作成したテンプレートのグラフは、次の10種類です。
    ・縦棒グラフ
    ・３Ｄ円グラフ
    ・積み上げ縦棒グラフ
    ・複数折れ線グラフ
    ・ドーナツグラフ(パイチャート)
    ・折れ線グラフ
    ・横棒グラフ
    ・積み上げ(100%)横棒グラフ
    ・縦棒グラフ(比較)
    ・面(100%)積み上げグラフ
テキストのフォント(textStyle)、タイトルのフォント(titleTextStyle)や凡例の位置、 フォントサイズ(legend)、チャートエリア(chartArea)の余白の調整などは、options オブジェクトで設定できます。
optionsオブジェクトで重要なのは、chartAreaです。 複数のグラフを並べて表示する場合、余白部分が大きくてうまく表示が収まらない場合があります。 chartAreaで調整することで、エリア内の縦横のサイズを詰めたものとすることができます。 optionsオブジェクトで設定できるプロパティの詳細については、公式サイトで確認して下さい。
graph.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
       google.charts.load('current', {'packages':['corechart']});
       google.charts.setOnLoadCallback(drawChart1);
       google.charts.setOnLoadCallback(drawChart2);
       google.charts.setOnLoadCallback(drawChart3);
       google.charts.setOnLoadCallback(drawChart4);
       google.charts.setOnLoadCallback(drawChart5);
       google.charts.setOnLoadCallback(drawChart6);
       google.charts.setOnLoadCallback(drawChart7);
       google.charts.setOnLoadCallback(drawChart8);
       google.charts.setOnLoadCallback(drawChart9);
       google.charts.setOnLoadCallback(drawChart10);
 
       //***** 縦棒グラフ *****
       function drawChart1() {
          var data = google.visualization.arrayToDataTable([
              ["Item", "Value", { role: "style" } ],
              ["AAAAAA", 8, "color: #3366cc"],
              ["BBBBBB", 11, "color: #dc3912"],
              ["CCCCCC", 19, "color: #ff9900"],
              ["DDDDDD", 25, "color: #109618"],
              ["EEEEEE", 33, "color: #990099"],
              ["FFFFFF", 40, "color: #0099c6"]
          ]);
          var view = new google.visualization.DataView(data);
          view.setColumns([0, 1,
               { calc: "stringify",
                 sourceColumn: 1,
                 type: "string",
                 role: "annotation" },
                 2]);
          var options = {
              'title': "縦棒グラフ－XXXXX別",
              'width': 450,
              'height': 260,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'bar': {groupWidth: "80%"},
              'legend': { position: "none" },
              'chartArea':{left:30,top:60,width:'85%',height:'55%'},
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("chart_div1"));
          chart.draw(view, options);
       }
 
       //***** ３Ｄ円グラフ *****
       function drawChart2() {
          var data = new google.visualization.DataTable();
              data.addColumn('string', 'Topping');
              data.addColumn('number', 'Slices');
              data.addRows([
                  ['AAAAAA', 500],
                  ['BBBBBB', 100],
                  ['CCCCCC', 260],
                  ['EEEEEE', 320],
                  ['FFFFFF', 200]
          ]);
          var view = new google.visualization.DataView(data);
          var options = {'title':'３Ｄ円グラフ－XXXXX別',
              'width':350,
              'height':260,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'chartArea':{left:30,top:60,width:'90%',height:'55%'},
              'is3D': true
          };
          var chart= new google.visualization.PieChart(document.getElementById('chart_div2'));
          chart.draw(data, options);
       }
 
       //***** 積み上げ縦棒グラフ *****
       function drawChart3() {
          var data = google.visualization.arrayToDataTable([
              ['', 'AAAAAA', 'BBBBBB', 'CCCCCC', 'DDDDDD',
               'EEEEEE', 'FFFFFF', { role: 'annotation' } ],
              ['2015年', 10, 24, 20, 32, 18, 5, ''],
              ['2016年', 16, 22, 23, 30, 16, 9, ''],
              ['2017年', 28, 19, 29, 30, 12, 13, ''],
              ['2018年', 21, 15, 20, 32, 13, 10, ''],
              ['2019年', 30, 22, 18, 31, 16, 8, ''],
              ['2020年', 28, 15, 22, 33, 12, 15, '']
          ]);
          var view = new google.visualization.DataView(data);
          var options = {'title':'積み上げ縦棒グラフ－年度別・XXXXX別',
              'width': 800,
              'height': 260,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'legendTextStyle': { fontSize: 11 },
              'legend': { position: 'right', maxLines: 3 },
              'bar': { groupWidth: '75%' },
              'chartArea':{left:30,top:60,width:'75%',height:'55%'},
              'isStacked': true
          };
          var chart= new google.visualization.ColumnChart(document.getElementById('chart_div3'));
          chart.draw(data, options);
       }
 
       //***** 複数折れ線グラフ *****
       function drawChart4() {
          var data = google.visualization.arrayToDataTable([
              ['', 'AAAAAA', 'BBBBBB', 'CCCCCC', 'DDDDDD', 'FFFFFF'],
              ['1月', 20, 16, 10, 18, 13],
              ['2月', 18, 18, 10, 18, 18],
              ['3月', 16, 26, 12, 20, 20],
              ['4月', 13, 27, 12, 20, 19],
              ['5月', 22, 19, 16, 20, 16],
              ['6月', 25, 6, 16, 24, 15],
              ['7月', 28, 15, 16, 24, 20],
              ['8月', 25, 13, 16, 24, 25],
              ['9月', 14, 12, 16, 24, 22],
              ['10月', 13, 15, 18, 24, 15],
              ['11月', 8, 20, 18, 24, 18],
              ['12月', 18, 12, 18, 24, 20]
          ]);
          var view = new google.visualization.DataView(data);
          var options = {
              'title': '複数折れ線グラフ－月別・XXXXX別',
              'width':450,
              'height': 300,
              'lineWidth': 2, 'pointSize': 6,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'bar': { groupWidth: '85%' },
              'legendTextStyle': { fontSize: 11 },
              'legend': { position: "top" },
              'chartArea':{left:30,top:60,width:'90%',height:'55%'},
              'isStacked': true
          };
          var chart= new google.visualization.LineChart(document.getElementById('chart_div4'));
          chart.draw(data, options);
       }
 
       //***** ドーナツグラフ(パイチャート) *****
       function drawChart5() {
          var data = new google.visualization.DataTable();
              data.addColumn('string', 'Topping');
              data.addColumn('number', 'Slices');
              data.addRows([
                  ['AAAAAA', 500],
                  ['BBBBBB', 400],
                  ['CCCCCC', 300],
                  ['EEEEEE', 200],
                  ['FFFFFF', 100]
          ]);
          var view = new google.visualization.DataView(data);
          var options = {'title':'ドーナツグラフ(パイチャート)－XXXXX別',
              'width':350,
              'height':300,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'chartArea':{left:30,top:60,width:'90%',height:'55%'},
              'pieHole': 0.4
          };
          var chart= new google.visualization.PieChart(document.getElementById('chart_div5'));
          chart.draw(data, options);
       }
 
       //***** 折れ線グラフ *****
       function drawChart6() {
          var data = google.visualization.arrayToDataTable([
              ['Time(M)','AAAAAA'],
              ['0',1000],
              ['1',1200],
              ['2',1120],
              ['3',540],
              ['4',900],
              ['5',1200],
              ['6',1120],
              ['7',540],
              ['8',900],
              ['9',1200],
              ['10',1120],
              ['11',540],
              ['12',900],
              ['13',1200],
              ['14',1120],
              ['15',540],
              ['16',900],
              ['17',1200],
              ['18',1120],
              ['19',540],
              ['20',900],
              ['21',1200],
              ['22',1120],
              ['23',540]
          ]);
          var view = new google.visualization.DataView(data);
          var options = {
              'title': '折れ線グラフ－時間帯別',
              'width':800,
              'height': 300,
              'lineWidth': 2,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'chartArea':{left:60,top:60,width:'95%',height:'55%'},
              'curveType': 'function',
              'legend': { position: 'top' }
          };
          var chart = new google.visualization.LineChart(document.getElementById('chart_div6'));
          chart.draw(data, options);
       }
 
       //***** 横棒グラフ *****
       function drawChart7() {
          var data = google.visualization.arrayToDataTable([
              ["Item", "Value", { role: "style" } ],
              ["AAAAAA", 10, "color: #3366cc"],
              ["BBBBBB", 20, "color: #dc3912"],
              ["CCCCCC", 30, "color: #ff9900"],
              ["DDDDDD", 40, "color: #109618"],
              ["EEEEEE", 50, "color: #990099"],
              ["FFFFFF", 60, "color: #0099c6"]
          ]);
          var view = new google.visualization.DataView(data);
          view.setColumns([0, 1,
               { calc: "stringify",
                 sourceColumn: 1,
                 type: "string",
                 role: "annotation" },
                 2]);
          var options = {
              'title': "横棒グラフ－XXXXX別",
              'width': 400,
              'height': 300,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'bar': {groupWidth: "80%"},
              'legend': { position: "none" },
              'chartArea':{left:60,top:60,width:'85%',height:'55%'},
          };
          var chart = new google.visualization.BarChart(document.getElementById("chart_div7"));
          chart.draw(view, options);
       }
 
       //***** 積み上げ(100%)横棒グラフ *****
       function drawChart8() {
          var data = google.visualization.arrayToDataTable([
              ['', 'AAAAAA', 'BBBBBB', 'CCCCCC', 'DDDDDD',
               'EEEEEE', 'FFFFFF', { role: 'annotation' } ],
              ['2010', 10, 24, 20, 32, 18, 5, ''],
              ['2020', 16, 22, 23, 30, 16, 9, ''],
              ['2030', 28, 19, 29, 30, 12, 13, '']
          ]);
          var view = new google.visualization.DataView(data);
          var options_fullStacked = {
              'title': '積み上げ(100%)横棒グラフ－年度別',
              'isStacked': 'percent',
              'width': 400,
              'height': 300,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'legend': {position: 'top', maxLines: 3},
              'chartArea':{left:40,top:60,width:'85%',height:'55%'},
              'hAxis': {
                 minValue: 0,
                 ticks: [0, .3, .6, .9, 1]
              }
          };
          var chart = new google.visualization.BarChart(document.getElementById("chart_div8"));
          chart.draw(view, options_fullStacked);
       }
        
       //***** 縦棒(比較)グラフ *****
       function drawChart9() {
          var data = google.visualization.arrayToDataTable([
              ['Year', 'AAAAAA', 'BBBBBB'],
              ['2017', 1000, 400],
              ['2018', 1170, 460],
              ['2019', 660, 1120],
              ['2020', 1030, 540]
          ]);
          var view = new google.visualization.DataView(data);
          var options = {
              'title': '縦棒(比較)グラフ－年度別',
              'width': 400,
              'height': 260,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'bar': {groupWidth: "80%"},
              'legend': { position: "top" },
              'chartArea':{left:40,top:60,width:'85%',height:'55%'},
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("chart_div9"));
          chart.draw(view, options);
       }
 
       //***** 面(100%)積み上げグラフ *****
       function drawChart10() {
          var data = google.visualization.arrayToDataTable([
              ['Year', 'AAAAAA', 'BBBBBB','CCCCCC'],
              ['2017', 1000, 400, 250],
              ['2018', 1170, 460, 550],
              ['2019', 660, 1120, 890],
              ['2020', 1030, 540, 680]
          ]);
          var view = new google.visualization.DataView(data);
          var options = {
              'title': '面(100%)積み上げグラフ－年度別',
              'isStacked': 'percent',
              'width': 400,
              'height': 260,
              'titleTextStyle': { fontSize: 16,color:'#0000dd' },
              'legend': {position: 'top', maxLines: 3},
              'chartArea':{left:40,top:60,width:'85%',height:'55%'},
              'vAxis': {
                  minValue: 0,
                  ticks: [0, .3, .6, .9, 1]
              }
          };
          var chart = new google.visualization.AreaChart(document.getElementById('chart_div10'));
          chart.draw(data, options);
       }
  </script>
  </head>
  <body>
    <center>
      <table width=800  border=0 cellspacing=0 cellpadding=0 bgcolor="#ffffff">
       <tr>
            <td width=450 align="absmiddle">
                <div id="chart_div1"></div>
            </td>
            <td width=350 align="right">
                <div id="chart_div2"></div>
            </td>
       </tr>
       <tr>
            <td width=800 colspan=2 align="absmiddle">
                <div id="chart_div3"></div>
            </td>
       </tr>
       <tr>
            <td width=450 align="absmiddle">
                <div id="chart_div4"></div>
            </td>
            <td width=350 align="right">
                <div id="chart_div5"></div>
            </td>
       </tr>
       <tr>
            <td width=800 colspan=2 align="absmiddle">
                <div id="chart_div6"></div>
            </td>
       </tr>
       <tr>
            <td width=400 align="absmiddle">
                <div id="chart_div7"></div>
            </td>
            <td width=400 align="absmiddle">
                <div id="chart_div8"></div>
            </td>
       </tr>
       <tr>
            <td width=400 align="absmiddle">
                <div id="chart_div9"></div>
            </td>
            <td width=400 align="absmiddle">
                <div id="chart_div10"></div>
            </td>
       </tr>
       </table>
    </center>
  </body>
</html>

4.ソースコードについて

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

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

コメント

コメントを投稿

このブログの人気の投稿

Excelアドインで日本語形態素解析

-
イメージ
1.概要 日本語形態素解析とは、文法的な情報の注記の無い自然言語のテキストデータ（文）から、対象言語の文法や、辞書と呼ばれる単語の品詞等の情報に基づき、 形態素（Morpheme, おおまかにいえば、言語で意味を持つ最小単位）の列に分割し、それぞれの形態素の品詞等を判別する作業です。（出典:Wikipedia） 形態素解析エンジンとしては、Mecabが有名です。筆者もPythonにインストールして、テキストマイニングに利用しています。しかし、会社などで利用したい 場合は、このような環境を個人的な利用目的で構築するにしても、セキュリティ上の問題などでIT管理者などから利用許可が下りない場合があります。 今回は、普段から利用しているExcelのアドインでテキストマイニングをして見たいと思います。特別なサーバーなどへのインストールなしで、 個人PCにアドインのインストール許可さえもらえれば誰でも簡単にテキストマイニング(ワードクラウド)分析をすることができます。 2.利用方法 (1)Excelのアドインである「E2D3」を追加します。「挿入」→「アドインを入手」をクリックし      「データ分析」を選択して、「E2D3」を探します。見つかったら、「追加」をクリックしま      す。これで、「E2D3」が利用できるようになります。 (2)分析するデータ(テキスト文書)を準備します。 (3)下記サイトの日本語形態素解析サービス(無料ツール)を利用して、文書を解析し品詞毎に分解、      統計データとして出力します。 日本語形態素解析サービス(無料ツール) URL : https://opendata-web.site/tool/parse/ ※ブックマーク等に登録しておくと良いでしょう。 (4)分析するデータ(テキスト文書)をテキストボックスに貼付け、解析ボタンをクリックします。 (5)解析結果が日本語形態素と統計の2種類画面出力されるので、統計の表をコピペして、Excelの      空きシートに一時的に貼り付けます。 (...

階層構造JSONファイルの作成

-
イメージ
1.はじめに 仕事や趣味でいろいろなデータを扱いますが、プログラミングで扱うデータ形式も多種多様でデータベース、テキスト、csv、xml、json形式など 思い付くだけで数十種類でてきます。データの見える化 (可視化) をやりたくて階層構造のJSON形式のファイルを扱う必要性があり、 元データ収集・編集 ⇒ Excelでデータ作成 ⇒ CSV出力 ⇒ 階層構造のJSONファイルへ変換出力と言ったステップでJSONファイルを作成して見ましたので紹介致します。 2.階層構造CSVtoJSONコンバータ 最初は、テキストエディタで手作業でJSONファイルを作成しょうと試みましたが、{}の対応付けや[,などの挿入漏れなど ミスすることが多くてデータを読み込むとエラーで動かないことの連続でした。何とか効率良く元データより階層構造の JSON形式のファイルを作成することができないものかとネット検索しても意図したものを見つけ出すことが出来ませんでした。 そこで今回、試行錯誤してExcel VBAで作成した 「階層構造CSVtoJSONコンバータ」 によるデータ作成手順をまとめて見ました。 階層構造のJSONファイルとは、 親、子、孫、曾孫・・・といった 階層構造のデータ形式のァイル です。 2-1.データの収集について まずは、目的とすべき元となるデータを収集しなければなりません。データの入手や収集手段はいろいろあると思いますが、 1回限りでのみ利用する場合や不定期、日次、週次、月次など継続的に利用する場合に応じて効率良い方法を選択する必要があります。 企業では自社内の各種システムにて収集や加工・編集などができるツール類もあると思いますが、個人ではなかなか揃えられません。 尚、今回は小規模なデータを扱うことを前提としているので効率的なデータの収集方法などについては別の機会にでも考えていきたいと 思います。ここでは、 「階層構造CSVtoJSONコンバータ」 の説明のためのテストデータを利用しての手順について説明します。 2-2.作成手順 (1)元データの準備 (テスト用に鳥類目録データの一部を利用) (2)Excelで元データを利用して、階層構造のデータ表を作成する。     ※【お願い】ファイルの終端判定のため、A列の末...

キーボードのキーコードの一覧表

-
イメージ
1.概要 HSPやExcel VBAなどを利用していて、キーボードのキー定数が知りたい場合があります。その都度、ネットで調べているのが手間なので、 一覧表にして見ました。このキーコードは、 Win32API の keybd_event 関数等を利用して送信することができるコードです。 プログラム上からキーコードを送信する場合は、誤操作防止のため十分なウェイトを入れるなりの工夫が必要です。 2.キーボードのキーコード一覧表 キーボードのキーコード一覧表です。全部で127個あります。 キーボードのキーコード一覧表 No. 記号定数名 値 ( HEX ) 値 ( DEC ) 意味 ( 該当するキー ) 1  VK_LBUTTON $01 01 2  VK_RBUTTON $02 02 3  VK_CANCEL $03 03  Cancel（[Ctrl]+[Break]) 4  VK_MBUTTON $04 04 5  VK_BACK $08 08  [BackSpace] 6  VK_TAB $09 09  [Tab] 7  VK_CLEAR $0C 12 8  VK_RETURN $0D 13  [Enter] 9  VK_SHIFT $10 16  [Shift] 10  VK_CONTROL $11 17  [Ctrl] 11  VK_MENU $12 18  [Alt] 12  VK_PAUSE $13 19  [Pause] 13  VK_CAPITAL $14 20  [CapsLock] 14  VK_ESCAPE $1B 27  [Esc] 15  VK_SPACE $20 32  [スペースキー] 16  VK_PRIOR $2...