PHP・MySQL・canvasJSを使った動的なチャート生成（その6）

６、　MySQLデータを用いcanvasによるチャート作成

最後に、これまで作成してきたプログラムを利用して、気温のトレンドを表示する動的チャートを作成する。

チャート作成はcanvasJSを使うことにした。canvas は JavaScriptとHTMLでグラフィックを描くアプリである。個人使用であれば無料で使うことができる。Documentも比較的わかりやすく、ホームページには多数のデモサンプルがあるので参考にしながら作成した。

手順：

１）　データ集計期間設定のフォームの作成（POSTメソッド）

プログラム：”input.php” or “input.html”

２）　PSOTデータを受けてMySQLのクエリを作成・実行

プログラム：”chart-sql-canvas.php”
・クエリデータを”canvasJS”にインポートさせるようにJSON形式のデータに変換
・canvasJSでJSONを読み込ませてチャート描画

１）　データ集計期間入力フォームプログラム

データを入力し、MySQLのデータ抽出プログラム”chart-sql-canvas.php”にPOSTメソッドで送る。
htmlの記述を「 echo<<<END ……END;」で囲む場合は、ファイルはphpとなる。

<html>
 <head>
<meta charset = 'utf-8'>
<title>期間入力Test</title>
</head>
 <body>
 データ取得期間を入力し送信ボタンを押してください。
<form method="post" action="chart-sql-canvas.php">
開始日：
<input type="date" name="startdate" value="">
終了日：
<input type="date" name="enddate" value="">
<input type="submit" name="push" value="送信">
</form>
</body>
</html>

２）PSOTデータを受けてMySQLのクエリを作成・実行するプログラムの作成

canvasJSにプロットデータとして入力するためのスクリプト。
完成プログラム”chart-sql-canvas.php”に挿入する。

////////
$stmt->execute();
$dataPoints = array(); // チャートに流し込むJSON形式データを入れる配列
$para = 'temp'; //チャートのY軸に設定するフィールドパラメータ
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
/* Push the results in the array */
$point = array('x'=>strtotime($row['date'])*1000 ,'y'=>$row[$para]);
array_push($dataPoints, $point);
}

新たに作成したスクリプトの説明：

・canvasで描画させるプロットデータ（dataPoints)は、下記のようにJSON形式で記述される。

data:[ 
{// dataSeries  
type: "line",
dataPoints:[
{x:1, y:8}, //dataPoint
{x:2, y:9}, //dataPoint
{x:3, y:4} //dataPoint
]
},

そこで、抽出データをJSON形式にエンコードし、canavsのJavaScript中にecho命令で挿入すれば良い。

dataPoints:<?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>

・日付時刻データは、 xValueType を “dateTime”に設定するとともに、時間をミリセカンド単位のUNIXタイムに置き換える（set xValueType to “dateTime”. You should also note that timestamps used are in milliseconds. You can convert Unix timestamp to milliseconds by multiplying it by 1000.）
⇒　ｘ軸の’date’をUnix秒に変換し、さらに１０００倍する。

'x'=>strtotime($row['date'])*1000

参考URL：
https://ljvmiranda921.github.io/notebook/2017/02/21/make-canvasjs-chart-from-mysql-data/
https://linuxhint.com/javascript-charts-tutorial/

以上のスクリプトを記述した最終プログラムは以下の通り。

<?php
// chart-sql-canvas.php
include 'input.php';  //インプットフォームの読み込み
//初期設定
$startdate=$enddate="";

// login情報ファイル読み込み
require_once 'login-PDO.php';

// データベースに接続する。//////////////
try
{
    $pdo = new PDO($attr, $user, $pass, $opts);
    //echo "データベース接続OK\n";
}
catch (\PDOException $e) //PDOException:PDOが発するエラーを表
{
    throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
// Isset 関数 – 変数がセットされていること、nullではないことを検査する
if (isset($_POST['startdate'])) $startdate= sanitizeString($_POST['startdate']);
if (isset($_POST['enddate'])) $enddate= sanitizeString($_POST['enddate']);
if (strtotime($startdate) > strtotime($enddate)) {
    echo "入力エラー。もう一度入力してください。 ";
    echo  '<a href="' . $_SERVER['HTTP_REFERER'] . '">前に戻る</a>'
    exit();
    
}else {
    $title = $startdate." - ".$enddate;  //canvasJS チャートのタイトル
    $timestamp =strtotime('+1 day'.$enddate); //入力された集計終了日＋２４時間
    $enddate=date('Y-m-d',$timestamp);
    $yymm1 = $startdate;
    $yymm2 = $enddate;

    // SQL文  prepare statementで、引数を受け渡す  
    $export_sql = "SELECT * FROM iida_agri_sensor WHERE date BETWEEN :date1 AND :date2 LIMIT 5000";
    
    //prepareでSQL文をセット
    $stmt = $pdo -> prepare($export_sql);
    //bindValueで値をセット　:date1,:date2を値に置き換える
    $stmt ->  bindValue(':date1', $yymm1);
    $stmt ->  bindValue(':date2', $yymm2);
    $stmt->execute();
    
    ///////
    $stmt->execute();
    $dataPoints = array();  // チャートに流し込むJSON形式データを入れる配列 
    $para = 'temp';             //チャートのY軸に設定するフィールドパラメータ
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        /* Push the results in the array */
        $point = array('x'=>strtotime($row['date'])*1000 ,'y'=>$row[$para]);
        array_push($dataPoints, $point);
    }    
    // データベース接続の切断
    $pdo = null;
}

//　PSOTデータのサニタイズ処理
function sanitizeString($var)
{
    if (get_magic_quotes_gpc())
        $var = stripslashes($var);
        $var = htmlentities($var);
        $var = strip_tags($var);
        return $var;
}
?>

///////　以下にチャートを表示するHTML、canvasJSのJavaScriptsを入れる ////

チャートを表示するHTML、canvasJSのJavaScripts

<html>
<head> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script type="text/javascript">
 
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,

title:{
text: "<?php echo $title?>", 
},

/** Set axis properties here*/
axisX:{
/*gridColor: "lightblue",*/
/*gridThickness:1,*/
interlacedColor: "#F0F8FF"
}, 
axisY:{
/*gridColor: "lightblue",*/
suffix: "℃"
}, 
legend:{
fontSize: 20,
fontFamily: "tamoha",
fontColor: "" 
}, 
data: [
{ 
type: "line",
showInLegend: true,
name:"temperture",
xValueType: "dateTime",
dataPoints:<?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}
]
});
 chart.render();
}
</script>
</head>
<body>
<hr />
<pre> 検索結果：<?php echo $title?></pre><br>
<div id="chartContainer" style="height: 300px; width: 80%;">
</div>
</body>
</html>

プログラム実行結果：