[Chartjs]-ChartJS and JSON result: Cannot set property 'fillColor' of undefined

2👍

After a quick look I see only 1 element in thedatasets array of your areaChartData variable.

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

Whereas here you try to access datasets[1] :

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

I’m not sure I understood at 100% what you were trying to code, but if you want to modify the colors of your dataset you should target barChartData.datasets[0].

If your goal was to insert a second dataset, you have to insert an object first :

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

Edit : For the continuation of the question :
Use the loop only to extract the data you want from your retrieved JSON, do not instantiate the Chart several times. Give this a try : (not tested)

$(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);
}
});
});

Explanation : The goal is to pass as data for your dataset an array of integers ([0, 0, 1100, 0, 0, 0, 0, 0, 0, 0, 0, 0])

Leave a comment