score: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: stackoverflow.com
Related Query
- ChartJS and JSON result: Cannot set property 'fillColor' of undefined
- Chartjs cannot read property datasets of undefined
- TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- chartjs & asp.net: Cannot read property 'labels' of undefined
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- Chartjs + Vue.js - Cannot read property '_meta' of undefined
- Cannot read property 'length' of undefined for ChartJS when I use it inside React
- Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- ERROR TypeError: Cannot read property 'nativeElement' of undefined in Ionic 5 and chart.js
- Chart Js Cannot read property 'length' of undefined
- Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
- Cannot read property 'labels' of undefined
- Chart.js Cannot read property 'fontSize' of undefined
- TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts
- ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
- Cannot read property 'transition' null chartjs
- Uncaught TypeError: Cannot read property 'draw' of undefined
- Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
- Updating Chart.js with JSON, cannot read property 'length' of undefined
- Chartjs - Set start and end value into a Bar Chart
- Problems with ChartJS "Uncaught TypeError: Cannot read property 'length' of null"
- Uncaught TypeError: Cannot read property 'draw' of undefined : Angular chart js
- Cannot read property 'reactiveProp' of undefined in vue-chartjs
- react-chartjs integration error. Cannot read property 'xLabels' of undefined
- ChartJS automatically scaled chart has undefined min and max
- How to set the chartjs bar graph scale to the highest value in the result data
- Angular 12 + Chartjs 3.3.2 TypeError: Cannot read property 'left'
- chartjs; cannot read property '0' of undefined
More Query from same tag
- How to display certain part of chart.js as dotted while rest as bold?
- Chart.js display x axis labels ON ticks in bar chart, not between
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- How To get keys(index) of collection in laravel
- Chart.js How to get min-max values of X axis?
- chartjs chart spilling out of container
- Dynamically update values of a chartjs2.0 chart
- ChartJS react-chart-js2 Options not working
- How to remove left and right padding from the canvas/chart?
- Resizing chart issue with CSS Grid
- Chart.js Fill color at null line and null points Tooltip
- Chartjs populate data with Axios response
- How to get bar chart width in pixel
- Add dynamically function to Chart.js
- set scroll on bar chart in chartjs
- Updating chart.js with JSON from Razor page
- Charts in Angular js with JSON Object
- how to set color of label in chartjs?
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Chartjs - Loop thru dataset and assign colors
- Adding a chart-js plugin to vue-chart-js
- Risers or bars of Dynamically built ChartJs from json not aligning to bottom of y axis
- Add images inside bar chart in chart.js
- Disable Charts.js animations in Polymer?
- Chartjs not displaying timed data
- Line Chart Labels - Ng2Charts - ChartJS
- core.js:4197 ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
- charts.js stacked y-Axis
- How to solve Uncaught ReferenceError in console?
- Display Chartjs tooltip values outside the canvas - multi line chart