javascript — обновление диаграммы столбца Canvasjs через json не работает
Я пытался выяснить, что кажется проблемой с этим кодом, но пока не могу найти решение. Поэтому я хочу, чтобы эта столбчатая диаграмма обновлялась каждую секунду данными из chartOne.php, диаграмма обновляется, но данные не отображаются.
Вот код chartOne.php:
<?php
include_once("connect.php");
$grabOne = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='1'") or die(mysql_error());
while($rows = mysqli_fetch_array($grabOne)){
$oneCount = $rows['count'];
}
$grabTwo = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='2'") or die(mysql_error());
while($rows = mysqli_fetch_array($grabTwo)){
$twoCount = $rows['count'];
}
$grabThree = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='3'") or die(mysql_error());
while($rows = mysqli_fetch_array($grabThree)){
$threeCount = $rows['count'];
}
echo json_encode( array(
array("id"=>"0","count"=>$oneCount),
array("id"=>"1","count"=>$twoCount),
array("id"=>"2","count"=>$threeCount)
));
Вот сценарий:
window.onload = function () {
var dps = [
{label: "Person One", y: 0} ,
{label: "Person Two", y: 0},
{label: "Person Three", y: 0},
];
var chart = new CanvasJS.Chart("chartContainer",{
theme: "theme2",
title:{
text: "Students' Votes"},
axisY: {
title: ""},
legend:{
verticalAlign: "top",
horizontalAlign: "centre",
fontSize: 18
},
data : [{
type: "column",
showInLegend: true,
legendMarkerType: "none",
legendText: " ",
indexLabel: "{y}",
dataPoints: dps
}]
});
chart.render();
var updateInterval = 1000;
var updateChart = function () {
$.get("chartOne.php", function(data) {
$.each(data, function(n, val) {
chart.options.data[0].dataPoints[n].y = val.count;
});
}, "json");
chart.render();
};
setInterval(function(){updateChart()}, updateInterval);
}
Данные на стороне MySQL выглядят так:
id | count
1 | 100
2 | 200
3 | 150
Через секунду после загрузки страницы график превращается в
этот
Я пробовал document.write (); это и данные хорошо показывают. Кто-нибудь может мне помочь? Заранее спасибо.
Решение
Проблема в том, как вы добавляете свои данные на график. Важная строка такова:
chart.options.data[0].dataPoints[n] = { label: val.id, y: val.count };
Ниже приведен полный рабочий пример: я не печатаю данные json, а не извлекаю их удаленно, но все должно работать нормально, если вы вернетесь обратно в $ .get:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
<?php
$data = json_encode( array(
array("id"=>"Person One","count"=>20),
array("id"=>"Person Two","count"=>10),
array("id"=>"Person Three","count"=>15)
));
echo "var data = {$data}";
?>
window.onload = function () {
var dps = [
{label: "Person One", y: 0} ,
{label: "Person Two", y: 0},
{label: "Person Three", y: 0},
];
var chart = new CanvasJS.Chart("chartContainer",{
theme: "theme2",
title:{
text: "Students' Votes"},
axisY: {
title: ""},
legend:{
verticalAlign: "top",
horizontalAlign: "centre",
fontSize: 18
},
data : [{
type: "column",
showInLegend: true,
legendMarkerType: "none",
legendText: " ",
indexLabel: "{y}",
dataPoints: dps
}]
});
chart.render();
var updateInterval = 1000;
var updateChart = function () {
$.each(data, function(n, val) {
console.log(n);
console.log(val);
chart.options.data[0].dataPoints[n] = { label: val.id, y: val.count };
});
chart.render();
};
setInterval(function(){updateChart()}, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Другие решения
Хорошо, так что спасибо посту @ oneskinnydj (идея console.log). Я обнаружил, что запрос MySQL возвращает строку вместо целого числа, которое необходимо для CanvasJS. Поэтому для этого вам нужно изменить mysqli_fetch_array (); в:
mysqli_fetch_assoc();
Итак, конечный результат части php такой:
<?php
include_once("connect.php");
$grabOne = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='1'") or die(mysql_error());
while($rows = mysqli_fetch_assoc($grabOne)){
$oneCount = intval($rows['count']);
}
$grabTwo = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='2'") or die(mysql_error());
while($rows = mysqli_fetch_assoc($grabTwo)){
$twoCount = intval($rows['count']);
}
$grabThree = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='3'") or die(mysql_error());
while($rows = mysqli_fetch_assoc($grabThree)){
$threeCount = intval($rows['count']);
}
$data = json_encode( array(
array("id"=>"Person One","count"=>$oneCount),
array("id"=>"Person Two","count"=>$twoCount),
array("id"=>"Person Three","count"=>$threeCount)
));
echo $data;
Часть javascript такая же, как и раньше, но лучше (благодаря @oneskinnydj) изменить chart.options.data [0] .dataPoints [n] .y = val.count; в это:
chart.options.data[0].dataPoints[n] = { label: val.id, y: val.count };