ChartJS и JSON результат: не удается установить свойство 'FillColor' неопределенной

Question

EDIT

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

EDIT END

У меня есть этот 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: Cannot set property 'fillColor' of undefined

А вот моя сеть результат XHR:

Я постарался установить следующее условие:

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

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

Answer 1

После быстрого просмотра я вижу только 1 элемент в массиве datasets переменной areaChartData.

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'] 
     } 
     ] 
    }; 

В то время как здесь вы пытаетесь получить доступ datasets[1]:

var barChartData = areaChartData; 
barChartData.datasets[1].fillColor = "#00a65a"; 
barChartData.datasets[1].strokeColor = "#00a65a"; 
barChartData.datasets[1].pointColor = "#00a65a"; 

Я не уверен, что я понял, на 100%, что вы пытаетесь кода, но если вы хотите изменить цвет вашего набора данных вы должны установить цель barChartData.datasets[0].

Если ваша цель в том, чтобы вставить второй набор данных, вы должны вставить объект первым:

barChartData.datasets.push({ }); // A new object for a second dataset to modify at barChartData.datasets[1] 
barChartData.datasets[1].fillColor = "#00a65a"; 
barChartData.datasets[1].strokeColor = "#00a65a"; 
barChartData.datasets[1].pointColor = "#00a65a"; 
// Don't forget to set also the label and the data 

Редактировать: Для продолжения вопроса: Используйте петлю только для извлечения данных, которые вы хотите от вашего восстановленного JSON, не создавайте экземпляр диаграммы несколько раз. Дайте этому попытку: (не проверено)

$(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) 
{ 

    var costData = []; // In this array we will format data from the retrieve JSON array 

    $.each(res, function(key, row) 
    { 
    costData.push(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: costData 
     } 
     ] 
    }; 

    var barChartCanvas = $("#barChart").get(0).getContext("2d"); 
    var barChart = new Chart(barChartCanvas); 
    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, 
     datasetFill: false 
    }; 

    barChart.Bar(areaChartData, barChartOptions); 
}, 
error:function(res) 
{ 
    console.log(res); 
} 
}); 
}); 

Объяснения: Цель состоит в том, чтобы передать в качестве данных для набора данных массива целых чисел ([0, 0, 1100, 0, 0, 0, 0, 0, 0, 0, 0, 0])