今回はchart.jsとajaxを使ってデータを通信してグラフで可視化させたいと思います。
formから数値を送り、シンプルなscatterplotとしてグラフで可視化します。
form
結果
いちいち画面をリフレッシュしなくても送信ボタンで更新されるようになります。
ポイント
- formで記入した情報をサーバーに送信し、サーバーからデータを送信されたものをキャッチしてグラフを描く感じになります。
- jQueryのファイルとChart.jsのファイルをインポートしていないとできないことに注意！
コード
wp-content/themes/twentytwenty/header.php
formの部分
<!--グラフを描画するcanvasを用意-->
<canvas id="myChart3"></canvas>
<!--数値を入力するフォームを用意-->
<div id="postgraph">
<form id="graphform">
<div>
<div style="display:inline-block">
x:<input type="number" name="x_first" required>
</div>
<div style="display:inline-block">
y:<input type="number" name="y_first" required>
</div>
</div>
<div>
<div style="display:inline-block">
x:<input type="number" name="x_second" required>
</div>
<div style="display:inline-block">
y:<input type="number" name="y_second" required>
</div>
</div>
<div>
<div style="display:inline-block">
x:<input type="number" name="x_third" required>
</div>
<div style="display:inline-block">
y:<input type="number" name="y_third" required>
</div>
</div>
<div>
<div style="display:inline-block">
x:<input type="number" name="x_fourth" required>
</div>
<div style="display:inline-block">
y:<input type="number" name="y_fourth" required>
</div>
</div>
<input type="submit" value="送信">
</form>
</div>
<div id="resultarea" style="background-color:#ffff9d; margin-top:15px;"></div>
wp-content/themes/twentytwenty/header.php
Javascriptの部分
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(function($){
// formの送信ボタンが押されたときの処理
$( '#graphform' ).submit( function(event){
// クリックイベントをこれ以上伝播させない
event.preventDefault();
// フォームデータから、サーバへ送信するデータを作成
var fd = new FormData( this );
// サーバー側で何の処理をするかを指定。後ほどphp側で実装する
fd.append('action' , 'drawgraph' );
// ajaxの通信
$.ajax({
type: 'POST',
url: ajaxurl,
data: fd,
processData: false,
contentType: false,
success: function( response ){
var jdata = JSON.parse(response);
$("#resultarea").html(response);
//グラフパラメータの準備
var params = {
type: 'scatter',
data: {
datasets: jdata
}
};
//グラフの作成
var ctx = document.getElementById("myChart3").getContext('2d');
var scatterChart = new Chart(ctx, params);
},
error: function( response ){
$("#resultarea").html( "error" );
}
});
return false;
});
});
</script>
wp-content/themes/twentytwenty/functions.php
// ajaxurlをadmin-ajax.phpに紐づけて置かなければならない
function add_my_ajaxurl() {
?>
<script>
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
</script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );
function drawgraph(){
// POSTされたデータは$_POSTに、連想配列で格納されている
$dataset['label'] = 'Scatter dataset';
$dataset['backgroundColor'] = "rgba(192,75,192,0.4)";
$dataset['borderColor'] = "rgba(192,75,192,1)";
$dataset['pointBorderColor'] = "rgba(192,75,192,1)";
$dataset['pointBorderWidth'] = 1;
$dataset['pointHoverRadius'] = 10;
$dataset['pointRadius'] = 10;
$dataset['data'][] = array('x' => intval($_POST["x_first"]),'y' => intval($_POST["y_first"]));
$dataset['data'][] = array('x' => intval($_POST["x_second"]),'y' => intval($_POST["y_second"]));
$dataset['data'][] = array('x' => intval($_POST["x_third"]),'y' => intval($_POST["y_third"]));
$dataset['data'][] = array('x' => intval($_POST["x_fourth"]),'y' => intval($_POST["y_fourth"]));
$data[] = $dataset;
// echoで、クライアント側に返すデータを送信する
echo json_encode($data);
// dieしておかないと末尾に余計なデータ「0」が付与されるので注意
die();
}
add_action( 'wp_ajax_drawgraph', 'drawgraph' );
add_action('wp_ajax_nopriv_drawgraph', 'drawgraph');
改善点
- グラフの大きさを小さくする
グラフのx軸、y軸の最大値、最小値を設定
php側でcsvを読み込ませてプロットさせる
などもできそうと感じました
