Chartjs random colors for each part of pie chart with data dynamically from database
67,330
Solution 1
You should create a separate array for colors ( just like the ict_unit
and efficiency
), instead of assigning a random color value each time to the coloR
variable.
Here is the revised version of your code :
$(document).ready(function() {
$.ajax({
url: "https://jsonblob.com/api/jsonBlob/a7176bce-84e0-11e7-8b99-016f34757045",
method: "GET",
success: function(data) {
console.log(data);
var ict_unit = [];
var efficiency = [];
var coloR = [];
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
for (var i in data) {
ict_unit.push("ICT Unit " + data[i].ict_unit);
efficiency.push(data[i].efficiency);
coloR.push(dynamicColors());
}
var chartData = {
labels: ict_unit,
datasets: [{
label: 'Efficiency ',
//strokeColor:backGround,
backgroundColor: coloR,
borderColor: 'rgba(200, 200, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: efficiency
}]
};
var ctx = $("#my-canvas");
var barGraph = new Chart(ctx, {
type: 'pie',
data: chartData
})
},
error: function(data) {
console.log(data);
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my-canvas"></canvas>
Solution 2
An example snippet for rgb color picker between 235 and 52
const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52);
const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;
console.log(randomRGB());
Resource:
- https://stackoverflow.com/a/45772013/5994546
- https://stackoverflow.com/a/7228322/5994546
- https://www.google.com/search?q=color+picker
Author by
Nda.S
Updated on July 02, 2021Comments
-
Nda.S almost 3 years
I want to set dynamically a color for each part of Pie Chart. Since the chart is dynamically created from database I want for each part that is added to the chart(from database) a different color.
I was trying to do this:
$(document).ready(function() { $.ajax({ url: "http://localhost/chartjs/projects_chart.php", method: "GET", success: function(data) { console.log(data); var ict_unit = []; var efficiency = []; var dynamicColors = function() { var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); return "rgb(" + r + "," + g + "," + b + ")"; }; for (var i in data) { ict_unit.push("ICT Unit " + data[i].ict_unit); efficiency.push(data[i].efficiency); var coloR=dynamicColors(); } var chartData = { labels: ict_unit, datasets: [{ label: 'Efficiency ', //strokeColor:backGround, backgroundColor: [coloR], borderColor: 'rgba(200, 200, 200, 0.75)', //hoverBackgroundColor: 'rgba(200, 200, 200, 1)', hoverBorderColor: 'rgba(200, 200, 200, 1)', data: efficiency }] }; var ctx = $("#my-canvas"); var barGraph = new Chart(ctx, { type: 'pie', data: chartData }) }, error: function(data) { console.log(data); }, }); });
But I only get one color for the first part of the pie chart.
Could you help me?