How to generate random color for JSCharts

Question

function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            } 
            return color;
        }

I'm using JSCharts in a project I'm working on and I need a different color for each bar in a Graph/Bar Chart.

the below example works fine but if I have more than 6 records then it alert me a message:

JSChart" Colors array length must equal data length in case of pie and bar graphs

How can I generate color based on the number of records?

Here's an example of the bar chart data set:

$.getJSON("http://...", function (data) {

        var array = $.map(data, function (data) {
            return [[data.Name, parseInt(data.Id)]];
        }); 

        var colors = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#B381C9'];
        var myChart = new JSChart('graph', 'bar');
        myChart.setDataArray(array);
        myChart.colorizeBars(colors);
        myChart.setTitle('Title');
        myChart.setTitleColor('#8E8E8E');
        myChart.setAxisNameX('Orgs');
        myChart.setAxisNameY('%');
        myChart.setAxisColor('#c6c6c6');
        myChart.setAxisWidth(1);
        myChart.setAxisNameColor('#9a9a9a');
        myChart.setAxisValuesColor('#939393');
        myChart.setAxisPaddingTop(60);
        myChart.setAxisPaddingLeft(50);
        myChart.setAxisPaddingBottom(60);
        myChart.setTextPaddingBottom(20);
        myChart.setTextPaddingLeft(15);
        myChart.setTitleFontSize(11);
        myChart.setBarBorderWidth(0);
        myChart.setBarSpacingRatio(50);
        myChart.setBarValuesColor('#737373');
        myChart.setGrid(false);
        myChart.setSize(616, 321);
        //myChart.setBackgroundImage('chart_bg.jpg');
        myChart.draw();
    });

Answer 1

Your function looks good! To use it to generate colors in an array, just use a loop:

function getColorArray(num) {
    var result = [];
    for (var i = 0; i < num; i += 1) {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var j = 0; j < 6; j += 1) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        result.push(color);
    }
    return result;
}

Then, you can get your data length by using the Array.length property. Replace these lines:

var colors = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#B381C9'];
var myChart = new JSChart('graph', 'bar');
myChart.setDataArray(array);
myChart.colorizeBars(colors);

with:

var myChart = new JSChart('graph', 'bar');
myChart.setDataArray(array);
myChart.colorizeBars(getColorArray(array.length));

Answer 2

You can use bitwise operators to generate random hex colors:

var getRandomColor = function () {
    var random = Math.random();
    var exponent = --random.toExponential().split('-')[1];

    random *= Math.pow(10, exponent);

    return '#' + ( ~~(random * (1 << 24) )).toString(16);
};

Then you can use your data array to determine the amount of colors:

// Example data Array.
var data = [ 1, 2, 4, 5, 6];

// The amount of random colors you want to generate.
var amount = data.length;

Now you can create a loop and generate your colors and push them in a colors Array:

// Will contain the random hex colors.
var colors = [];

// Generate colors.
while(amount--) {
    colors.push(getRandomColor());
}

Whats going on in getRandomColor():

The 'highest' hex value is ffffff and the 'lowest' is 000000, when converting these to decimal numbers you get:

parseInt('ffffff', 16); // 16777215
parseInt('000000', 16); // 0

It turns out, 2^24 equals 16777216, this can be calculated using the bitwise left shift operator, i.e, 1 << n shifts the operand n bits to the left which equals 2^n. Therefore 1 << 24 equals 16777216.

This means that as long as you can provide a random number between 1 and 0.1 to multiply it with 1 << 24, you'll always get a valid hex value.

To assure this, you need to extract the exponent from Math.random(), because it can also return values like 0.0088248689007014. If you wouldn't do this, you will NOT get correct hex values all the time.

Finally before converting the random number to a hex value, you can use the ~~ double bitwise not operator to remove everything after the decimal point.

You can find more info on the double bitwise operator in this question