I have an array called main_arr
which has multiple data arrays within it.
So i am using a bubble chart
to show all these different arrays in different colors to distinguish them
var myBubbleChart = new Chart(ctx, {
type : 'bubble',
data : {
datasets : [
{
label : 'Group 1: ' + main_arr[0].length,
data : main_arr[0],
backgroundColor : 'lightblue'
}, {
label : 'Group 2: ' + main_arr[1].length,
data : main_arr[1],
backgroundColor : 'pink'
}
],
},
options : {
scales : {
yAxes : [{
ticks : {
beginAtZero : true,
min : 0,
max : 100
}
}
],
xAxes : [{
ticks : {
beginAtZero : true,
min : 0,
max : 10
}
}
],
}
}
});
This works perfectly. But i want to make it dynamic so that i dont need to hard code main_arr[0]
, main_arr[1]
...so on for each array.
So i want to use a for loop that loops through the main_arr
and initialize the dataset.
datasets : [
for (var i = 0; i < main_arr.length; i++) { {
label : 'Group ' + i + ': ' + main_arr[i].length,
data : main_arr[i],
backgroundColor : 'lightblue'
}
}
],
This gives an error in the console:
Uncaught SyntaxError: Unexpected token for
So how to achieve this ?
You can use an immediately invoked function like below:
datasets:
(function (main_arr) {
var out = [];
for(var i=0; i<main_arr.length; i++) {
out.push({
label: 'Group ' + i + ': ' + main_arr[i].length,
data: main_arr[i],
backgroundColor: 'lightblue'
});
}
return out;
})(main_arr)
},
The function creates the datasets array and returns it to datasets
property of chart options object.
Here is a fiddle: https://jsfiddle.net/beaver71/4nf41tq9/