我将使用以下 PHP 代码从 MySQL 数据库中提取温度传感器数据到一个 PHP 文件中:
在我的 php 页面中,一个 flot 图表网格显示在我的占位符中,但没有数据显示。
如果我使用以下格式将数据硬编码到变量 dataset1 中,则会出现图表:[[1, 300],[2, 600],[3, 550],[4, 400],[5, 300]];
我认为问题可能是由于我的 json 数据格式不正确,在 php 部分需要对其进行格式化以便于 flot 图表绘制。
非常抱歉,我是 flot 图表的新手,在发布此问题之前已尝试了 stackoverflow 中的许多类似解决方案,但没有成功。非常感谢您提供任何帮助!
<?php
$hostname = 'xxxxx';
$username = 'xxxxx';
$password = 'xxxxx';
$dbname="measurements";
$usertable="temperature";
try {
$dbh = new PDO("mysql:host=$hostname;dbname=measurements",
$username, $password);
/*** The SQL SELECT statement ***/
$sth = $dbh->prepare("
SELECT
ROUND(AVG(`temperature`),1) AS temperature,
TIMESTAMP(LEFT(`dtg`,16)) AS dtg
FROM `temperature`
GROUP BY LEFT(`dtg`,16)
ORDER BY `dtg` DESC
LIMIT 0,800
");
$sth->execute();
/* Fetch all of the remaining rows in the result set */
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
/*** close the database connection ***/
$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
function make_pair($date, $amount) {
return array($date, $amount);
}
$json_data = json_encode($result, JSON_NUMERIC_CHECK);
?>
我随后使用JavaScript在flot图中绘制此数据:
<script type="text/javascript">
//put array into javascript variable
var dataset1 = <?php echo json_encode($result); ?>;
//plot
$(document).ready(function () {
$.plot($("#placeholder"), dataset1 );
});
</script>
当我在浏览器中打开 PHP 文件并查看 JavaScript 控制台时,可以看到数据正常传输并保存为变量 dataset1。
它的样子是这样的:
//put array into javascript variable
var dataset1 = [{"temperature":"19.6","dtg":"2016-07-28 12:53:00"},{"temperature":"19.5","dtg":"2016-07-28 12:52:00"},{"temperature":"19.5","dtg":"2016-07-28 12:51:00"},{"temperature":"19.6","dtg":"2016-07-28 12:50:00"},{"temperature":"19.6","dtg":"2016-07-28 12:49:00"},{"temperature":"19.6","dtg":"2016-07-28 12:48:00"},{"temperature":"19.6","dtg":"2016-07-28 12:47:00"},{"temperature":"19.6","dtg":"2016-07-28 12:46:00"},{"temperature":"19.6","dtg":"2016-07-28 12:45:00"},{"temperature":"19.6","dtg":"2016-07-28 12:44:00"},{"temperature":"19.7","dtg":"2016-07-28 12:43:00"},{"temperature":"19.7","dtg":"2016-07-28 12:42:00"},{"temperature":"19.7","dtg":"2016-07-28 12:41:00"},{"temperature":"19.7","dtg":"2016-07-28 12:40:00"},{"temperature":"19.7","dtg":"2016-07-28 12:39:00"},{"temperature":"19.7","dtg":"2016-07-28 12:38:00"},{"temperature":"19.8","dtg":"2016-07-28 12:37:00"},{"temperature":"19.8","dtg":"2016-07-28 12:36:00"},{"temperature":"19.8","dtg":"2016-07-28 12:35:00"},{"temperature":"19.8","dtg":"2016-07-28 12:34:00"},{"temperature":"19.8","dtg":"2016-07-28 12:33:00"},{"temperature":"19.8","dtg":"2016-07-28 12:32:00"},{"temperature":"19.8","dtg":"2016-07-28 12:31:00"},{"temperature":"19.8","dtg":"2016-07-28 12:30:00"},{"temperature":"19.9","dtg":"2016-07-28 12:29:00"},{"temperature":"19.9","dtg":"2016-07-28 12:28:00"},{"temperature":"19.9","dtg":"2016-07-28 12:27:00"},{"temperature":"19.9","dtg":"2016-07-28 12:26:00"},{"temperature":"19.9","dtg":"2016-07-28 12:25:00"},{"temperature":"19.9","dtg":"2016-07-28 12:24:00"},{"temperature":"20.0","dtg":"2016-07-28 12:23:00"},{"temperature":"20.0","dtg":"2016-07-28 12:22:00"},{"temperature":"20.1","dtg":"2016-07-28 12:21:00"},{"temperature":"20.1","dtg":"2016-07-28 12:20:00"},{"temperature":"20.1","dtg":"2016-07-28 12:19:00"},{"temperature":"20.0","dtg":"2016-07-28 12:18:00"},{"temperature":"20.0","dtg":"2016-07-28 12:17:00"},{"temperature":"20.0","dtg":"2016-07-28 12:16:00"},{"temperature":"20.0","dtg":"2016-07-28 12:15:00"},{"temperature":"20.0","dtg":"2016-07-28 12:14:00"},{"temperature":"20.0","dtg":"2016-07-28 12:13:00"},{"temperature":"20.0","dtg":"2016-07-28 12:12:00"},{"temperature":"20.0","dtg":"2016-07-28 12:11:00"},{"temperature":"19.9","dtg":"2016-07-28 12:10:00"},{"temperature":"20.0","dtg":"2016-07-28 12:09:00"},{"temperature":"20.0","dtg":"2016-07-28 12:08:00"},{"temperature":"20.0","dtg":"2016-07-28 12:07:00"},{"temperature":"20.0","dtg":"2016-07-28 12:06:00"},{"temperature":"19.9","dtg":"2016-07-28 12:05:00"},{"temperature":"19.9","dtg":"2016-07-28 12:04:00"},{"temperature":"19.9","dtg":"2016-07-28 12:03:00"},{"temperature":"19.9","dtg":"2016-07-28 12:02:00"},{"temperature":"19.9","dtg":"2016-07-28 12:01:00"},{"temperature":"19.9","dtg":"2016-07-28 12:00:00"},{"temperature":"19.9","dtg":"2016-07-28 11:59:00"},{"temperature":"19.9","dtg":"2016-07-28 11:58:00"},{"temperature":"19.8","dtg":"2016-07-28 11:57:00"},{"temperature":"19.8","dtg":"2016-07-28 11:56:00"},{"temperature":"19.8","dtg":"2016-07-28 11:55:00"},{"temperature":"19.8","dtg":"2016-07-28 11:54:00"},{"temperature":"19.8","dtg":"2016-07-28 11:53:00"},{"temperature":"19.7","dtg":"2016-07-28 11:52:00"},{"temperature":"19.7","dtg":"2016-07-28 11:51:00"},{"temperature":"19.7","dtg":"2016-07-28 11:50:00"},{"temperature":"19.7","dtg":"2016-07-28 11:49:00"},{"temperature":"19.7","dtg":"2016-07-28 11:48:00"},{"temperature":"19.7","dtg":"2016-07-28 11:47:00"},{"temperature":"19.6","dtg":"2016-07-28 11:46:00"},{"temperature":"19.7","dtg":"2016-07-28 11:45:00"},{"temperature":"19.6","dtg":"2016-07-28 11:44:00"},{"temperature":"19.6","dtg":"2016-07-28 11:43:00"},{"temperature":"19.6","dtg":"2016-07-28 11:42:00"},{"temperature":"19.6","dtg":"2016-07-28 11:41:00"},{"temperature":"19.6","dtg":"2016-07-28 11:40:00"},{"temperature":"19.6","dtg":"2016-07-28 11:39:00"},{"temperature":"19.6","dtg":"2016-07-28 11:38:00"},{"temperature":"19.6","dtg":"2016-07-28 11:37:00"},{"temperature":"19.6","dtg":"2016-07-28 11:36:00"},{"temperature":"19.6","dtg":"2016-07-28 11:35:00"},{"temperature":"19.6","dtg":"2016-07-28 11:34:00"},{"temperature":"19.5","dtg":"2016-07-28 11:33:00"},{"temperature":"19.5","dtg":"2016-07-28 11:32:00"},{"temperature":"19.5","dtg":"2016-07-28 11:31:00"},{"temperature":"19.5","dtg":"2016-07-28 11:30:00"},{"temperature":"19.5","dtg":"2016-07-28 11:29:00"},{"temperature":"19.5","dtg":"2016-07-28 11:28:00"},{"temperature":"19.5","dtg":"2016-07-28 11:27:00"},{"temperature":"19.5","dtg":"2016-07-28 11:26:00"},{"temperature":"19.5","dtg":"2016-07-28 11:25:00"},{"temperature":"19.5","dtg":"2016-07-28 11:24:00"},{"temperature":"19.4","dtg":"2016-07-28 11:23:00"},{"temperature":"19.4","dtg":"2016-07-28 11:22:00"},{"temperature":"19.4","dtg":"2016-07-28 11:21:00"},{"temperature":"19.4","dtg":"2016-07-28 11:20:00"},{"temperature":"19.4","dtg":"2016-07-28 11:19:00"},{"temperature":"19.4","dtg":"2016-07-28 11:18:00"},{"temperature":"19.4","dtg":"2016-07-28 11:17:00"},{"temperature":"19.4","dtg":"2016-07-28 11:16:00"},{"temperature":"19.4","dtg":"2016-07-28 11:15:00"},{"temperature":"19.4","dtg":"2016-07-28 11:14:00"},{"temperature":"19.3","dtg":"2016-07-28 11:13:00"},{"temperature":"19.3","dtg":"2016-07-28 11:12:00"},{"temperature":"19.3","dtg":"2016-07-28 11:11:00"},{"temperature":"19.3","dtg":"2016-07-28 11:10:00"},{"temperature":"19.3","dtg":"2016-07-28 11:09:00"},{"temperature":"19.3","dtg":"2016-07-28 11:08:00"},{"temperature":"19.3","dtg":"2016-07-28 11:07:00"},{"temperature":"19.3","dtg":"2016-07-28 11:06:00"},{"temperature":"19.3","dtg":"2016-07-28 11:05:00"},{"temperature":"19.3","dtg":"2016-07-28 11:04:00"},{"temperature":"19.2","dtg":"2016-07-28 11:03:00"},{"temperature":"19.2","dtg":"2016-07-28 11:02:00"},{"temperature":"19.2","dtg":"2016-07-28 11:01:00"},{"temperature":"19.2","dtg":"2016-07-28 11:00:00"},{"temperature":"19.2","dtg":"2016-07-28 10:59:00"},{"temperature":"19.2","dtg":"2016-07-28 10:58:00"},{"temperature":"19.2","dtg":"2016-07-28 10:57:00"},{"temperature":"19.2","dtg":"2016-07-28 10:56:00"},{"temperature":"19.1","dtg":"2016-07-28 10:55:00"},{"temperature":"19.1","dtg":"2016-07-28 10:54:00"},{"temperature":"19.1","dtg":"2016-07-28 10:53:00"},{"temperature":"19.1","dtg":"2016-07-28 10:52:00"},{"temperature":"19.1","dtg":"2016-07-28 10:51:00"},{"temperature":"19.1","dtg":"2016-07-28 10:50:00"},{"temperature":"19.1","dtg":"2016-07-28 10:49:00"},{"temperature":"19.1","dtg":"2016-07-28 10:48:00"},{"temperature":"19.1","dtg":"2016-07-28 10:47:00"},{"temperature":"19.1","dtg":"2016-07-28 10:46:00"},{"temperature":"19.1","dtg":"2016-07-28 10:45:00"},{"temperature":"19.0","dtg":"2016-07-28 10:44:00"},{"temperature":"19.0","dtg":"2016-07-28 10:43:00"},{"temperature":"19.0","dtg":"2016-07-28 10:42:00"},{"temperature":"19.0","dtg":"2016-07-28 10:41:00"}];
//plot
$(document).ready(function () {
$.plot($("#placeholder"), dataset1 );
});
在我的 php 页面中,一个 flot 图表网格显示在我的占位符中,但没有数据显示。
如果我使用以下格式将数据硬编码到变量 dataset1 中,则会出现图表:[[1, 300],[2, 600],[3, 550],[4, 400],[5, 300]];
我认为问题可能是由于我的 json 数据格式不正确,在 php 部分需要对其进行格式化以便于 flot 图表绘制。
非常抱歉,我是 flot 图表的新手,在发布此问题之前已尝试了 stackoverflow 中的许多类似解决方案,但没有成功。非常感谢您提供任何帮助!