開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月26日 (金)

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

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

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

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より新規フォームを作成し、以下の設定にします。
(フォーム編集前イメージ)

回答された値を取得

スパイラル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");
?>

グラフ表示ラベルを作成

グラフタイトル、各項目のラベルを作成します。
<?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);
?>

「縦棒グラフ」を作成

「縦棒グラフ」を表示させたい場所に以下のコードを貼り付けてください。
<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 グラフデータ。

「横棒グラフ」を作成

「横棒グラフ」を表示させたい場所に以下のコードを貼り付けてください。
<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 グラフデータ。

「折れ線グラフ」を作成

「折れ線グラフ」を表示させたい場所に以下のコードを貼り付けてください。
<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 グラフデータ。

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

「レーダーチャート」を表示させたい場所に以下のコードを貼り付けてください。
<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で作るグラフ画像のサンプル
解決しない場合はこちら コンテンツに関しての
要望はこちら