Передача массива во флот

Question

Передача массива во флот

Я пытался построить график с помощью flot, и столкнулся с проблемой. Я думаю, что проблема в том, как m использует переменную php с помощью flot. Кроме того, график не отображается, поэтому я, должно быть, сделал что-то не так , Ниже приведен код кода:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.categories.js"></script>
</head>

<body>

<?php

//CONNECTING TO THE SERVER
$servername = "XXX";
$username = "YYY";
$password = "ZZZ";
conn = new mysqli($servername, $username, $password);

$sql = "SELECT NAME, AGE FROM pro_db";
$result = $conn->query($sql);
$wt=array();

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
//storing the values in the array
$wt[]=$row;//is this the right way
}
} else {
echo "0 results";
}

?>
<div id="placeholder" style="width:600px;height:300px;"></div>

<script type="text/javascript">
$(function () {
//accessing the array
var data = <?php echo $wt; ?>;

$.plot($("#placeholder"), [data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center" }
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
});
</script>

</body>
</html>``

0

flot php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вот полностью рабочий пример, который я сделал. Если что-то не работает — есть ошибка с данными. Пытаться var_dump как твой $wt массив выглядит как в конце;

$data = [
['Andrew', 31],
['Helen', 29],
['Dasha', 24],
['Denis', 23]
];

?>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="canvas" style="width: 600px; height: 400px;"></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.categories.js"></script>
<script>
var data = <?php echo json_encode($data) ?>;
$("#canvas").plot([data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
</script>
</body>
</html>

0