GoogleGraphとAdvanced Custom Fieldsを使って、数値自動挿入グラフを作成する方法

2015年3月22日 00:11
『GoogleGraph』という、グラフ作成プラグインがあります。
このプラグインは、管理画面に数値を打ち込むだけでグラフ化してくれるというものですが、毎月の数値をまとめたり、定型化したもにであれば、毎度数値を打ち込むのは面倒です。
そこで、PHPに記述するだけで、自動で数値を引っ張ってグラフ化する方法をご紹介します。
この記事は最終更新日から1年以上が経過しています。

プラグインのインストール

まず、プラグインを入れましょう。
GoogleGraphダウンロード

カスタムフィールドといえば、こちら。
入れましょう。
Advanced Custom Fieldsダウンロード

自分はRepeater Fieldを使って、株価情報みたいなものをまとめています。
詳しくはこちら。
カスタム投稿必要なし!WordPressで出勤管理表を作る方法

数値の準備

僕の場合、数値を集計するうえで、以下の画像のような入力フォームを準備しています。
WS000001

内容としては、以下の通りです。
第一階層
用途:銘柄ごとに増やすリピートフィールド
フィールド順序:1
フィールドラベル:group
フィールド名:group
フィールドタイプ:Repeater

第二階層(第一階層のリピーター内に入る)
用途:銘柄引用
フィールド順序:1
フィールドラベル:brand
フィールド名:brand
フィールドタイプ:投稿オブジェクト(post_object)

フィールド順序:2
用途:それぞれ日毎の株価を入力するためのリピートフィールド
フィールドラベル:price_g
フィールド名:price_g
フィールドタイプ:Repeater

第三階層(第二階層のリピーター内に入る)
用途:株価の該当日
フィールド順序:1
フィールドラベル:days
フィールド名:days
フィールドタイプ:デイトピッカー(date_picker)
※フォーマットを保存する:yymmdd
※表示フォーマット:yy/mm/dd

用途:株価入力フォーム
フィールド順序:2
フィールドラベル:price
フィールド名:price
フィールドタイプ:数値

家計簿でもなんでも、数値を日毎に入力するフォームが必要となりますが、概ねが以上のようなものです。

コードを作成

ここからが結構ややこしいです。
まずは、配列をはがして、カンマ区切りする必要があります。

該当PHP (single.php等)

<?php
while(has_sub_field('group')){
	$_post = get_sub_field('brand');
	
	/*グラフ用銘柄取得*/
	if($brand_title){
		$brand_title .= ',"'.get_the_title($_post->ID).'"';
	}else{
		$brand_title = '"'.get_the_title($_post->ID).'"';
	}
	
	while(has_sub_field('price_g')){
		/*グラフ用株価取得*/
		$brand_price[get_sub_field('days')][] = get_sub_field('price');
	}
}
?>

以上で、$brand_priceという変数に、グラフ用の数値が配列化して代入されました。

あとは、その数値をグラフ用にカンマ区切りにして出力するだけです。
以下。

foreach($brand_price as $key => $value){
	$price_parts = "";
	foreach($value as $val){
		if($price_parts){
			$price_parts .= ','.$val;
		}else{
			$price_parts = $val;
		}
	}
	$brand_price_all .= '["'.$key.'",'.$price_parts.'],';
}

$legend = "{position: 'top', maxLines:1}";
$vaxis = "{title: '株価', titleTextStyle: {color: 'black'}}";
$haxis = "{title: '期間', titleTextStyle: {color: 'black'}}";
echo do_shortcode('
[lineChart width="100%" 
	legend="'.$legend.'" 
	vaxis="'.$vaxis.'" 
	haxis="'.$haxis.'" 
	curvetype="none"]
		["日付", '.$brand_title.'],'.$brand_price_all.'
[/lineChart]
	');
?>

多分ですが、もっと最適化できると思いますが、自己流で表示できたので、良しとします。

というわけで、以上の方法で表示した例が以下のものです。
2015年3月 第3週 | 低位株日記

総括

このプラグインは色々なところで紹介されていましたが、どれも自分で手入力する方法しかなかったので、自作ものとして紹介しました。

グラフなんて、毎度利用するものでもないのでしょうが、あったら会ったで便利でしょう?と。
それでは。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp