2

I'm using chart.js for making pie chart. I'd like to have different colors for every slice that the while loop generates.

$pull_request = 'SELECT * FROM `oc_aa_affiliatecollclicktracking`';
$sqli = $db->query($pull_request);

$num_rows=mysqli_num_rows($sqli);
$cur_row=0;
var pieData = [
                <?php 
                while ($row = mysqli_fetch_array($sqli)) {      
                $color=intval(256*$cur_row/($num_rows-1));
                $cur_row++;
                echo    '{
                            value: '.$row["product_clicks"].',
                            color: "rgb(256,'.$color.')", // NEED TO BE RANDOM FOR EVERY ROW/SLICE
                            highlight: "#333",
                            label: "' .$row["product_id"].'"
                            },';
                }
                ?>
                ];

                var ctx = document.getElementById("chart-area").getContext("2d");
                window.myPie = new Chart(ctx).Pie(pieData);

} );

what I found makes random colors that changes on page refresh for the whole chart but not for the individual slice. Any idea?

Grasper
  • 1,293
  • 12
  • 26
  • You need to make `#999` into a variable and then change it on every iteration. – chris85 Oct 19 '15 at 16:14
  • Just place the example you found inside the while loop so it is triggered on each loop. – Wobbles Oct 19 '15 at 16:14
  • 1
    Possible duplicate of [Generating a random hex color code with PHP](http://stackoverflow.com/questions/5614530/generating-a-random-hex-color-code-with-php) – chris85 Oct 19 '15 at 16:15
  • edited my code , please take a look – Grasper Oct 19 '15 at 16:16
  • You could generate a hash from the label, and mask off the low 3 bytes, using that as your colour code, it would mean the same label would map to the same colour always. It might choose undesirable colours sometimes though. An alternative is to have an array of good colours, sort your SQL output by label, and pop the colours from your array as you go round your loop. This will mean it will be pretty stable, only potentially changing a colour when a new label appeared. – Michael Oct 19 '15 at 16:20
  • Looking for any random color, or a random color from a set of e.g. 10 preset colors? – turbopipp Oct 19 '15 at 16:23

2 Answers2

3

You can userand() function to get random numbers in specific range. Take a look here

Example:

$color = "#" . rand(10,100);

you can replace $color wherever you want.

If you want hex colors use this function

function random_color(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return $c;
}
Firas Rassas
  • 509
  • 4
  • 12
0

If you are wanting the colours to randomly change visibly you are going to want a javascript solution, or if you want each slice to be a different colour each time the page loads, you could use something similar to this?

<?php 

function randomColour() {
    // Found here https://css-tricks.com/snippets/php/random-hex-color/
    $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
    $color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
    return $color;
}

while ($row = mysqli_fetch_array($sqli)) {                  
    echo    '{
        value: '.$row["product_clicks"].',
        color: '.randomColour().', // NEED TO BE RANDOM FOR EVERY ROW/SLICE
        highlight: "#333",
        label: "' .$row["product_id"].'"
    },';
}
?>

If you need the javascript solution, it would be more complex, as I do not know what happens in the .Pie() constructor, and how you would hook a colour changing element into it

jthawme
  • 223
  • 1
  • 10