PHPで検索結果に応じたグラフ(Chart.js)表示を行いたい

前提・実現したいこと

データベースの値を取得してChart.jsを用いて折れ線グラフ表示をしたのですが、下記コードではテーブル内データ全てが横軸表示されてしまうので、検索結果に応じたグラフ表示を行いたいです。

例えば、19と検索したらdateが2022-01-19のデータのみグラフ表示したいです。

自分でも色々と試してみたのですがうまくいかなかったので、ぜひご教授ください。

※グラフは縦軸:カウント数(up_count,down_count)
横軸:時間(time)

テーブル情報

date	time	up_count	up_count
2022-01-19	09:00:00	10	20
2022-01-19	15:00:00	30	35
2022-01-20	09:00:00	15	10
2022-01-20	15:00:00	30	25

ソースコード

graph.php
1<?php
2include('funcs.php');
3
4$pdo = db_connect();
5
6$up = '';
7$down = '';
8$date = '';
9$time = '';
10
11$stmt = $pdo->prepare("SELECT * FROM count");
12$status = $stmt->execute();
13
14while($r = $stmt->fetch(PDO::FETCH_ASSOC)){
15	$up = $up . $r['up_count'].',';
16	$down = $down . $r['down_count'].',';
17	$date = $date . '"'. $r['date'].'",';
18	$time = $time . '"'. $r['time'].'",';
19}
20
21$up = trim($up,",");
22$down = trim($down,",");
23$date = trim($date,",");
24$time = trim($time,",");
25
26?>
27
28<!DOCTYPE html>
29<html lang="en">
30<head>
31    <meta charset="UTF-8">
32    <meta name="viewport" content="width=device-width, initial-scale=1.0">
33    <title>グラフテスト</title>
34</head>
35<body>
36	<form action="graph.php" method="post">
37		Date:<input type="text" name="date" value="<?php echo $_POST['date']?>"><br>
38		<input type="submit">
39	</form>
40    <canvas id="myChart"></canvas>
41    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
42    <script>
43    var ctx = document.getElementById("myChart").getContext("2d");
44    var device1Chart = new Chart(ctx, {
45        type: 'line',
46        data: {
47            labels: [<?php echo $time ?>],
48            datasets: [{
49                label: "up",
50                data: [<?php echo $up ?>],
51                backgroundColor: 
52                    'rgba(255, 99, 132, 0.2)',
53                borderColor: 
54                    'rgba(255, 99, 132, 1)',
55                borderWidth: 1
56                     },{
57                label: "down",
58                data: [<?php echo $down ?>],
59                backgroundColor: 
60                   'rgba(54, 162, 235, 0.2)',
61                borderColor: 
62                    'rgba(54, 162, 235, 1)',
63                borderWidth: 1
64            }]
65        },
66        options: {
67            scales: {
68                yAxes: [{
69                    ticks: {
70                        beginAtZero: true,
71                    }
72                }]
73            }
74        }
75    });
76
77   </script>
78</body>
79</html>

行動規範の内容に同意します

回答1件

ベストアンサー

php
1$stmt = $pdo->prepare("SELECT * FROM count");

このクエリーにWHERE句を加えることで、欲しいデータに絞り込んだりすることができます。

その前に、

例えば、19と検索したらdateが2022-01-19のデータのみグラフ表示したい

とのことですが、フォームなどで日付文字列を年月日入力する前提で考えたらいいかもしれません。
（web上にカレンダー表示して、クリックしたら年月日文字列が得られるような仕組みを前提に。）
なので、「yyyy-mm-dd」形式の文字列があるという前提で話を進めます。

mysqlを使ったことがないですが多くの人が使っているであろうmysqlを前提に話を進めますと、
テーブルのdateカラムがDATE型であっても文字列系データ型であっても、たぶんこんな感じになるかと。
（DATE型の場合には必要に応じて型変換する関数を加えるかもしれませんが。）

php
1$stmt = $pdo->prepare("SELECT * FROM `count` WHERE `date` = :hiduke ORDER BY `time`");
2$stmt->bindValue(':hiduke', $hiduke, PDO::PARAM_STR);
3$status = $stmt->execute();

などとすることで、countテーブルに対してdateカラムで絞り込みつつ、timeカラムで並べ替えができるかと思われます。

なお、countテーブルやdateカラムやtimeカラムは、データベース上の予約語と名称がかぶってややこしくなるため、
mysqlでは「`」バッククォートで括らないとうまく行かないと思います。
PostgreSQLでは「"」ダブルクォーテーションを使います。
まぁ、いつもバッククォートをつけるのは面倒なので、予約語とかぶらないような命名付けをふつうはするかもしれません。

投稿2022/01/24 06:56

編集2022/01/24 06:59