javascript — вывод данных из MySQL с помощью FLOT и переполнения стека
Я хотел бы использовать AJAX с FLOT для отображения некоторых данных из базы данных MySQL. Я написал код ниже, чтобы получить данные из базы данных и построить график с использованием FLOT, но что-то работает неправильно. Любая помощь в создании этой работы приветствуется.
<?php
require 'database_connect.php';
try
{
$sql = "SELECT ts, COUNT(*) FROM tablename WHERE time IS NOT NULL and ts > ( NOW() - INTERVAL 5 MINUTE)";
$result = $pdo->query($sql);
}
catch (PDOException $e)
{
$error = 'databaseQuery.php - Database access failed: ' . $e->getMessage();
include 'error.html.php';
exit();
}
while ($row = $result->fetch())
{
$five_mins[] = $row;
}
include 'databaseQuery.html.php';
$pdo = null; // Disconnect from the database server.
?>
Запрос к базе данных правильно извлекает из моей базы данных метку времени UTC в качестве элемента 0 и целое число в качестве элемента 1.
Чтобы отобразить числа на веб-странице, я использую краткий код ниже:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Real-Time Metrics</title>
</head>
<?php
foreach ($five_mins as $fm):
echo "<p>Here are the results for 5 minutes of actions 0: " . $fm[0] . "</p>";
echo "<p>Here are the results for 5 minutes of actions 1: " . $fm[1] . "</p>";
?>
<?php endforeach; ?>
</html>
Я попытался построить данные, используя код ниже:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Real-Time Metrics</title>
<link href="css/flot.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="flot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.time.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jshashtable-3.0.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.numberformatter-1.2.4.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.symbol.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.axislabels.js"></script>
<script>
// Options for plotting
var options = {
series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
xaxis: {
mode: "time",
tickSize: ["2", "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 20 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return hours + ":" + minutes + ":" + seconds;
} else {
return "";
}
},
axisLabel: "Local Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 14,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
min: 0,
max: 100,
tickSize: 5,
tickFormatter: function (v, axis) {
if (v % 10 == 0) {
return v;
} else {
return "";
}
},
axisLabel: "Actions",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 14,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#fff"},
};
// End of the plot options
// Begin plot
$(document).ready(function(){
var callAjax = function(){
$.ajax({
method:'get',
url:'php/databaseQuery.php',
cache: false,
success:function(results){
dataset = [{ label: "ACTIONS", data: results }];
$.plot($("#placeholder"), dataset, options);
}
});
}
callAjax();
setInterval(callAjax,3000);
});
</script>
<body>
<div id="header">
<h2>Real-time Metrics</h2>
</div>
<div id="content">
<div class="container">
<div id="placeholder" class="placeholder"></div>
</div>
</div>
</body>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …