Google Chartsを利用して診断結果をグラフ出力する

こんにちは!若手エンジニアのスパ子です(‘-‘*)

今回はアンケート結果をGoogle Chartsを利用してグラフ出力するフォーム作成をご紹介します!入力された回答結果をサンクスページで取得しグラフ表示します。

参考DEMOはこちら回答結果をもとにグラフ表示します。

▼目次

1. DBの設定
2. フォームの設定
3. 回答された値を取得
4. グラフ表示ラベルを作成
5. 「縦棒グラフ」を作成
6. 「横棒グラフ」を作成
7. 「折れ線グラフ」を作成
8. 「レーダーチャート」を作成

1. DBの設定

診断結果を格納する「診断結果DB」を作成します。

※当記事内でご紹介するプログラムコードでは下記のDBタイトル・差し替えキーワードを利用します。別名で設定される場合は、都度、読み替えを行ってください。

DB名:診断結果DB
DBタイトル:answerDB
各フィールド設定:
・フィールド名:睡眠量
   フィールドタイプ:セレクト
   差し替えキーワード:sleep
   選択肢:1 不充分、2 やや不十分、3 どちらでもない、4 やや充分、5 充分
・フィールド名:運動量
   フィールドタイプ:セレクト
   差し替えキーワード:workout
   選択肢:1 不充分、2 やや不十分、3 どちらでもない、4 やや充分、5 充分
・フィールド名:飲酒量
   フィールドタイプ:セレクト
   差し替えキーワード:drinking
   選択肢:1 少ない、2 やや少ない、3 どちらでもない、4 やや多い、5 多い
・フィールド名:疲労度
   フィールドタイプ:セレクト
   差し替えキーワード:tiring
   選択肢:1 少ない、2 やや少ない、3 どちらでもない、4 やや多い、5 多い
・フィールド名:充実度
   フィールドタイプ:セレクト
   差し替えキーワード:satisfying
   選択肢:1 少ない、2 やや少ない、3 どちらでもない、4 やや多い、5 多い
(DBフィールド設定)
アンケートDB

2. フォームの設定

診断結果DBより新規フォームを作成し、以下の設定にします。
(フォーム編集前イメージ)
アンケートフォーム

3. 回答された値を取得

スパイラルAPI/PHPを利用し、回答された値を取得します。
下記のコードをアンケートフォーム>サンクスページに貼り付けてください。

<!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=ON NAME=SAMPLE -->
<?php
$sleep = $SPIRAL->getContextByFieldTitle("sleep");
$workout = $SPIRAL->getContextByFieldTitle("workout");
$drinking = $SPIRAL->getContextByFieldTitle("drinking");
$satisfying = $SPIRAL->getContextByFieldTitle("satisfying");
$tiring = $SPIRAL->getContextByFieldTitle("tiring");
?>

4. グラフ表示ラベルを作成

グラフタイトル、各項目のラベルを作成します。

<?php
$title1 = "診断結果|縦棒グラフ";
$title1 = urlencode($title1);
$title2 = "診断結果|折れ線グラフ";
$title2 = urlencode($title2);
$title3 = "診断結果|横棒グラフ";
$title3 = urlencode($title3);
$title4 = "診断結果|レーダーチャート";
$title4 = urlencode($title4);
$label_sleep = "睡眠量";
$label_sleep = urlencode($label_sleep);
$label_workout = "運動量";
$label_workout = urlencode($label_workout);
$label_drinking = "飲酒量";
$label_drinking = urlencode($label_drinking);
$label_tiring = "疲労度";
$label_tiring = urlencode($label_tiring);
$label_satisfying = "充実度";
$label_satisfying = urlencode($label_satisfying);
?>

5. 「縦棒グラフ」を作成

「縦棒グラフ」を表示させたい場所に以下のコードを貼り付けてください。

<img src="https://chart.apis.google.com/chart?cht=bvs
&chs=400x400
&chds=0,5
&chg=20,20,1,5
&chxt=x,y
&chxl=0:|<?php echo $label_sleep; ?>|<?php echo $label_workout; ?>|<?php echo $label_drinking; ?>|<?php echo $label_tiring; ?>|<?php echo $label_satisfying; ?>|1:||1|2|3|4|5
&chco=00a7db90
&chbh=35,35
&chtt=<?php echo $title1; ?>
&chxs=1,0088cc,10,0
&chd=t:<?php echo $sleep; ?>,<?php echo $workout; ?>,<?php echo $drinking; ?>,<?php echo $tiring; ?>,<?php echo $satisfying; ?> "/>

各パラメータの詳細は以下です。

cht グラフの種類。「bvs」は縦棒グラフとなります。
chs グラフの大きさ。横×縦。
chds 目盛の最大値と最小値。
chg 補助線。水平間隔,垂直間隔,線の長さ,破線部の長さ。
chxt 軸目盛の表示位置。表示位置: x= X軸下辺、t= X軸上辺、y= Y軸左辺、r= Y軸右辺
chxl 軸目盛の表示文字。
chco グラフの色。
chbh 棒グラフの設定。棒の幅,別の系列との間隔,グループの間隔の順。
chtt グラフタイトル。
chxs ラベル色等の指定。インデックス,色,フォントサイズ,水平位置|・・・の順。
chd グラフデータ。

