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]
)
Source:stackexchange.com