Home > OS >  How to put pie chart options "pieHole" and "is3D: true" together?
How to put pie chart options "pieHole" and "is3D: true" together?

Time:10-07

I'm getting values ​​from a google spreadsheet. I'm trying to add these two options together "pieHole" and "id3D:true"in a pie chart, but it's not working. If I put the two options together, only the 'is3D:true' option works, the 'pieHole' option doesn't. The code does not return any errors. When I view the HTML, the graph appears perfectly with the 'is3D:true' option, but without the 'pieHole'

Script.gs

function dmarket(url){
  const ss = SpreadsheetApp.openByUrl(url);
  const sh = ss.getSheetByName('table');
  const data=sh.getRange("K3:L").getValues();
  Logger.log(data);
  return data;
}

javascript.html

document.getElementById("DB").addEventListener("click",dashboard);

    function dashboard(){
    var url=document.getElementById("url").value;
    google.charts.load('current', {'packages':['corechart']});
    google.script.run.withSuccessHandler(drawChart).dmarket(url);
  };
    function drawChart(dataReturned) {
            var data = google.visualization.arrayToDataTable(dataReturned);
    
            var options = {
              title: 'Pie Chart',
              pieHole: 0.50,
              is3D: true,
            };
    
            var chart = new google.visualization.PieChart(document.getElementById('dmarket'));
            chart.draw(data, options);
          }

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('css'); ?>
  </head>
  <body id="body">
    <div >
    <input type="text" id="url" placeholder="URL"/>
    </div>
    <button id="DB" >DASHBOARD</button>
    <div id="dmarket" style="width: 900px; height: 500px;"></div>
     <?!= include('javascript'); ?>
  </body>
</html>

CodePudding user response:

Combining pieHole and the is3D option is not possible.

As suggested by the official Google Charts documentation:

"You can't combine the pieHole and is3D options; if you do, pieHole will be ignored."

This could be considered a missing feature or just a limitation in general on how it works. You might request a better clarification over here:

Reference:

  • Related