Не удается увидеть возвращенный массив JSON на гистограмме диаграммы JS после изменения запроса MySQL

РЕДАКТИРОВАТЬ

Я утешил $.each значения и у меня есть: 12 undefined values,

Поэтому я думаю, что проблема в том, что когда я возвращаю массив, функция успеха не может прочитать его здесь:

success:function(resp)
{
var costData = [];
$.each(resp, function( key, row)
{
costData.push(row['cost']);
console.log(row['cost']);
});
...

КОНЕЦ РЕДАКТИРОВАНИЯ

На моей веб-странице есть диаграмма JS, которая получает доход за каждый месяц.
Через несколько месяцев мы увидели, что значения неверны из-за ошибки в SQL-запросе, который мы сделали. Но график работал хорошо. Сначала я покажу вам сценарий:

Вот старый PHP-скрипт, который помогает нам получать значения для каждого месяца:

<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Include connection file
require_once('../include/global.php');

//Json and PHP header
header('Content-Type: application/json');
$arr = array();
$user = $_SESSION['username'];
$id_logged = $_SESSION['login_id'];$date1 = $_POST['current_year'];

$res = array();
$c = "cash";
$i = "installment";
//SUM of cash paid Month
$sql = "SELECT
sum(cost) as cost

FROM
(
SELECT
sum(project_cost) as cost,
month(date_now) as month
FROM
dentist.patient_info
WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt
GROUP BY month(date_now)
UNION
SELECT
sum(payment),
month(date_now)
FROM
debt
WHERE year(debt.date_now)=:year_now
UNION SELECT 0,1
UNION SELECT 0,2
UNION SELECT 0,3
UNION SELECT 0,4
UNION SELECT 0,5
UNION SELECT 0,6
UNION SELECT 0,7
UNION SELECT 0,8
UNION SELECT 0,9
UNION SELECT 0,10
UNION SELECT 0,11
UNION SELECT 0,12
) tmp
GROUP BY month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":year_now", $date1);
$exec = $sqlStmt->execute();
$res = $sqlStmt->fetchAll();

echo json_encode($res);

?>

Теперь, после того, как мы внесли некоторые изменения в этот скрипт, я увидел значения в XHR, но ChartJS перестал работать. Вот новый скрипт:

<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Include connection file
require_once('../include/global.php');

//Json and PHP header
header('Content-Type: application/json');

$user = $_SESSION['username'];
$id_logged = $_SESSION['login_id'];

$date1 = $_POST['current_year'];

$res = array();
$c = "cash";
$i = "installment";
//SUM of cash paid Month
for($i=1; $i<=12; $i++)
{
$sql = "SELECT
sum(project_cost) as cost
FROM
patient_info
WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt AND month(date_now)=:month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":year_now", $date1);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":month", $i);
$exec = $sqlStmt->execute();
$sum1 = $sqlStmt->fetchAll();

$sql2 = "SELECT
sum(payment) as cost
FROM
debt
WHERE id_logged = :logged AND year(date_now)=:year_now AND month(date_now) = :month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":year_now", $date1);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":month", $i);
$exec = $sqlStmt->execute();
$sum2 = $sqlStmt->fetchAll();

$sum = $sum1 + $sum2;

$res[$i] = $sum;
}
echo json_encode($res);

?>

И вот результат на консоли:

введите описание изображения здесь

А вот и скрипт ChartJS:

$.ajax
({
url: 'stat_income_test.php',
type: 'POST',
data: {current_year: y},
dataType: 'JSON',
success:function(resp)
{
var costData = [];
$.each(resp, function( key, row)
{
costData.push(row['cost']);
});var areaChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
label: "Cash Income",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: costData
}
]
};
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
var barChartData = areaChartData;
barChartData.datasets[0].fillColor = "#00c0ef";
barChartData.datasets[0].strokeColor = "#00c0ef";
barChartData.datasets[0].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true,

// onAnimationComplete: function () {

// var barChartData = this.chart.barChartData;
// barChartData.font = this.scale.font;
// barChartData.fillStyle = this.scale.textColor
// barChartData.textAlign = "center";
// barChartData.textBaseline = "bottom";

// this.datasets.forEach(function (dataset) {
//     dataset.bars.forEach(function (bar) {
//        barChartData.fillText(bar.value, bar.x, bar.y - 5);
//     });
//   })
//}
};

barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
}
});

ChartJS теперь выглядит так:

введите описание изображения здесь

Год становится правильным, и поэтому я вижу результат на XHR но не могу увидеть это на графике. Любая помощь приветствуется.

2

Решение

Задача ещё не решена.

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

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

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector