Specific Colors Pie Graphic

36 views
Skip to first unread message

Santiago Fernandez

unread,
Apr 28, 2018, 10:20:52 AM4/28/18
to Google Visualization API
Hello!


I'm trying to add colors, predefined. I can not do it. I read that if I add "{role: 'style'}", I could add the color.

"SELECT  estados.estado as status, count(*) as number, estados.color as color FROM referencias INNER JOIN estados ON referencias.status = estados.id_estado where id_control = '$id' GROUP BY status";


Result:

Controlado 3 green
Pendiente 6 red

Here my Chart

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
  <script type="text/javascript">  
  google.charts.load('current', {'packages':['corechart']});  
  google.charts.setOnLoadCallback(drawChart);  
  function drawChart()  
  {  
  var data = google.visualization.arrayToDataTable([  
  ['status', 'number', { role: 'style' }],  
  <?php  
  while($row = mysqli_fetch_array($resultHastaHoy))  
  {  
  //echo "['".$row["status"]."', ".$row["number"]."],"; 
  echo "['".$row["status"]."', ".$row["number"].", '".$row["color"]."'],";  
  }  
  ?>  
  ]);  
  var options = {  
  title: 'Cumplimiento Hasta Mes Actual',  
  is3D:true,  
  pieHole: 0.4,
  //colors: ['green','red'] 
  };  
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));  
  chart.draw(data, options);  
  }  
  </script>  

Thanks! For the help!

Regarts from Argentine!


Ray Thomas

unread,
Jul 5, 2018, 12:28:13 PM7/5/18
to Google Visualization API
I couldn't get the role colors to work in the pie chart, so I tried a different approach and replaced the entire Google color array with one of my own.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

usrClr = ['#2309B2','#3416D8','#1F193F','#0A0562','#150E88','#181CF0','#091EBC','#213BB3','#4888F1','#003EA5','#002B72','#0070EE','#002855','#001C3B','#3066A1','#21466E','#097BBC','#3293CC','#1BABFF','#41B6E6','#1C7599','#338EB3','#05516C','#68D2DF','#368892','#50A2AC','#09A1B2','#5CBAC5','#90F3FF','#3BF8FD'];

        var data = google.visualization.arrayToDataTable([
 ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'Cumplimiento Hasta Mes Actual',
is3D:true,
colors: usrClr
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Like the usual Google colors, once all the colors are used, they restart from the beginning again. I used an array of 30 colors, but you can use how many you want.
Reply all
Reply to author
Forward
0 new messages