Click here to Skip to main content
15,608,989 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Quote:
I have an Array of objects with 3 elements in each object and this Array is coming from database in JSON format, one of the Array elements is an amount. I have another Array of colors (as shown in the second image) and I want these colors to be assigned automatically based on the amount, I want to assign the darkest color to the highest amount value and then go on until the least value will have the lightest color.. Could you please help me to achieve this.


Quote:
Note: The Array coming from the Database will keep on changing, but the color array will remain the same. I want the darkest color

to the highest amount and lighestest color to the lowest amount.


What I have tried:

var amount = [];

            var len = data.length;
            var max=0;
            var mnth=0;
            var min=0;
            for (var i = 0; i < len; i++) {
                if (data[i].for_month == "APRIL") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=3;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "AUGUST") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=7;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "DECEMBER") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=11;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "FEBURARY") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=1;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "JANUARY") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=0;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "JULY") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=6;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "JUNE") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=5;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "MARCH") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=2;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "MAY") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=4;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "NOVEMBER") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=10;
                    }
                    amount.push(data[i].amount);
                }
                if (data[i].for_month == "OCTOBER") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=9;
                    }
                    amount.push(data[i].amount);
                }
                else if (data[i].for_month == "SEPTEMBER") {
                    if(data[i].amount>max)
                    {
                        max=data[i].amount;
                        mnth=8;                        
                    }
                    amount.push(data[i].amount);
                }
            }
            alert(max);
            //bgclr.splice(mnth, 1, "clr"+mnth == "#1d1d02");
            var bgclr = [clr11 = "#ffffc4",
                         clr10 = "#fafa92",
                         clr9 = "#e5e574",
                         clr8 = "#d1d160",
                         clr7 = "#c7c74a",
                         clr6 = "#b5b540",
                         clr5 = "#a2a236",
                         clr4 = "#b5b500",
                         clr3 = "#919117",
                         clr2 = "#606007",
                         clr1 = "#333304",
                         clr0 = "#1d1d02",];

            var data5 = {
                labels : ["JANUARY", "FEBURARY", "MARCH", "APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"],
                datasets : [
                    {
                        label : "Categories",  
                        backgroundColor : bgclr,
                        data : [amount[4], amount[3], amount[7],amount[0],amount[8], amount[6],amount[5],amount[1], amount[11],amount[10],amount[9],
                                amount[2]],   
                    }
                ],
            };  
            var chart5 = new Chart( ctx5, {
                type : "pie",
                data : data5,
                options : options5 
            });
        },
    });

    
});
Posted
Updated 9-Jan-21 22:20pm
v2
Comments
syed_eer 10-Jan-21 4:02am    
Thanks for your reply @Gerry, my apologies, if my query is not appropriate or not clear.
I already checked both of your provided links but still unable to achieve the desired result. I would like to rephrase my question again and make it precise.

1 solution

You need to "define" the colors you want and add them with the chart data.

How set color family to pie chart in chart.js - Stack Overflow[^]

Colors · Chart.js documentation[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900