javascript — получает значения sql и помещает их в chart.js.

Question

javascript — получает значения sql и помещает их в chart.js.

Я пытался получить значения из sql и положить его в chart.js.

Я достиг правильного запроса в отображении правильных данных.

Я использую гистограмму в chart.js, чтобы показать, сколько людей имеют дни рождения в каждом месяце.

SELECT COUNT( * ) FROM person WHERE MONTH( birthday ) = 02 //02 = February

Я видел решение онлайн, но оно не для гистограммы. Тем не менее, я попробовал это.

Код PHP:

include('config.php');

$months = array("january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december");
$monthvalues = array();
foreach ($months as $month) {
$monthvalues[$month] = 0;
}

$result = mysqli_query($conn, "SELECT birthday, count(*) FROM person group by birthday;");
while ($row = mysqli_fetch_array($result, MYSQL_NUM)) {
$monthvalues[$row[0]] = (int)$row[1];
}

print (json_encode($monthvalues));

JS код:

$(document).ready(function () {
new Chart($("#canvas_bar").get(0).getContext("2d")).Bar({
labels: [<?=json_encode($months);?>],
datasets: [{
fillColor: "#03586A", //rgba(151,187,205,0.5)
strokeColor: "#03586A", //rgba(151,187,205,0.8)
highlightFill: "#066477", //rgba(151,187,205,0.75)
highlightStroke: "#066477", //rgba(151,187,205,1)
data: [<?=json_encode(array_values($monthvalues));?>]
}]
}, {
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
responsive: true,
barDatasetSpacing: 6,
barValueSpacing: 5
});
});

Мой код возвращается NaN,

Как я могу правильно сделать это? Спасибо большое за вашу помощь.

1

bar-chart charts javascript mysql php

Решение

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

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

Источник

Accepted Answer

Похоже, что по крайней мере отчасти проблема в том, что вы вкладываете метку и массивы данных, когда они должны быть просто одним измерением. Снимите внешние скобки с вашего json_encode звонки:

var barChartData = {
labels: <?=json_encode($months);?>,
datasets: [
{
fillColor: "#03586A", //rgba(151,187,205,0.5)
strokeColor: "#03586A", //rgba(151,187,205,0.8)
highlightFill: "#066477", //rgba(151,187,205,0.75)
highlightStroke: "#066477", //rgba(151,187,205,1)
data: <?=json_encode(array_values($monthvalues));?>
}
]
};

Я не уверен насчет структуры таблицы MySQL, но может быть лучше просто получить название месяца и количество:

"SELECT LOWER(MONTHNAME(birthday)), count(*) FROM person GROUP BY LOWER(MONTHNAME(birthday))"

Это даст вам вывод, как:

april   53
august  8
december    4
february    75
march   56
may 2
november    13
october 1
september   11

Вы можете обновить ваш PHP, чтобы получить более структурированный вывод, например:

$result = mysqli_query($conn, "SELECT birthday, count(*) FROM person group by birthday;");
$output = array();

while ($row = mysqli_fetch_assoc($result, MYSQL_NUM)) {
array_push($output, $row);
}

print (json_encode($output));

Что будет выводить [{ "january": 53 }, { "february": 23 }, ....etc]тогда ваш javascript изменится на:

var barChartData = {
labels: <?=json_encode(array_keys($output));?>,
datasets: [
{
fillColor: "#03586A", //rgba(151,187,205,0.5)
strokeColor: "#03586A", //rgba(151,187,205,0.8)
highlightFill: "#066477", //rgba(151,187,205,0.75)
highlightStroke: "#066477", //rgba(151,187,205,1)
data: <?=json_encode(array_values($output));?>
}
]
};

http://codepen.io/anon/pen/obmKer

1