change the colour of google pie chart slice based on mysql value

Question

I currently have 2 charts on a page that are populated using MYSQL and 1 of them a bar chart the other a pie chart

I have successfully managed to change the colours of the bars based on mysql but dont seem to be able to use the same code to change the pie chart colours the outcome i get would be that the whole chart turn the largest slice's colour e.g. for the data in the table below the whole chart would turn RED as its the largest slice

the data string comes out as below:

|---------------------|------------------|
|      location       |      beacon      |
|---------------------|------------------|
|         RED         |         34       |
|---------------------|------------------|
|         Blue        |         34       |
|---------------------|------------------|
|         Green       |         34       |
|---------------------|------------------|
|         RED         |         34       |
|---------------------|------------------|
|        Yellow       |         34       |
|---------------------|------------------|

so the charts desired outcome would be 4 slices red,blue,green,yellow

the issue im having is because the chart is populated by mysql i cant define the colours manually as the way that the sections come out can differ every time the chart loads.

<script type="text/javascript">  
       google.charts.load('current', {'packages':['corechart']});  
       google.charts.setOnLoadCallback(drawChart);  
       function drawChart()  
       {  
            var data = google.visualization.arrayToDataTable([  
                      ['location', 'count'],  
                      <?php 
        $connect = mysqli_connect("localhost", "user", "password", "test");  
if(isset($_POST['but_search'])){
      $fromDate = $_POST['fromDate'];
      $endDate = $_POST['endDate'];

      if(!empty($fromDate) && !empty($endDate)){
         $emp_query .= " and date_of_join 
                      between '".$fromDate."' and '".$endDate."' ";
      }
    }  
        $query = "SELECT location,count(location) as customer_count FROM test.filter where date between '".$fromDate."' and '".$endDate."' group by location ";  
        $result = mysqli_query($connect, $query); 
                      while($row = mysqli_fetch_array($result))  
                      {  
                           echo "['".$row["location"]."', ".$row["count"]."],"; 
                      }  
                      ?>  
                 ]); 
for (var i = 0; i < data.getNumberOfRows(); i++) {
var colors = [];
  colors.push(data.getValue(i, 0));

            var options = {  
                  title: 'Zone Statistics',  
                  is3D:false,  
                  pieHole: 0.4,  
          colors: colors,
          textStyle:{color: 'black'},
          legend:{position: 'none'},
          chartArea: {width: 550, height: 300},
          legend: 'labeled',
              pieSliceText: 'none',
          backgroundColor: '#E4E4E4',
                 };  
            var chart = new google.visualization.PieChart(document.getElementById('pie'));  
            chart.draw(data, options);  
    };
       }

       </script>

Rana Shahid Rana Shahid · Accepted Answer · 2020-08-19T20:44:24

This question is about 2 years old but still unanswered. Let me provide a possible solution to your problem.

Google has option slices: to customize slice color and font color as well. There can be used array of all slices to customize them all or use index of the slice to customize individual slice.

    slices: [{color: 'black'}, {}, {}, {color: 'red'}]
                        or
    slices: {0: {color: 'black'}, 3: {color: 'red'}}

This can be used to change colors dynamically if colors are passed as variables.

Here is the google reference page for slice colors. Piechart

change the colour of google pie chart slice based on mysql value

1 Answers