CODEWITHSUNDEEP
javascriptweb
okawei
okawei

Reputation: 1527

Chart.js data structure, how can I dynamically fill this with an array and random colors?

I'm using chart.js to display a Doughnut chart on my site, I'd like to be able to populate the values in the chart dynamically with an array of content pulled from somewhere else on the page. Chart.js stores it's values for the Doughnut chart in this data structure

var doughnutData = [
            {
                value: 10,
                color:"#F7464A"
            },
            {
                value : 10,
                color : "#46BFBD"
            },
            {
                value : 20,
                color : "#FDB45C"
            },
            {
                value : 50,
                color : "#949FB1"
            }

        ];

How can I populate the values of this data structure dynamically in Javascript?

I already know how I'm going to generate the random colors using this (for anyone interested) 

'#'+Math.floor(Math.random()*16777215).toString(16)

Upvotes: 3

Views: 6009

Answers (2)

btm86042
btm86042

Reputation: 88

You have to build the array with the appropriate elements in it like the below:

var getcolor = function (num) {
    if (num == 0)
        return "#F38630";
    if (num == 1)
        return "#E0E4CC";
    if (num == 2)
        return "#69D2E7";
    if (num == 3)
        return "#003399";
    if (num == 4)
        return "#969696";
};

var piedata = []
for (i = 0; i <= self.countViolationsByManager().length - 1; i++) {
    piedata.push({
        value: self.countViolationsByManager()[i].Count(),
        label: self.countViolationsByManager()[i].MoneyManagerName(),
        color: getcolor(i)
    });
}

var pieoptions = {
}
var ctx = $("#myPieChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
new Chart(ctx).Pie(piedata, pieoptions);

Upvotes: 1

tjb1982
tjb1982

Reputation: 2259

The issue you're going to have is that actual randomness isn't really perceived as random, so you're going to have to figure out a way to check the color similarity between each of these colors to make sure they don't appear to be indistinguishable. I've done this before with three colors (below). What I would suggest instead is creating a list of colors that you already know are dissimilar and randomly choosing from that list instead.

I tried to keep my colors within a certain range:

function getRandomColor() {
    var color = '';
    while (!color.match(/(#[c-e].)([e-f][a-f])([9-c].)/)) {
        color = '#' + Math.floor(Math.random() * (Math.pow(16,6))).toString(16);
    }
    return color;
}

function getColorSimilarityIndex(c1, c2) {
    var index = 0;
    for (i = 1; i <= 6; i++) {
        if (i == 1 || i == 5) {
            if (c1.substring(i, i + 1) === c2.substring(i, i + 1)) {
                index++;
            }
        }
    }
    return index;
}

var color1 = getRandomColor();
var color2 = getRandomColor();
var color3 = getRandomColor();

while (getColorSimilarityIndex(color2, color1) > 0) {
    color2 = getRandomColor();
}
while (getColorSimilarityIndex(color3, color1) > 0 || getColorSimilarityIndex(color3, color2) > 0) {
    color3 = getRandomColor();
}

Upvotes: 2

Related Questions