6. 「横棒グラフ」を作成

「横棒グラフ」を表示させたい場所に以下のコードを貼り付けてください。

<img src="https://chart.apis.google.com/chart?cht=bhg
&chs=400x400
&chds=0,5
&chg=20,20,1,5
&chxt=y,x
&chtt=<?php echo $title3; ?>
&chxl=0:|<?php echo $label_sleep; ?>|<?php echo $label_workout; ?>|<?php echo $label_drinking; ?>|<?php echo $label_tiring; ?>|<?php echo $label_satisfying; ?>|1:|0|1|2|3|4|5
&chxs=1,0088cc,10,0
&chbh=35,20,35
&chco=FF000030
&chd=t:<?php echo $satisfying; ?>,<?php echo $tiring; ?>,<?php echo $drinking; ?>,<?php echo $workout; ?>,<?php echo $sleep; ?> "/>

各パラメータの詳細は以下です。

cht グラフの種類。「bhg」は横棒グラフとなります。
chs グラフの大きさ。横×縦。
chds 目盛の最大値と最小値。
chg 補助線。水平間隔,垂直間隔,線の長さ,破線部の長さ。
chxt 軸目盛の表示位置。表示位置: x= X軸下辺、t= X軸上辺、y= Y軸左辺、r= Y軸右辺
chtt グラフタイトル。
chxl 軸目盛の表示文字。
chxs ラベル色等の指定。インデックス,色,フォントサイズ,水平位置|・・・の順。
chbh 棒グラフの設定。棒の幅,別の系列との間隔,グループの間隔の順。
chco グラフの色。
chd グラフデータ。

7. 「折れ線グラフ」を作成

「折れ線グラフ」を表示させたい場所に以下のコードを貼り付けてください。

<img src="https://chart.apis.google.com/chart?cht=lc
&chco=F40009
&chds=0,5
&chxl=0:|<?php echo $label_sleep; ?>|<?php echo $label_workout; ?>|<?php echo $label_drinking; ?>|<?php echo $label_tiring; ?>|<?php echo $label_satisfying; ?>|1:||1|2|3|4|5
&chtt=<?php echo $title2; ?>
&chg=20,20,1,5
&chxs=1,0088cc,10,0
&chm=o,ff0000,0,,8
&chxt=x,y
&chs=400x400
&chd=t:<?php echo $sleep; ?>,<?php echo $workout; ?>,<?php echo $drinking; ?>,<?php echo $tiring; ?>,<?php echo $satisfying; ?> "/>

各パラメータの詳細は以下です。

cht グラフの種類。「lc」は折れ線グラフとなります。
chco グラフの色。
chds 目盛の最大値と最小値。
chxl 軸目盛の表示文字。
chtt グラフタイトル。
chg 補助線。水平間隔,垂直間隔,線の長さ,破線部の長さ。
chxs ラベル色等の指定。インデックス,色,フォントサイズ,水平位置|・・・の順。
chm マーカー設定。マーカ種,色,系列,データインデックス,サイズ。
chxt 軸目盛の表示位置。表示位置: x= X軸下辺、t= X軸上辺、y= Y軸左辺、r= Y軸右辺
chs グラフの大きさ。横×縦。
chd グラフデータ。

8. 「レーダーチャート」を作成

「レーダーチャート」を表示させたい場所に以下のコードを貼り付けてください。

<img src="https://chart.apis.google.com/chart?cht=r
&chxt=x,y
&chds=0,5
&chg=12.5,12.5,1,5
&chco=FF0000
&chd=t:
<?php echo $sleep; ?>,
<?php echo $workout; ?>,
<?php echo $drinking; ?>,
<?php echo $tiring; ?>,
<?php echo $satisfying; ?>,
<?php echo $sleep; ?>
&chm=B,FF000020,0,0,0
&chxl=1:|0|1|2|3|4|5|0:|<?php echo $label_sleep; ?>|<?php echo $label_workout; ?>|<?php echo $label_drinking; ?>|<?php echo $label_tiring; ?>|<?php echo $label_satisfying; ?>
&chtt=<?php echo $title4; ?>
&chs=400x400 "/>

各パラメータの詳細は以下です。

cht グラフの種類。「r」はレーダーチャートとなります。
chxt 軸目盛の表示位置。表示位置: x= X軸下辺、t= X軸上辺、y= Y軸左辺、r= Y軸右辺
chds 目盛の最大値と最小値。
chg 補助線。水平間隔,垂直間隔,線の長さ,破線部の長さ。
chco グラフの色。
chd グラフデータ。
chm マーカー設定。マーカ種,色,系列,データインデックス,サイズ。
chxl 軸目盛の表示文字。
chtt グラフタイトル。
chs グラフの大きさ。横×縦。

以上で設定は完了です。

今回は以下ページを参照させていただきました。
Google Chart img の記述パラメータ
Google Charts で棒グラフを描く1,縦棒グラフ
Google Chart APIで作るグラフ画像のサンプル

最後まで読んでいただき、ありがとうございました(*^^*)!