score:2

Accepted answer

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])


Related Query

More Query from same tag