Результат ChartJS и JSON: невозможно установить свойство ‘fillColor’ из неопределенного

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

Я только вижу это:

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

У меня есть этот код PHP, который выбирает несколько строк из MySQL, и результат будет закодирован с использованием json_encode таким образом, мы можем получить его в скрипте AJAX и установить результат массива внутри гистограммы 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');
$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 0,1
UNION SELECT 0,2
UNION SELECT 0,3
UNION SELECT 0,4
) 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);

?>

А вот и мой AJAX-скрипт:

$(document).ready(function() {
//Get the current year and display it in year text box
var d = new Date();
y = d.getFullYear();
res = $("#id_year").val(y);
$.ajax
({
url: 'stat_income.php',
type: 'POST',
data: {current_year: y},
dataType: 'JSON',
success:function(res)
{
$.each(res, function( key, row)
{
console.log(row['cost']);
var areaChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
label: "Electronics",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: row['cost']
}
]
};
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
var barChartData = areaChartData;
barChartData.datasets[0].fillColor = "#00a65a";
barChartData.datasets[0].strokeColor = "#00a65a";
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
};

barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
});
},
error:function(res)
{
console.log(res);
}
});
});

Я получаю следующую ошибку:

stat.php: 111 Uncaught TypeError: Невозможно установить свойство ‘fillColor’ из
не определено

И вот мой результат XHR сети:

Я попытался установить условие:

    if(row['cost']==undefined)
{
row['cost']=0;
}

Но все равно получаю ту же ошибку.